echart 数据量较多时,缩放几次,就会出现 symbol 异常,会重复渲染,请教下,这种怎么解决?感谢
异常展示:
正常展示:
代码:
const _optionCommon: EChartOption = {
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
axisTick: {
show: false // 是否显示坐标轴刻度
},
axisLabel: {
color: '#68778D'
},
axisLine: {
lineStyle: {
color: '#d6dae2'
}
}
},
yAxis: {
type: 'value',
min: undefined, // 坐标轴刻度最小值。
max: undefined, // 坐标轴刻度最大值。
splitNumber: undefined, // 坐标轴的分割段数,是一个预估值,实际显示会根据数据稍作调整。
interval: undefined, // 强制设置坐标轴分割间隔。
axisLabel: {
color: '#68778D',
formatter: function (value: number) {
return value.toFixed(0);
}
},
// 坐标轴轴线相关设置。
axisLine: {
show: false // 是否显示坐标轴轴线
}
},
series: [{
data: [],
type: 'line',
// 折线区
areaStyle: {
// 域渐变色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(255, 216, 165, 1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
// 线条样式
lineStyle: {
color: '#ff9d1b'
},
symbolSize: 8,
itemStyle: {
// 设置symbol的颜色
color: '#FF9100'
},
// label: {
// show: true,
// position: 'top'
// }
}],
tooltip: {
// trigger: 'axis'
show: true
},
dataZoom: [
// {
// type: 'inside',
// xAxisIndex: [0],
// filterMode: 'filter'
// },
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
}
]
};