<template> <div class='project-overview-chart' style="position: relative" @click="doClick"> <div :style="'height:'+height+'px;'+(width?('width:'+width+'px;'):'')" ref="warningPieChart"> </div> <div class="chart-gif chart-overview-gif" :style="'top:'+gifTop"></div> </div> </template> <script> export default { name: 'JhbigscreenProjectOverviewChart', props: { txtTop:{ type:String, default:'0' }, gifTop:{ type:String, default:'63px' }, fn:{ type:Function }, typedata:{ type: Array, }, width:{ type:Number }, height:{ type:Number }, text:{ type:String }, legendOpt:{ type:Object, default:()=>{} }, maintitle:{ type:[String,Number], default:'' }, sp:{ type:String, default:"\n" } }, data() { return { active:0, option:{} } }, mounted(){ this.init() }, methods: { doClick(){ this.$emit("clickme"); }, init(){ this.getChartData() }, getChartData(){ //品类金额占比 饼图 var chChartPie = echarts.init(this.$refs.warningPieChart); this.echartPie(chChartPie,this.typedata) }, echartPie(chChart,chartData){ let newPromise = new Promise((resolve) => { resolve() }) //然后异步执行echarts的初始化函数 newPromise.then(() => { var total_datas = 0; var data = []; var legendData = []; var color = ['#4974ff','#52aef7','#6863d7','#1d5d89','#20e6ff','#67feef'] for (let i = 0; i <chartData.length ; i++) { total_datas += Number(chartData[i].value); legendData.push(chartData[i].name) data.push( { value: chartData[i].value, name: chartData[i].name, itemStyle: { //颜色渐变 color: color[i] }, }, ) } /* let total = chartData.reduce((a, b) => { return a + b.value; }, 0);*/ let legendOption = { top: "center", orient: "vertical", icon: "circle", itemWidth: 12, itemGap: 8, textStyle: { color: "#c3dbfd", fontSize: 14, rich: { name: { color: "#c3dbfd", padding: [10, 5, 20, 5], }, percent: { color: "#18DB9F", fontSize: 16, padding: [0, 5, 0, 5], }, }, }, formatter: (name) =>{ let res = chartData.filter((v) => v.name === name); let percent = ((res[0].value * 100) / total_datas).toFixed(1); if(total_datas==0){ percent=0; } return "{name| " + name + "}"+this.sp+"{val|" + res[0].value + "} {percent|" + percent + "%}"; }, }; let opt={...legendOption,...(this.legendOpt||{})}; this.option = { title: { text: this.maintitle||total_datas, subtext: this.text, textAlign:'center', top:this.txtTop, itemGap :10, textStyle: { color: "#0dd2fd", fontSize: 24, fontWeight: "bold", align: "center", }, subtextStyle: { color: "#a5b5f0", fontSize: 12, align: "center", }, padding:[95,0,0,110], left:'left' }, tooltip: { trigger: 'item', formatter: "{b} <br/>{c} ({d}%)" }, legend: [ { right: 10, data: legendData, align: "left", ...opt, }, ], series: [ { name: "品类金额占比", type: "pie", center: ["25%", "50%"], radius: ["46%", "63%"], data: data, label: { show: false, }, itemStyle: { normal: { borderWidth: 5, borderColor: "#051a36" } }, }, { name: "外边框", type: "pie", clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 center: ["25%", "50%"], radius: ["70%", "70%"], label: { normal: { show: false, }, }, data: [ { value: 9, name: "", itemStyle: { normal: { borderWidth: 3, borderColor: "#152c65", }, }, }, ], }, ], } if(this.fn){ this.option=this.fn(this.option); } chChart.setOption(this.option); window.onresize = chChart.resize; }) }, } }; </script>