Vue项目中引入Echarts

Vue项目中引入Echarts

2018年06月22日 16:44:28 酷酷小七 阅读数：2339

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

1. 安装Echats

npm install echarts --save

2.项目main.js中引入Echarts

1. // 引入Echarts

2. import Echarts from 'echarts'

3. Vue.prototype.echarts = Echarts

4. 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: '搜索引擎'

}

]

}]

});

},

 

显示效果