实现方式：
通过两条或多条不同样式折线的数据重叠：
var series= [
{
name: '2017年',
type: 'line',
symbolSize: 0,
data: [30, 80, 50, '-', '-', '-', '-', '-', '-', '-', '-', '-'],//重叠的数据，不需要展示此折线样式的用‘-’代替
//不同的样式：
lineStyle: {
normal: {
type: 'solid',
color: '#b9c3cf'
}
},
},
{
name: '2018年',
type: 'line',
symbolSize: 6,
data: ['-', '-', 50, 60, 70, 30, 55, 50, 40, 39, 38, 39,],//重叠的数据，不需要展示此折线样式的用‘-’代替
//不同的样式：
itemStyle: {
normal: {
color: '#0089df'
}
},
lineStyle: {
normal: {
color: '#0089df',
}
},
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}%'
}
},
}
]
数据处理：
设置一个判断条件，获取数据时根据条件相应地给series[0]或series[1]赋值:例如年份
// 数据跨年份的series
var series1 = [
{
name: '2017年',
type: 'line',
label: seriesLabel,
data: [],
lineStyle: {
normal: {
type: 'solid',
color: '#b9c3cf',
}
}
},
{
name: '2018年',
type: 'line',
lineStyle: {
normal: {
color: '#0089df',
type: 'dotted',
}
},
label: seriesLabel,
data: [],
},
];
// 数据不跨年的series
var series2 = [
{
name: '2018年',
type: 'line',
lineStyle: {
normal: {
color: '#0089df',
type: 'dotted',
}
},
label: seriesLabel,
data: [],
},
];
var currentYear = currentTime.slice(0, 4);//当期年
if (data.result1 && data.result1.length != 0) {
var result1 = data.result1;
var myChart1 = echarts.dispose(document.getElementById('chart1'));//消除图表
var myChart1 = echarts.init(document.getElementById('chart1'));//初始化图表
var firstDataYear = result1[0].column2; // 第一个数据的年份
var a = 0;//判断Flag
if (firstDataYear != currentYear) {//跨年份的数据处理：
option1.series = series1;//给series赋值
option1.series[0].data = [];//series[0].data清零
option1.series[1].data = [];//series[1].data清零
var fillRateList1 = [];//series[0].data数据
var fillRateList2 = [];//series[1].data数据
var fillRateList=[];//所有数据
for (var i = 0; i < result1.length; i++) {
var comparison = result1[i].column2; //年份判断
var fillRate = (Math.round(result1[i].column4 * 10) / 10).toFixed(1) * 1; // 满足率
fillRateList.push(fillRate);
if (comparison != firstDataYear) {
a = a + 1;//判断Flag
if (a == 1) {
fillRateList1.push(fillRate);
fillRateList2.push(fillRate);
} else {
fillRateList1.push('-');
fillRateList2.push(fillRate);
}
} else {
fillRateList1.push(fillRate);
fillRateList2.push('-');
};
};
option1.series[0].data = fillRateList1;//第1个年份的数据
option1.series[1].data = fillRateList2;//第2个年份的数据
var Max1 = getmax(fillRateList);//所有数据的最大值
Max1=(Math.ceil(Max3/10))*10;//最大值向上取整十
var Min1 = getmin(fillRateList);//所有数据的最小值
Min1=(Math.floor(Min3/10))*10;//最小值向下取整十
option1.yAxis.max = Max1;//y轴刻度的最大值==Max1
option1.yAxis.min = Min1;//y轴刻度的最小值==Min1
myChart1.setOption(option1);
} else {//不跨年份的数据处理
option1.series = series2;//给series赋值
option1.series[0].data = [];//series[0].data清零
option1.series[1].data = [];//series[1].data清零
var fillRateList = [];//series[0].data数据
for (var i = 0; i < result1.length; i++) {
var fillRate = (Math.round(result1[i].column4 * 10) / 10).toFixed(1) * 1; // 满足率
fillRateList.push(fillRate);
};
option1.series[0].data = fillRateList;
var Max1 = getmax(fillRateList);//所有数据的最大值
Max1=(Math.ceil(Max3/10))*10;//最大值向上取整十
var Min1 = getmin(fillRateList);//所有数据的最小值
Min1=(Math.floor(Min3/10))*10;//最小值向下取整十
option1.yAxis.max = Max1;//y轴刻度的最大值==Max1
option1.yAxis.min = Min1;//y轴刻度的最小值==Min1
myChart1.setOption(option1);
};
};
