echarts中拼接虚线后和magicType事件切换冲突,导致数据展示错误
series: [{
data: [820, 932, 901, 934, 1290, 1330, '-'],
type: 'line'
},
{
data: ['-', '-', '-', '-', '-', 1330, 1320],
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted'
}
}
},
type: 'line'
}]
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox:{
feature: {
magicType: {
type: ['line', 'bar', 'stack', 'tiled']
},
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {
name: 'eventAnalysis'
},
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, '-'],
type: 'line',
},
{
data: ['-', '-', '-', '-', '-', 1330, 1320],
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted'
}
}
},
type: 'line'
},
{
data: [122, 678, 20, 934, 678, 23, '-'],
type: 'line'
},
{
data: ['-', '-', '-', '-', '-', 23, 87],
smooth: false,
itemStyle: {
normal: {
lineStyle: {
width: 2,
type: 'dotted'
}
}
},
type: 'line'
}
]
};
myChart.on('magictypechanged', function (params) {
let o = { ...params };
if(params.currentType !== 'line') {
for(let i = 0; i<o.newOption.series.length; i++) {
if(i%2 ==0 || i==0) {
const len = o.newOption.series[i].data.length;
o.newOption.series[i].data[len-2] = '-'
}
}
} else {
o = option;
}
myChart.setOption(o);
});