项目需求:
在折线图中,需要将数据自动以分割线分成4组,显示趋势。
解决方案:
- 在X轴的splitLine属性中设置 interval,解决分割线显示的问题;
- 前端ajax返回res.data后,将其长度平均分割成4份;
var modSl = parseInt(res.data.length / 4);
- 将分割后的数据 modSl传递到echarts中;
实现代码:
xAxis: { type: 'category', boundaryGap: false, inverse: true, axisLabel: { show: true, }, axisTick: { show: false, }, axisLine: { lineStyle: { color: 'rgba(0,0,0,.5)' } }, splitLine: { show: true, interval: modSl, lineStyle: { color: '#ccc', type: 'solid', } }, data: dataName },
Done!