Vue Echarts

importecharts from'echarts'

exportdefault{

name:'',

data () {

return{

charts:'',

opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],

opinionData:[

{value:335, name:'直接访问'},

{value:310, name:'邮件营销'},

{value:234, name:'联盟广告'},

{value:135, name:'视频广告'},

{value:1548, name:'搜索引擎'}

]

}

},

methods:{

drawPie(id){

this.charts = echarts.init(document.getElementById(id))

this.charts.setOption({

tooltip: {

trigger:'item',

formatter:'{a}
{b}:{c} ({d}%)'

},

legend: {

orient:'vertical',

x:'left',

data:this.opinion

},

series: [

{

name:'访问来源',

type:'pie',

radius:['50%','70%'],

avoidLabelOverlap:false,

label: {

normal: {

show:false,

position:'center'

},

emphasis: {

show:true,

textStyle: {

fontSize:'30',

fontWeight:'blod'

}

}

},

labelLine: {

normal: {

show:false

}

},

data:this.opinionData

}

]

})

}

},

//调用

mounted(){

this.$nextTick(function() {

this.drawPie('main')

})

}

}

* {

margin: 0;

padding: 0;

list-style: none;

}

1.安装 echarts 安装包

npminstallecharts--save

2.引入依赖

import echartsfrom'echarts'

3.准备echarts容器

4.数据和 charts 变量可以描述在 data 中

5.methods 中 定义一个方法，内容就是平时echarts的步骤。

6.mounted 中调用 （mounted 是 vue 的生命周期，表示挂载完毕，html 已经渲染）