ECharts - 追加数据后的动画答案

【问题标题】：ECharts - animation after append dataECharts - 追加数据后的动画
【发布时间】：2020-09-22 08:24:08
【问题描述】：

我有线时间序列图表（在 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

【问题讨论】：

标签： javascript vue.js echarts

【解决方案1】：

我能够直接从 ECharts 开发人员那里找到答案。因此，如果有人遇到类似问题，解决方法如下：

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

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

我附上了上一篇文章中修改后的 jsfiddle https://jsfiddle.net/Clyde256/b2d4juzt/44/，其中的转变已经有效。

【讨论】：

【解决方案2】：

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

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

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

然后，当添加新值并删除旧值时，图表会以正确的“左移”动画呈现。

【讨论】：