目的：减少重复代码，便于维护

效果显示：

组件代码

<template><div class="ldw-data-content-box"><div class="ldw-chilren-box"><div class="title"><div>{{ title }}</div><div class="btn"><slot></slot></div></div><div v-if="row" class="ldw-row-class"><div class="canvas-box"><div :id="'canvas-box'+number" style="width: 100%;height:100%;"></div></div><div class="quan-quan-box" style="justify-content: space-evenly;"><div class="ldw-quan-quan" style="width:100%;" v-for="(item,index) in data" :key="index"><div class="ldw-quan-box" :style="{background:item.ldwColor.length?`linear-gradient(0deg,${item.ldwColor[0]},${item.ldwColor[1]})`:''}"></div><div class="ldw-text-text ldw-w" :style="'width:'+item.w+'px'">{{item.name}}</div><div>：</div><div>{{ item.value }}</div></div></div></div><div style="width:100%;flex:1;display: flex;flex-flow: column;" v-else><div style="width:100%;flex:1;"><div :id="'canvas-box'+number" style="width: 100%;height:100%;"></div></div><div :style="{'height':h+'px','marginTop':top+'px','margin':'0 auto'}" :class="column?'flex-column':'flex-center-sp flex flex-center-cz flex-col'"><div class="ldw-quan-quan" :class="column?'flex-center-sp':''" v-for="(item,index) in data" :key="index"><div class="ldw-quan-box" :style="{background:item.ldwColor.length?`linear-gradient(0deg,${item.ldwColor[0]},${item.ldwColor[1]})`:''}"></div><div v-if="column">{{item.name}}</div><div v-else class="ldw-text-text ldw-w" :style="'width:'+item.w+'px'">{{item.name}}</div><div>：</div><div>{{ item.value }}</div></div></div></div></div></div>
</template><script>
var echarts = require("echarts");
const total = function(data){return data.reduce((prev,cur)=>{return prev+cur.value},0)
}
export default {props:{title:"",data:{require:true,type:Array,default:()=>[]},w:{type:String,default:"auto"},column:{type:Boolean,default:true},row:{type:Boolean,default:false},listH:{type:Number,default:56},label:{type:Boolean,default:false}},data(){return{bg:["#0090FF","#31CFB8","#E55240"],number:null,top:0,h:56,myChart:null}},watch: {data: {//深度监听，可监听到对象、数组的变化handler(val, oldVal) {if (val != null) {this.setOption();}},deep: true, //true 深度监听},listH:{//深度监听，可监听到对象、数组的变化handler(val, oldVal) {this.h  = val},}},created(){this.h = this.listHthis.number = Math.random(1000)+1;},mounted(){this.initData()},methods:{initData(){let canvas = document.getElementById(`canvas-box${this.number}`)this.myChart = echarts.init(canvas);this.setClick()this.setOption()},setClick(){let that = thisthis.myChart.on("click", function(params) {that.$emit('eClick',params)});},setOption(){let option = {title: {text:'总计',//主标题文本subtext:""+total(this.data),//副标题文本left:'center',top:'40%',textStyle:{fontSize: 16,color:'#6c7a89',align:'center'},subtextStyle:{fontFamily : "微软雅黑",fontSize: 26,color:'#060606',fontWeight:600}},tooltip: {trigger: 'item'},legend: {show:false},series: [{name:this.title,type: 'pie',radius: ['55%', '80%'],avoidLabelOverlap: false,label: this.labelFn(this.label),labelLine: this.labelLineFn(this.label),data: this.colorFormat(this.data)}]};this.myChart.setOption(option)},resize(){this.myChart.resize()},labelColor(){arr.forEach((item)=>{if(item.ldwColor){item.itemStyle = {color:{}}}})return arr},colorFormat(arr){arr.forEach((item)=>{if(item.ldwColor){item.itemStyle = {color:{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: item.ldwColor[0] // 0% 处的颜色}, {offset: 1, color: item.ldwColor[1] // 100% 处的颜色}],global: false // 缺省为 false}}}})return arr},labelFn(state){if(state){return {color: 'inherit',fontWeight:"bold",fontSize:12,padding:[0,-60],formatter:(params)=>{return `${params.name}\n${(params.value/total(this.data)*100).toFixed(1)}%\n\n`}}}else{return {show:false}}},labelLineFn(state){if(state){return {smooth: 0.2,length: 10,length2: 70}}else{return {show:false}}}}
}
</script><style scoped>
.ldw-data-content-box{width:100%;height:100%;display: flex;
}.ldw-data-content-box>.ldw-chilren-box{width:100%;height:100%;display: flex;justify-content: center;align-items: center;flex-flow: column;overflow: hidden;
}
.ldw-data-content-box>.ldw-chilren-box>.title{font-size: 18px;color:#000;text-align: center;padding:24px 0;width:100%;position: relative;
}.ldw-bg-box{background: rgba(255,255,255,0.5);border: 1px solid #F4FDFE;border-radius: 20px;
}.ldw-text-text{display: inline-block;text-align: justify;line-height: 0;margin-left: 20px;
}.ldw-text-text::after{content:"";display: inline-block;width:100%;overflow:hidden;height:0;
}.ldw-quan-quan{width:100%;display: flex;align-items: center;
}.ldw-w{margin-top:6px;position: relative;
}.ldw-quan-box{width: 13px;height: 13px;border-radius: 2px;margin-right: 20px;
}.flex-column{width:100%;display: flex;justify-content: space-around;
}.flex-column .ldw-w{width: auto;
}.flex-column .ldw-quan-box{margin-right: 10px;
}.btn{position: absolute;right: 50px;top:50%;transform: translateY(-50%);
}.ldw-row-class{display: flex;width: 100%;justify-content: center;align-items: center;flex: 1;padding:0 20px;
}.canvas-box{text-align: center;width:65%;height: 100%;
}.quan-quan-box{width:35%;height: 100%;display: flex;flex-flow: column;justify-content: center;align-items: center;
}.m-m-m{margin: 0 auto;
}
</style>

调用代码

<template><div class="root flex flex-col border-box"><div  style="width: 400px; height: 400px;"  ><Pie  :title="'统计'"  :data="list" ></Pie></div></div>
</template><script>import Pie from '@/components/echarts/pieInfo.vue'export default{name:'',created() {},mounted() {this.list = this.chartData},components: {Pie},data() {return {list:[],chartData:[{value:100, type:'一季度'},{value:105, type:'二季度'},{value:201, type:'三季度'},{value:167, type:'四季度'},]}},methods:{}}
</script>