vue+Echarts绘制动态折线图

2022年6月12日09:39:52

1 引入Echarts

1.1 安装

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

npm install echarts --save

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

1.2 引入

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

import*as echartsfrom"echarts";

1.3 基本使用

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

2 动态折线图

2.1 基本折线图

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

2.2 动态折线图

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

vue+Echarts绘制动态折线图

实现以上效果最重要的就是利用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属性控制在折线最后展示数值。

  • 作者:Saga Two
  • 原文链接:https://blog.csdn.net/m0_46309087/article/details/122909134
    更新时间:2022年6月12日09:39:52 ,共 665 字。