父组件：
参数：
vue.cardData_1= {undefined
class: 'number_of_calls',
name: '拨打数量',
data: [
{key: '拨打数量', value: 30},
{key: '正在进行', value: 5}
]
};
子组件：
{undefined{pieChartData.name}}
import Echartfrom 'echarts'
import {mapState} from 'vuex'
export default {undefined
title: '用户分析-- 饼状图',
name: "pieChart",
computed: {undefined
...mapState({undefined
// chartData: state => state.vux.chartData
})
},
components: {},
props: {undefined
pieChartData: {undefined
type: Object,
default: () => ({undefined
// 唯一ID
id: 'defaultChart',
// Chart的title
name: '···加载中···',
// legend的Name
legendData: ['加载中···'],
// 外圈title
seriesOuterRingName: '加载中···',
// 外圈值
seriesOuterRingData:[{value: '0', name: '加载中···'}],
})
}
},
data() {undefined
return {}
},
created() {undefined
let vue = this;
},
mounted() {undefined
let vue = this;
vue.initChart();
// vue.$watch('chartData', () =>{undefined
// vue.initChart();
// })
},
methods: {undefined
// 初始化Chart
initChart() {undefined
let vue = this;
vue.chart= Echart.init(vue.$refs.pieEchart);
vue.chart.setOption({undefined
color: ['#0962F4','#FF4935','#2EDCFF','#409EFF'],
tooltip: {undefined
trigger: 'item',
formatter: "{a}{b}: {c}%"
},
legend: {undefined
orient: 'horizontal',
x: 'left',
// top: '60%',
// width: '80px',
data: vue.pieChartData.legendData
},
series: {undefined
name: vue.pieChartData.seriesOuterRingName,
type:'pie',
radius: ['40%', '60%'],
label: {undefined
normal: {undefined
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%}',
// formatter: '{c} {per|{d}%}',
formatter: '{per|{c}%}',
backgroundColor: '#eee',
borderColor: '#CCC',
borderWidth: 1,
borderRadius: 4,
padding: [5, 7],
rich: {undefined
per: {undefined
color: '#eee',
backgroundColor: '#334455',
padding: [2, 1],
borderRadius: 2
}
}
}
},
data: vue.pieChartData.seriesOuterRingData
}
})
}
}
}
.pieChart{undefined
width:100%;
height:180px;
padding-bottom:20px;
.chart{height:100%;}
.chartName{font-size:15px;font-weight:bold;padding:10px 5px;};
}
