1，ECharts是非常强大的工具，多强大可以去它的官网体验下https://www.echartsjs.com/
2，在vue项目中使用ECharts。
创建好vue项目后，下载ECharts：
npm install echarts --save
install
下载成功后开始使用
2-1，在main.js中添加
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
vue引入'echarts时是通过在vue原型上添加一个新的属性，即Vue.prototype.$echarts = echarts 这样使用。
2-2，在组建中使用
<template>
<div>
<div id="vital" style="width: 600px;height: 400px;">
</div>
</div>
</template>
<script>
export default {
name:'newsVital',
data() {
return {
charts:'',
opnion:['类型1','类型2','类型3','类型4','类型5'],
opnionData:[{value:121,name:'类型1'},
{value:131,name:'类型2'},
{value:101,name:'类型3'},
{value:91,name:'类型4'},
{value:11,name:'类型5'}]
}
},
methods: {
drawPie(id){
this.charts=this.$echarts.init(document.getElementById(id));
this.charts.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:this.opnion
},
series: [
{
name:'占比',
type:'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:this.opnionData
}
]
})
}
},
mounted () {
this.$nextTick(function() {
this.drawPie('vital')
})
},
}
</script>
<style lang="stylus" scoped>
</style>
为什么要在mounted中初始化echrats?我们需要整个视图都渲染完毕之后开始初始化
至于为什么要这么写可以参考vue.js中的 this.$nextTick（）和mounted的介绍
然后在methods的 this.drawPie()中通过this.$echarts.init在id为'vital的dom里创建一个echart实例，记住不能在单个容器上初始化多个 ECharts 实例。
再通过 this.charts.setOption（）设置各个参数
上面的列子运行结果
7.31
这样就完成了在vue项目中使用ECharts。
当然ECharts提供了许多强大的图表类型可以使用，具体可以上https://www.echartsjs.com/examples/ 查看
网友评论