Vue中echarts大屏使用方法

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

在我们开发中，时长需要制作主页大屏，ECharts就为提供了一个简便的制作方式，涵盖了树状图，扇形图，地图等等......

1.在调用前，首先要确保你的编辑器已经安装了echarts，如果没有，可以通过在终端输入下方代码进行安装：

npm install echarts --save

2.在书写时，首先需要在main.js中导入echarts，并且可以将其挂载到Vue的原型上，然后就可以通过this.$echarts去调用

import * as echarts from 'echarts';

Vue.prototype.$echarts=echarts

3.在调用时，我们可以将他写在方法中，在通过mounted渲染，可以避免变量名或者类名重复。 将数据绑定到盒子时，需要将盒子定义宽高，不然数据无法显示，不会自动撑开，

如果想要更改样式，可以通过去更改series的itemStyle中的值去实现，更多的样式更改可以去看官网的配置文档

获取盒子时，建议通过this.$refs去获取

代码效果：