vue饼图组件_vue2.0 自定义 饼状图 （Echarts）组件
1.自定義 ?圖表 ?組件
Echarts.vue
export default {
props: {
// 樣式
echartStyle: {
type: Object,
default(){
return {}
}
},
// 標題文本
titleText: {
type: String,
default: ''
},
// 提示框鍵名
tooltipFormatter: {
type: String,
default: ''
},
// 扇形區域名稱
opinion: {
type: Array,
default(){
return []
}
},
// 提示框標題
seriesName: {
type: String,
default: ''
},
// 扇形區域數據
opinionData: {
type: Array,
default(){
return []
}
},
},
data(){
return {
//
}
},
mounted(){
this.$nextTick(function() {
this.drawPie('myChart')
})
},
methods: {
// 監聽扇形圖點擊
eConsole(param) {
// 向父組件傳值
this.$emit("currentEchartData",param.name);
},
// 繪制餅狀圖
drawPie(id){
this.charts = this.$echarts.init(document.getElementById(id));
this.charts.on("click", this.eConsole);
this.charts.setOption({
title: {
text: this.titleText, // 標題文本
left: 'center'
},
tooltip : {
trigger: 'item',
formatter: "{a}
" + this.tooltipFormatter + ":{c}"
},
legend: {
bottom: 20,
left: 'center',
data: this.opinion // 扇形區域名稱
},
series : [
{
name:this.seriesName, // 提示框標題
type: 'pie',
radius : '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data:this.opinionData, // 扇形區域數據
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
}
}
}
#myChart{
width: 100%;
}
2.頁面調用
Diagram.vue
返回
:echartStyle="s"
:titleText="a"
:tooltipFormatter="b"
:opinion="c"
:seriesName="d"
:opinionData="e"
v-on:currentEchartData="getEchartData"
>
import mEcharts from '../components/Echarts'
export default {
name: 'Diagram',
components: {
mEcharts
},
data(){
return {
a:'水果銷售統計',
b:'銷售數量',
c:['香蕉','蘋果','橘子'],
d:'銷售統計',
e:[
{value:3, name:'香蕉'},
{value:3, name:'蘋果'},
{value:3, name:'橘子'}
],
s: {
height: ''
}
}
},
created(){
// 獲取屏幕高度
this.s.height = document.documentElement.clientHeight - 44 + 'px';
},
methods: {
getEchartData(val){
console.log(val);
}
}
}
//
3.效果圖
總結
以上是生活随笔為你收集整理的vue饼图组件_vue2.0 自定义 饼状图 （Echarts）组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux搭建vsftp服务器_Linu
- 下一篇： Vue.directive自定义指令