ECharts-追加数据后的动画

编程问答 2022-06-12

问题描述

我有折线图图表（以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',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

解决方法

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

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

{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/，

echartsechartsjavascriptvue.jswebweb