Vue+Echarts实现绘制动态折线图

目录

• 1 引入Echarts
• 1.1 安装
• 1.2 引入
• 1.3 基本使用
• 2 动态折线图
• 2.1 基本折线图
• 2.2 动态折线图
• 补充

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选项

到此这篇关于Vue+Echarts实现绘制动态折线图的文章就介绍到这了,更多相关Vue Echarts绘制动态折线图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！