【问题标题】:How to limit number of points shown on scatter series?如何限制散点系列上显示的点数?
【发布时间】:2020-11-06 20:36:46
【问题描述】:

我在散点图上绘制了一大组数据点(大约 2000 个点),但其中许多数据点集中在图表的一个小区域,这会损害图表的性能,开始变慢并冻结.有没有办法限制一次渲染的数据点数量?

我正在使用 Jupyter 和 javascript 使用 echart 进行绘图。

这是我的代码:

myChart.setOption({
            animation: false,
            backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                offset: 0,
                color: '#f7f8fa'
            }, {
                offset: 1,
                color: '#cdd0d5'
            }]),
            title: {
                text: 'Receita e Patrimonio de Clientes',
                left: 'center'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                name: 'ROA',
                nameLocation: 'center',
                nameTextStyle: {
                  lineHeight: 25
                },
                scale: true,
                axisLabel: {
                    formatter: '{value}%'
                },
                //min: 0,
                //max: 1.2
                
            },
            yAxis: {
                type: 'value',
                name:'Patrimonio',
                nameLocation: 'center',
                scale: true,
                nameTextStyle: {
                  lineHeight: 130
                },
                axisLabel: {
                    formatter: 'R${value}'
                },
                //min:0,
                //max:600000
            },
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,
                    end: 35
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: [0],
                    left: '93%',
                    start: 0,
                    end: 35000000
                },
                /*{
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 1,
                    end: 35
                },
                {
                    type: 'inside',
                    yAxisIndex: [0],
                    start: 29,
                    end: 36
                }*/
            ],
            series: [{
                data: data_points,
                type: 'scatter',
                symbolSize: 20,
                emphasis: {
                    label: {
                        show: true,
                        formatter: function (param) {
                            return param.data[2];
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(120, 36, 50, 0.5)',
                    shadowOffsetY: 5,
                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                        offset: 0,
                        color: 'rgb(251, 118, 123)'
                    }, {
                        offset: 1,
                        color: 'rgb(204, 46, 72)'
                    }])
                },
                markLine: {
                    lineStyle: {
                        type: 'solid'
                    },
                    data: [
                        {yAxis: 300000},
                        { xAxis: 0.6 }
                    ]
                },
                large: true,
                largeThreshold: 100
            }] // We just need to create this
        })

【问题讨论】:

    标签: javascript performance jupyter-notebook jupyter echarts


    【解决方案1】:

    您很可能需要采样之类的东西。我在 Echarts 上没有看到这个,但我通过数据截断解决了这个问题:你只需从你的数组中插入第二个、第三个或第四个数据点。它基于精确的划分和数据索引。

    请看一下这个解决方案:Have series label displaying only once per series in eCharts

    【讨论】:

      猜你喜欢
      • 2021-02-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-04
      • 1970-01-01
      • 1970-01-01
      • 2018-09-04
      相关资源
      最近更新 更多