jhbigscreen/src/components/project-overview-chart.js

import Vue from 'vue'
Vue.component("project-overview-chart", {
    template: `
        <div class='project-overview-chart' style="position: relative" @click="doClick">
            <div :style="{'height': height+'px'}" ref="warningPieChart">
 
            </div>
            <div class="chart-gif chart-overview-gif" style="{'top':gifTop}"></div>
        </div>            
    `,
    props: {
        gifTop:{
            type:String,
            default:'63px'
        },
        fn:{
            type:Function              
        },
        typedata:{
            type: Array,
        },
        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:'top',
                        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;
            })
        },
    },

})