echarts分享(三):双y轴图例点击+自动轮播进阶版
前言
上一篇文章分享了自动轮播的简单版实现，对于大多数图表来说已经可以满足功能需求，但是总有一小部分的图表需求比较突出，比如双y轴图表。
有句老话说：简单的问题总是不多，而困难的问题总是接踵而来。其实单以自动轮播的功能需求来说，简单版的实现在双y轴图标上也可以使用，但是当牵扯到另一个功能的时候，就很难满足要求了，这个功能就是图例点击。
当自动轮播和图例点击功能双双向你奔来的时候，脑壳真的是疼的要命。而且双y轴双数据(一条y轴对应一条数据)还是比较简单的，可怕的是双y轴多数据(一条y轴对应多条数据)。这一次，我们分享的内容就是—双y轴图例点击+自动轮播进阶版
功能分析
多y轴多数据的情况下，有几个难点需要克服：
- 轮播提示框内容动态渲染问题
- series中的数据有些不需要轮播，如饼图中因为效果实现而插入的空格数据
- 剩一个y轴的时候，y轴位置重置问题
- y轴对应多数据时，图例点击之后轮播数据提示问题
图例点击
echarts图表库的图例点击功能是有默认效果的，不过也是针对于普通单y轴图表足以使用，多y轴图表的话效果也有，但是有一些缺点：
- 仅隐藏对应y轴刻度值，不会隐藏y轴轴线
- 不会隐藏y轴单位文字
- 轮播难以实现
所以，要想达到我们的要求，默认效果是远远不能够的，需要我们对图例点击事件进行自定义处理，这就需要用到图例点击事件legendselectchanged。简单使用如下：
myChart.on("legendselectchanged", function (params) {
// xxx
})
自动轮播进阶
进阶版的实现其实和简单版的原理一样，只是对于数据的处理有修改和优化。针对于最开始我们提出的问题，在轮播时候要做特殊处理
- 对于饼图中有不需要轮播的数据，可以将轮播数据的seriesIndex永久设置为0(简单版已实现，但根据情况也要有微调)
- 对于多y轴情况，需要动态设定定时器循环所依赖的数据项
- 提示框内容针对要求，对数据进行循环拼接
功能实现
实现的原理就是图例点击时对图表的数据进行重置，重新生成图表。
图例点击
为了适应情况，需要对图表数据的生成封装成一个方法。
图例点击后隐藏了对应的y轴，所以我们在自定义事件里需要动态的填充y轴(yAxis)的数据，同时因为缺失对应的y轴，所以需要把被隐藏y轴对应的数据data置为空。
myChart.on("legendselectchanged", function (params) {
// 得到当前的图例显示隐藏状态分别有哪些
SelectedData = params.selected;
Init(SelectedData, DataInfo);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
})
params的内容是图例相关的对象，内容有当前图例名称和所有图例的选中状态以及事件类型
let SelectedData = {}, //图例选择的数据
LengData =[], // legend属性data
YaData=[], // yAxis
SeriesData=[], // series
DataInfo=[], // series属性的data
option={}; // option
function Init(sel, dataInfo) {
SelectedData = sel || {};
YaData = [], SeriesData = [];
for (let n = 0, l = LengData.length; n < l; n++) {
// 如果该图例状态为true时，则填入yAxis中
if (sel[LengData[n]]) {
YaData.push({
// xxx
})
} else {
// 将未填入的y轴对应的series-data置为空数组
Datas[n].data = [];
}
// 多y轴多数据时的对应关系，视情况而定，
Datas[n].yAxisIndex = YaData.length - 1 < 0 ? 0 : YaData.length - 1;
SeriesData.push(Datas[n]);
}
// 都隐藏时候的，保证图表正常显示
if (YaData.length == 0) {
YaData = [{ type: 'value' }];
}
// xxx
}
以上Init方法的实现限于篇幅原因，仅有重点内容，完整内容会在整理后重新把地址编辑上去。
自动轮播进阶
由于点击不同的图例，所对应的数据seriesIndex不一定为0，需要动态设置。那么从哪里获取这个依据呢？还记得图例点击事件中我们获取到的选中状态数组吗？从里面获取第一个为true的位置就可以满足我们的要求。
SelectedData = params.selected;
let serIndex = 0; // 动态获取的数据所在位置
Object.values(SelectedData).forEach((item,index)=>{
if(item){
serIndex = index;
}
})
对应的定时器中的修改
// 数据高亮
myChart.dispatchAction({
type: 'highlight',
seriesIndex: seriesIndex,
dataIndex: dataIndex,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: seriesIndex,
dataIndex: dataIndex,
});
提示框的动态渲染
formatter(params) {
let result = '';
if(params.length > 0){
// x轴数据名称，如xxx年
result +=`${params[0].axisValue}:`
// 数据数值
params.forEach(item=>{
result += `${item.value}`
})
}
return result;
},