@H_502_15@
export default {
props: {
// 样式
echartStyle: {
type: Object,default(){
return {}
}
},// 标题文本
titleText: {
type: String,default: ''
},// 提示框键名
tooltipFormatter: {
type: String,// 扇形区域名称
opinion: {
type: Array,default(){
return []
}
},// 提示框标题
seriesName: {
type: String,// 扇形区域数据
opinionData: {
type: Array,},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.5)'
}
}
}
]
})
}
}
}

@H_502_15@
import mEcharts from '../components/Echarts'

export default {
name: 'Diagram',components: {
mEcharts
},data(){
return {
a:'水果销售统计',b:'销售数量',c:['香蕉','苹果','橘子'],d:'销售统计',e:[
{value:3,name:'香蕉'},{value:3,name:'苹果'},name:'橘子'}
],s: {
height: ''
}
}
},created(){
// 获取屏幕高度
this.s.height = document.documentElement.clientHeight - 44 + 'px';
},methods: {
getEchartData(val){
console.log(val);
}
}
}