YZProjectCloud/yanzhu-bigscreen/src/components/project-overview-chart.vue

<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 v-if="htmlShow" class="chart-text" :style="'top:'+gifTop">
            <div class="chart-text-title">{{title1 }}</div>
            <div class="chart-text-sub-title">{{subTitle }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'JhbigscreenProjectOverviewChart',

    props: {
        htmlShow: {
            type: Boolean,
            default: false,
        },
        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: {},
            title1: '',
            subTitle: '',
        }
    },
    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 is1K = this.$dpi() == '1K'
                let is2K = this.$dpi() == '2K'
                let legendOption = {
                    top: 'center',

                    orient: 'vertical',
                    icon: 'circle',
                    itemWidth: 12,
                    itemGap: 8,
                    textStyle: {
                        color: '#c3dbfd',
                        fontSize: is1K ? 14 : is2K ? 18 : 24,
                        rich: {
                            name: {
                                color: '#c3dbfd',
                                fontSize: is1K ? 14 : is2K ? 18 : 24,
                                padding: [10, 5, 20, 5],
                            },
                            percent: {
                                color: '#18DB9F',
                                fontSize: is1K ? 16 : is2K ? 24 : 32,
                                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.title1 = this.maintitle || total_datas
                this.subTitle = this.text
                this.option = {
                    title: {
                        show: !this.htmlShow,
                        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}%)',
                        textStyle: {
                            fontSize: is1K ? 14 : is2K ? 18 : 24,
                        },
                    },

                    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>