父組件：
<chartPie :pieChartData="charData"></chartPie>
參數(shù)：
vue.cardData_1= {
? class: 'number_of_calls',
? name: '撥打數(shù)量',
? data: [
? ? {key: '撥打數(shù)量', value: 30},
? ? {key: '正在進(jìn)行', 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}
砾省: {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|域蜗：}{c}? {per|oh0zwkq%}',
// formatter: '{c}? {per|gycosoj%}',
? ? ? ? ? ? ? ? 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>
