Vue项目中引入Echarts

在Vue项目中使用Echats，可以极大程度的方便完成很多Canvas功能。

1 . 安装Echats

npm install echarts --save

2.项目main.js中引入Echarts

// 引入Echarts
import Echarts from 'echarts'
Vue.prototype.echarts = Echarts
Vue.use(Echarts)

3.项目中使用，挂载到一个div标签上

html

<div id="echarts" :style="{width: '300px', height: '300px'}"></div>

js

mounted() {
      var dom = document.getElementById('echarts')
      var myChart = this.echarts.init(dom)
      // 绘制图表
      myChart.setOption({
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          data: [{
              value: 235,
              name: '视频广告'
            },
            {
              value: 274,
              name: '联盟广告'
            },
            {
              value: 310,
              name: '邮件营销'
            },
            {
              value: 335,
              name: '直接访问'
            },
            {
              value: 400,
              name: '搜索引擎'
            }
          ]
        }]
      });
    }
--------------------- 
作者：酷酷小七 
来源：优快云 
原文：https://blog.youkuaiyun.com/weixin_37861326/article/details/80775326 
版权声明：本文为博主原创文章，转载请附上博文链接！