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
属性控制在折线最后展示数值。