这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战
这个是效果，简陋了一些，没有数据了：
主要是实现右边图例进行分页的，因为这个堆叠图图例太多，横着展示不美观，所以要改成分页，方便查看，悬停的时候也会有各个图例的值，在网上搜了很多，但是效果都不是特别好，而且还要改源码好几个地方，会影响其他的堆叠折线图啥的，所以分享一下自己探索出来的功能，好像也是echarts自带的，不过当时搜了很久才发现，文档上也没有特别体现出来。
1、首先定义div，定义了min-width是因为有时候切换页面或者什么的时候echarts图表会缩小，不知道你们有没有用到过，我这里就是用的就是jquery和layui样式。
<div id="ddtEchart" style="width: 100%;min-width: 1200px;height: 700px;"></div>
2、开始调接口获取数据，我这里直接定义res的值模拟了，可以根据自己接口返回的值进行数据组装，x轴数组，图例数组等
//查询堆叠图信息
function searchddtInfo() {
var myChart = echarts.init(document.getElementById("ddtEchart"));
let legendArr = [];
let xArr = ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"];;
let seriesData = [];
let res = {
"堆叠图1":[{"name":"aa",val:"1"}],
"堆叠图2":[{"name":"bb",val:"2"}],
"堆叠图3":[{"name":"cc",val:"3"}],
"堆叠图4":[{"name":"dd",val:"4"}],
"堆叠图5":[{"name":"ee",val:"5"}],
"堆叠图6":[{"name":"ff",val:"6"}]
}
for(let key in res) {
legendArr.push(key);
let seriesArr = {
name: key,
data: [],
type: 'line',
symbol:'circle',
symbolSize:8,
showSymbol: false,
areaStyle: {},
emphasis: {
focus: 'series'
}
};
if(res[key].length > 0) {
for(let i = 0;i<res[key].length;i++) {
seriesArr.data.push(res[key][i].val);
}
}
seriesData.push(seriesArr);
}
let myChartOptions = {
//定义颜色，echarts也会给你自动分配颜色，这里写了颜色为了好看
color: ["#b88fca","#ea0472","#fda986","#9a003c","#2743c5","#f0a3db","#75be9c","#9dd3e8","#879bd7","#c52727","#c55127","#c57627","#c5a927","#aec527","#75be9c","#48c527","#27c54f","#27c589","#27c5c3","#279bc5","#2776c5","#fbd88a","#3e27c5","#6a27c5","#9d27c5","#c527ac","#c5276a","#c52746","#ffe700","#22b3f1","#c30c0c","#209607","#03839c","#063ece","#4611d4"],
title: {
text: '堆叠图',
left:'center'
},
tooltip: {//悬停样式
trigger: 'axis',
axisPointer: {
type: "cross",
label: {
formatter: function (params) {
if (params.seriesData.length === 0) {
window.mouseCurValue = params.value;
}
}
}
},
formatter: function (params) {
let res = "", sum = 0;
for (let i = 0; i < params.length; i++) {
let series = params[i];
sum += Number(series.data);
if (sum >= window.mouseCurValue) {
res = series.axisValue + "<br/>" + series.marker + series.seriesName + ":" + series.data + "<br/>";
break;
}
}
return res;
},
},
legend: {
textStyle: {
width:'250',
overflow: 'break'
},
right:0,
top: 5, //距离顶部距离
orient: 'vertical', //水平还是垂直的意思
data: legendArr,
type: 'scroll', //分页类型
height: 665,
pageIconColor: '#1eb2f1', //翻页箭头颜色
pageTextStyle:{
color: '#222', //翻页数字颜色
}, //翻页数字设置
pageIconSize: 18
},
dataZoom: [
{
id: 'dataZoomX',
type: 'inside',
xAxisIndex: 0,
}
],
grid: {
left: '3%',
right: '20%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xArr
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}'
}
}
],
series: seriesData
};
myChart.setOption(myChartOptions, true);
}
3、主要在legend这里，设置垂直分页，水平分页好像也可以，就是左右切换的，用的是最新的echarts.js，只能设置切换分页的按钮大小和翻转数字的颜色。
图例的颜色可以不用定义，echarts会自动渲染不同的颜色，我这里有需求要求所以写死了，但是如果数据量过多，这点颜色都不够用的！
然后主要就是悬停的时候只展示当前的折线图的这个时刻，不要展示其他所有的图例的当前时刻，所以在tooltip对象里写了formatter，通过params拿到当前悬停的图例信息，并且存到windows对象中，因为存到其他地方后面还要重新定义一直修改会报错，然后循环通过判断所有图例信息是否和window.mouseCurValue一样，就停止循环，这里可以看tooltip里写的代码
主要就是这些，是之前写的，当时花了好几天改这个bug，现在复盘一下，还是感觉挺简单的，不知道当时为什么想不出这么好的办法，哈哈。
