怎么使用Vue+Echarts实现绘制动态折线图

1 引入Echarts

1.1 安装

使用如下命令通过 npm 安装 ECharts

npm install echarts --save

注：本文安装Echarts版本为：“echarts”: “5.2.1”

1.2 引入

安装完成以后，可以将echarts全部引入，这样一来，我们可以在该页面使用echarts所有组件；引入代码如下：

import * as echarts from "echarts";

1.3 基本使用

vue+Echarts基本使用请见：在Vue项目中引入 ECharts

2 动态折线图

2.1 基本折线图

折线图得基本引入使用见:vue引入Echarts画折线图

2.2 动态折线图

动态折线图分两种，一种为动渲染静态数据，产生动态变化得动画效果的折线图，另一种为动态渲染动态数据产生折线图；一下给出我国人口总数20年变化示例。如图所示：

实现以上效果最重要的就是利用Echarts中的动画属性animation；并使用animationDuration控制动画时间；配置项代码如下：

const optionFree = {
        xAxis: {
          data: this.xData
        },
        yAxis: {
          name: "人口(万）",
          min: "120000",
          max: "150000"
        },
        animation: true,
        animationDuration: 20000,
        series: [
          {
            data: this.populationData,
            type: "line",
            smooth: true,
            endLabel: {
              show: true
            }
          }
        ]
      };

以上动图效果中还是用了endLabel属性控制在折线最后展示数值。

补充

除了上文的实现方法，小编还为大家整理了更多动态折线图的实现方法，希望对大家有所帮助

实现代码

要注意的有三点：

• mounted中init并setOption初始化echarts

• echartsOption里的data绑定数组

• setInterval中要更新数组并重新将数组赋值给echarts选项