vue使用echarts代码展示和效果

这两天在写vue项目创建一个图表，本人用echarts来创建，因为很强大的一个插件，要实现的效果图如下：

刚开始对插件的下载，引入不熟悉，从头到尾操作了一遍，先从下载echarts插件说起吧
1.在当前文件夹终端输入代码 cnpm install echarts -S
检查是否下载成功，package.json 文件里会添加echarts的版本号；
同时在main.js文件添加代码：
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts
这里代表全局引入
之后就可以写你需要实现需求的代码了
在网上找个小例子先试一下，打开网页是否报错，如果出现init或者关于依赖的报错，极大可能不是依赖的问题，而是echarts版本号的问题，你可能下载的是5.0的版本，需手动删除重新下载低版本的echarts
删除代码如下：
npm uninstall echarts // 卸载
重新下载：
npm install echarts@4.9.0 //重装
npm fund
npm run dev
讲到这里也只是下载和引入echarts的实现，此时你可以看到你写的代码效果图已经实现，要想达到你想要的效果，还得继续调整。
在echarts官网里有很多实例可以引入，刚开始不知道怎么引入，先讲讲怎么引入吧
如图：

要想实现这样的一个实例，官网已经给出了代码，我们直接粘贴好了
在你当前展示代码的的vue页面的template创建一个div

  <div class="body">
      <div id="echarts"></div>
    </div>

在script的data->return里面直接引入代码；

<script>
 export default {
    name: "",
    data () {
      return {
      	option:{
           //官网代码  // option后面的= 改为：