echart 数据量大symbol异常 ?

新手上路,请多包涵

echart 数据量较多时,缩放几次,就会出现 symbol 异常,会重复渲染,请教下,这种怎么解决?感谢

异常展示:
image.png

正常展示:
image.png

代码:

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'
        }
    ]
};
阅读 2.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题