ECharts

Question

我有线时间序列图表（在 ECharts 中）。我需要保持恒定数量的点，这些点随着新数据从左向右移动。但是，当我使用 setOption 添加数据时，没有偏移，但每个点只是改变了它在 y 方向上的位置。有人可以告诉我我做错了什么吗？ example 正是我所需要的。我想我也一样，但它的行为仍然不同。

谢谢

<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/echarts@4.9.0/dist/echarts.js"></script>
<div id="app" style="width: 700px; height: 400px;">
<div ref="echart" style="width: 100%; height: 100%;" ></div> 
<button type="button" @click="onClick"> Push data < /button></div>


new Vue({
    el: '#app',
    mounted() {
        this.chart_data=[
            ['2020-09-01 15:14:13.0', 1],
            ['2020-09-01 15:14:14.0', 1.5],
            ['2020-09-01 15:14:15.0', 0.7],
            ['2020-09-01 15:14:16.0', 0.8],
            ['2020-09-01 15:14:17.0', 1.7]
        ]
        this.chart=echarts.init(this.$refs.echart)

        var option={
            color: '#3283bb',
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            series: [{
                showSymbol: false,
                type: 'line',
                areaStyle: {
                    opacity: 0.2
                },
                lineStyle: {
                    width: 1.5
                },
                data: this.chart_data,
                hoverAnimation: false
            }]
        }

        this.chart.setOption(option)
    },
    methods: {
        onClick: function() {
            this.chart_data.shift()
            this.chart_data.shift()

            this.chart_data.push(['2020-09-01 15:14:18.0', 2.5])
            this.chart_data.push(['2020-09-01 15:14:19.0', 2.0])

            this.chart.setOption({
                series: [{
                    data: this.chart_data
                }]
            })
        }
    },
})

JSFiddle example

Answer 1

我直接从ECharts开发者那里找到了答案。所以，如果有人遇到类似问题，解决方法如下：

ECharts 在新添加的数据中识别出部分旧数据时，执行动画“shift”。目前，这可以通过为每个值添加一个唯一的名称来完成。每个值都是一个具有名称和值的对象属性.

{name: '2020-09-01 15:14:18.0', value: ['2020-09-01 15:14:18.0', 2.5]}

我附上了之前 post 的修改后的 jsfiddle https://jsfiddle.net/Clyde256/b2d4juzt/44/，其中转换已经生效。

Answer 2

我想补充一点，如果您使用数据集功能，则需要命名您的维度，然后在系列属性中使用编码块并将 itemId 设置为任何维度名称具有如下独特的值：

dataset: {
      dimensions: ['value', 'ts'],
      source: [],
    },

series: [
          {
            name: 'some line',
            type: 'line',
            encode: {
              x: 'ts',
              y: 'value',
              itemId: 'ts',
            },
          },
        ],

然后在添加新值和删除旧值时，图表会呈现正确的 'shift left' 动画。

ECharts - 添加数据后的动画

ECharts - animation after append data

javascript

vue.js