echarts:在vue里使用

echarts在vue中的使用

前置提及：vue中节点的获取

<div id="box">boxdiv>
<div ref="ref">refdiv>

1. 通过原生获取
   let box = document.getElementById('box')

2. 通过refs获取（反射吧reflect）

   let ref = this.$refs.ref

两种都是返回dom

安装echarts，没安装的话安装一下

npm install echarts

使用的三个步骤：

1. 引入echarts

2. 定义外部容器,必须给宽高

3. 定义options配置对象，放入数据

4. 初始化echarts,加载配置

关于重新绘制：

如果需要修改数据或者配置，只需要再次调用setOption()方法，传入配置即可，不需要再次init()初始化

配置项说明

代码部分：

/*
	绘制一个柱状图，渲染数据。
	点击按钮是修改数据值
*/

引入echarts

// echarts 5 版本需要把全部的引入进来
import * as echarts from 'echarts'

完整案例