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