mardi 22 septembre 2020

ECharts - animation after append data

I have line-time-series chart (in ECharts). I need to keep a constant number of points, which moves from left to right with new data. However, when I add data using setOption, there is no shift, but each point just changes its position in the y direction. Can someone please advise me what I'm doing wrong? This example does exactly what I need. I think I have it the same, but it still behaves differently.

Thank you

<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




Aucun commentaire:

Enregistrer un commentaire