YZProjectCloud/yanzhu-bigscreen/src/components/certificate-bar-chart.vue

<template>
    <div :style="{ 'height': height + 'px' }" ref="chart"></div>
</template>
<script>
export default {
    props: {
        data: {
            type: Array,
        },
        height: {
            type: Number,
        },
    },
    data() {
        return {
            option: {},
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.getChartData()
        },
        getChartData() {
            //品类金额占比 饼图
            var chChart = echarts.init(this.$refs.chart)
            this.echart(chChart, this.data)
        },
        echart(chChart, chartData) {
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var value = []
                var text = []
                var total = 0
                var bgd = []
                for (let i = 0; i < chartData.length; i++) {
                    value.push(chartData[i].value)
                    text.push(chartData[i].text)
                    bgd.push(100)
                    total += chartData[i].value
                }

                var prop = []
                for (let j = 0; j < value.length; j++) {
                    prop.push(((value[j] / total) * 100).toFixed(1))
                }
                let is1K = this.$dpi() == '1K'
                let is2K = this.$dpi() == '2K'
                this.option = {
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '-10%',
                        top: '2%',
                        containLabel: true,
                    },
                    xAxis: {
                        show: false,
                        type: 'value',
                    },
                    yAxis: [
                        {
                            type: 'category',
                            inverse: true,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#cbdaff',
                                    fontSize: is1K ? 14 : is2K ? 18 : 20,
                                },
                            },
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            data: text,
                        },
                        {
                            type: 'category',
                            inverse: true,
                            axisTick: 'none',
                            axisLine: 'none',
                            show: true,
                            axisLabel: {
                                textStyle: {
                                    color: '#cbdaff',
                                    fontSize: is1K ? 16 : is2K ? 20 : 30,
                                },
                                formatter: function (params, i) {
                                    var text = '{a|' + value[i] + '}{a|   ' + prop[i] + '%}'
                                    return text
                                },
                                rich: {
                                    a: {
                                        fontSize: is1K ? 16 : is2K ? 20 : 30,
                                        color: '#cbdaff',
                                    },
                                },
                            },
                            data: prop,
                        },
                    ],
                    series: [
                        {
                            type: 'bar',
                            zlevel: 1,
                            itemStyle: {
                                normal: {
                                    color: '#6ab9fe',
                                },
                            },
                            barWidth: is1K ? 8 : is2K ? 12 : 16,
                            data: prop,
                        },
                        {
                            type: 'bar',
                            barWidth: is1K ? 8 : is2K ? 12 : 16,
                            barGap: '-100%',
                            data: bgd,
                            itemStyle: {
                                normal: {
                                    color: 'rgba(24,31,68,1)',
                                },
                            },
                        },
                    ],
                }

                chChart.setOption(this.option)
                window.onresize = chChart.resize
            })
        },
    },
    watch: {
        data: function (n, o) {
            this.getChartData(this.data)
        },
    },
}
</script>