Vue2：使用echarts创建图表的步骤及注意事项

1、引入echarts库

import * as echarts from 'echarts'

2、创建一个容器，用于容纳图表

在HTML文件中创建一个DOM元素，用于容纳图表。

<!--方式1：指定ID -->
<div id="chartContainer" style="width: 600px; height: 400px;"></div>

<!--方式2：指定ref -->
<div ref="chartContainer" style="width: 600px; height: 400px;"></div>

注意事项

一定要指定宽度和高度，否则div太小，绘制之后看不到。 

如果有多个echart，也可以使用class指定style，便于维护。

.chart-style{
  height: 400px;
  width: 600px;
}

3、配置图表参数

在data中指定图表参数，这里要注意，不同类型的图形，它们所需要的基础参数是不同的。详见官网