前提：存在多个饼图，为了避免代码冗余，开发一个饼图组件
因为项目中描述是另外写的，所以组件里面title等描述类型的都注释屏蔽掉了，主要还是要看自身项目需求，我这个的组件就只是一个单纯的饼图，没有title那些，如果有其他需要可以自己添加属性进行调整
vue项目需要安装echarts, npm install echarts --save
子组件 pieChart.vue
<template>
<div class="">
<div style="width: 120px; height: 120px;margin: 0 auto;" :id="id" class="echarts" ref="echarts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'echartscom',
// id --> 为了多图渲染
// title --> 标题
// chartData --> value数组
// nameData --> name数组
props: ['id', 'title', 'chartData', 'nameData','chartColor'],
data() {
return {
arr: []
};
},
methods: {
drawCharts() {
let chartColor = this.chartColor
var myChart = echarts.init(document.getElementById(this.id));
myChart.setOption({
series: [
{
name: '访问来源',
type: 'pie',
radius: '80%',
color: this.chartColor,
// center: ['50%', '60%'],
avoidLabelOverlap: false,
label: {
normal: {
// formatter: '{b}:{c}' + '\n\r' + '({d}%)',
formatter: function (param) {
console.log("text", param,chartColor)
let text = param.data.name;
if(!text.includes('其他')){
return param.percent + '%'
}else{
return ''
}
},
show: true,
// position: 'left'
position:'inside',
textStyle: {
// fontSize: 10,
fontSize: 12,
color: "#fff"
}
},
emphasis: {
show: true
}
},
labelLine: {
show: true, //数据标签引导线
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
normal: {
// 设置引导线
show: false
// length: 18
}
},
data: this.arr
}]
});
// window.addEventListener('resize', function () {
// myChart.resize();
// });
},
initData() {
this.nameData.forEach((val, i) => {
// 列数据
this.chartData.forEach((item, index) => {
if (i == index) {
this.arr.push({
value: item,
name: val
});
}
});
});
}
},
watch: {
chartData: {
// 在父组件数据发生改变后子组件要做到实时更新,就需要子组件用watch来监听数据的变化
// 看情况是否需要newValue和oldValue之间值比较
handler(newValue, oldValue) {
this.arr.length = 0;
this.initData();
this.drawCharts();
},
deep: true
}
},
computed: {
echarts() {
return 'echarts' + Math.random() * 100000;
}
},
mounted() {
this.drawCharts();
},
beforeMount() {},
beforeCreate() {},
created() {
this.initData();
},
components: {}
};
</script>
<style></style>
父组件引用子组件
<template>
<Row :gutter="10" type="flex" justify="center" align="middle">
<Col span="6">
<p style="font-size:14px;font-weight:bold;text-align:center;"> 当日结案率：20/50</p>
<pieChart id="today" :nameData="msg.rows" :chartData="msg.chartData" autoresize :chartColor="['#5976c4','#879ad7']" />
</Col>
<Col span="6">
<p style="font-size:14px;font-weight:bold;text-align:center;"> 投诉结案率：15/45</p>
<pieChart id="complaint" :nameData="msg.rows1" :chartData="msg.chartData1" autoresize :chartColor="['#ee6a6a','#f39393']" />
</Col>
</Row>
</template>
<script>
import pieChart from './pieChart'
export default {
components: {
pieChart
},
data(){
return{
msg: {
rows: ['投诉案件', '其他案件'],
chartData: [20, 30],
rows1: ['咨询案件', '其他案件'],
chartData1: [15, 30],
},
}
}
}
</script>
