echarts动态生成不同条数的折线图
功能需求背景：
1、后台可自定义折线图的折线名称、数据、数量（几条）
2、满足不同折线图之间随意切换
3、折线图可鼠标拖动缩放和滚动条收缩查看
4、同一页面涉及多个echarts
一、功能涉及echarts相关文档知识点
1.异步数据的加载
2.区域缩放组件的使用
3.数据更新处理
二、效果图
三、代码
1、初始化调用
// 后端返回数据处理后直接调用封装过的函数
echarts_1(database1);
echarts_2(database2);
2、echarts 初始化
// 定义线条颜色
const colors = ['#91cc75','#5470c6','#ee6666','#7a22ef','#3bbcd9']
// 折线图1
function echarts_1(data) {
let [data1,data2,data3] = [data[0],data[1],data[3]]; // 定义三组折线数据
var dom = document.getElementById("echart1");
var myChart1 = echarts.init(dom);
var option = {
dataZoom:[ // 缩放和进度组件
{
type:'slider',
show:true,
xAxisIndex:[0],
start:0,
end:100,
filterMode: 'filter'
},
{
type: 'inside',
start: 0,
end: 100
},
],
tooltip: {
trigger: 'axis',
},
grid: {
left: '5%',
right: '5%',
bottom: '15%',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: []
};
if (option && typeof option === 'object') {
myChart1.setOption(option,true);
}
showChart(data1,myChart1,option); // 初始渲染
// 折线图切换渲染
$('.database1 .tags li').on('click',function(){
let index = $(this).index()+1;
$(this).addClass('check').siblings().removeClass('check');
let targetdata = eval('data'+index);
showChart(targetdata,myChart1,option);
})
}
2.根据后端数据封装series
/*
* 设置折线样式及名称
* set_series
* @param {Object} data 折线数据
* @return {arr} 返回配置项
*/
function set_series(data) {
var series = [];
var series_data = data.series;
series_data.forEach((e,index) => {
var item = {
name:e.name,
data:e.data,
type: 'line',
itemStyle : {
normal : {
color:colors[index], //圈圈的颜色
lineStyle:{
color:colors[index] //线的颜色
}
}
},
}
series.push(item);
})
return series
}
3.数据渲染
/*
* 折线数据渲染
* @showChart()
* @param {Object} data 折线数据
* @param {Object} myChart echars实例对象
* @param {Object} option echarts 配置项
*/
function showChart(data,myChart,option) {
let new_legend = []; // 获取折线类别数量
if(data) {
let new_series = set_series(data)
data.series.forEach(e => {
new_legend.push(e.name);
})
myChart.setOption(option,true) // 清除上次数据
myChart.setOption({
xAxis: {
data: data.categories
},
legend: {
data: new_legend
},
series: new_series
}
);
}
}
四、数据渲染问题和遇到的坑
折线图切换时，默认会存在option 合并问题见文档，即便按照文档 myChart.setOption(option,true);设置后仍存在历史数据遗留问题，例如图表1是3条折线，图表2是2条折线，图1切换到图2会出现3条折线，多出的一条则是图1的第三条线数据。
目前解决办法
在下一次更新数据前执行一次空的数据更新
myChart.setOption(option,true)
执行后再有数据的option更新myChart.setOption(option)
开发记录，仅做参考。若有更为正确的方法还请指教