最近工作中使用了不少echarts的图表，同时也解决了一些echarts的绘制和极端情况的处理，在这里记录一下。
柱状图标签过长导致部分标签不显示
当柱状图中data中的数据，有些数据过长，就会导致部分标签无法展示，如下图：
data: ['衬衫', '羊毛衫羊毛衫羊毛衫羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
针对这种情况，网上的解决方案有四种
- 使用倾斜配置，将文本倾斜展示
axisLabel: {
interval: 0,
rotate: 20
}
- 让文字竖直排列
axisLabel: {
interval: 0,
formatter:function(value) {
return value.split("").join("\n");
}
}
- 编写自定义formatter，手动计算最大显示宽度以及省略号处理，具体代码直接百度
- 设置隔个展示
axisLabel : {
interval : 0,
formatter : function(params,index){
if (index % 2 != 0) {
return '\n\n' + params;
}
else {
return params;
}
}
}
以上的方案不是最佳的方式，最好的方法是echarts内置就支持当文本过程，可以自定义配置省略展示，折行显示等。
- overflow：溢出处理，配合width使用，支持：'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为'none', 'break' 单词换行 'breakAll' 超过宽度就换行
最终处理方案如下（需查看当前的echarts版本是否支持，以下在ecahrts5能生效）：
axisLabel: {
width: 100, //设置标签宽度
overflow: 'break', //超出宽度时折行显示
interval: 0 //强制显示所有标签
}
柱状图数据相差过大导致部分数据展示不全
在实际上的应用场景中，如柱状图是展示不同网卡的网络流量，有可能部分网卡的网络流量相对于其他网卡流量大一个数量级，此时，柱状图的展示就有明显的不协调，如下图：
而解决此问题有两种方案：
- 设置yAxis的坐标系为对数系，使其能够展示差别大的数据，如下：
yAxis: {
type: 'log'
}
但是使用对数坐标系会有以下几个问题：
- 如果数据中没有包含0的数据，纵坐标不从0开始展示
- 当数据中有0或者1时，数据展示存在问题，部分数据无法展示
- 数据中含有负数，也会有展示问题
而解决方法则是手动修改值为0或值为1的数据，并且将1的数据改为0.在对应tooltip中进行数据的转换，总体比较复杂，具体可以参考echarts对数处理文章。
但是上面的数据是类别数据，因此不太适用使用对数方式来展示数据。可以针对不同的图表来设置最小展示，如柱状图，可以设置最小的柱高度，保证可以点击，如下：
series: [
{
name: '销量',
type: 'bar',
barMinHeight: 20,
data: [33, 10000, 36, 10, 10, 20]
}
]
多图表下的resize性能优化
在首页的场景中，如果是数据展示型的业务，会有很多的图表一起展示。而现阶段的图表的resize方法，基本是在window绑定resize，然后一改变就resize图表，如果图表比较复杂或者比较多的话，会有性能问题的，因为不是每次resize都会改变图表外层容器的宽高，因此需要一个可以精细化监听具体容器的resize，而这个resize observer就是做这个的。
不兼容IE：
并且ResizeObserver不需要防抖处理，理由如下：
写一个监听器，然后如果外层容器的宽高变化是，去修改charts的配置，然后再进行resize。如下：
var mainEle = document.getElementById('main');
var ro = new ResizeObserver(entries => {
for (let entry of entries) {
const cr = entry.contentRect;
// 当图表外部容器的size变化是调用resize方法
// ResizeObserver已经默认增加防抖处理
myChart.resize();
}
});
// 观察一个或多个元素
ro.observe(mainEle);
饼状图的合计以及自定义legend实现
继续补充中...
