YZProjectCloud/yanzhu-bigscreen/src/components/staffSurveyChart.vue

<template>
    <div :style="{ 'height': height, 'width': width }" ref="chart"></div>
</template>

<script>
export default {
    props: {
        height: {
            type: [Number, String]
        },
        data: {
            type: Array
        },
        width: {
            type: [Number, String]
        },
        max: {
            type: Number
        },
        unit: {
            type: String
        }

    },
    data() {
        return {
            chart: null,
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.getChartData()
        },
        chartClick(p) {
            this.$emit("chart-click", p);
        },
        getChartData() {
            //品类金额占比 饼图
            var chChart = echarts.init(this.$refs.chart);
            this.chart = chChart;
            chChart.on("click", this.chartClick)
            this.echart(chChart, this.data)
        },
        echart(chChart, chartData) {
            let fontSize = this.$dpi() == '1K' ? '12' : this.$dpi() == '2K' ? '14' : '24';
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {

                var value = []
                var text = []
                var bgData = []
                var total = 0
                for (let i = 0; i < chartData.length; i++) {
                    value.push(chartData[i].value)
                    text.push(chartData[i].text)
                    bgData.push(100)
                    if (this.max) {
                        total = this.max
                    } else {
                        total += chartData[i].value
                    }
                }

                var prop = []
                for (let j = 0; j < value.length; j++) {
                    if (total == 0) {
                        prop.push(0)
                    } else {
                        prop.push((value[j] / total * 100).toFixed(1))
                    }
                }

                var unit = '人'
                if (this.unit) {
                    unit = this.unit
                }


                this.option = {
                    grid: {
                        left: "5%",
                        right: "5%",
                        bottom: "0%",
                        top: "0%",
                        containLabel: true,
                    },
                    xAxis: [{
                        show: false,
                    },
                    //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
                    {
                        show: false,
                    }
                    ],
                    yAxis: [
                        {
                            triggerEvent: true,
                            type: 'category',
                            axisLabel: {
                                show: false, //让Y轴数据不显示
                            },
                            itemStyle: {

                            },
                            axisTick: {
                                show: false, //隐藏Y轴刻度
                            },
                            axisLine: {
                                show: false, //隐藏Y轴线段
                            },
                            data: [],
                        }, {
                            triggerEvent: true,
                            show: false,
                            data: [],
                            axisLine: {
                                show: false
                            }
                        }],
                    series: [
                        //数据条--------------------我是分割线君------------------------------//
                        {
                            show: true,
                            type: 'bar',
                            xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
                            barGap: '-100%',
                            barWidth: this.$dpi() == '1K' ? '6' : this.$dpi() == '2K' ? '8' : '16', //统计条宽度
                            itemStyle: {
                                normal: {
                                    color: 'rgba(22,203,115,0.05)'
                                },
                            },
                            label: {
                                normal: {
                                    show: true,
                                    //label 的position位置可以是top bottom left,right,也可以是固定值
                                    //在这里需要上下统一对齐,所以用固定值
                                    position: [0, this.$dpi() == '1K' ? '-25' : this.$dpi() == '2K' ? '-40' : '-50'],
                                    rich: { //富文本
                                        prop: { //自定义颜色
                                            color: '#c6d9fa',
                                            fontSize: fontSize,
                                        },
                                        unit: {
                                            color: '#6c829a',
                                            fontSize: fontSize,
                                        },
                                        yes: {
                                            color: '#55adf7',
                                            fontSize: fontSize,
                                        },
                                        not: {
                                            color: '#4677fa',
                                            fontSize: fontSize,
                                        },
                                        index: {
                                            color: '#fcbc02',
                                            fontStyle: 'italic',
                                            padding: [0, 0, 0, 5],
                                            fontSize: fontSize,
                                        },
                                        name: {
                                            width: this.width,
                                            color: '#c6d9fa',
                                            padding: [0, 0, 0, 10],
                                            fontSize: fontSize,
                                        },
                                        color: {
                                            color: '#8ca2be',
                                            fontSize: fontSize,
                                        },
                                        arrow: {
                                            width: this.$dpi() == '1K' ? 12 : this.$dpi() == '2K' ? 16 : 24,
                                            height: this.$dpi() == '1K' ? 8 : this.$dpi() == '2K' ? 12 : 20,
                                            backgroundColor: {
                                                image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
                                            },
                                        },

                                    },
                                    formatter: (data) => {
                                        //富文本固定格式{colorName|这里填你想要写的内容}
                                        //return '{arrow|}'
                                        return '{arrow|}{name|' + text[data.dataIndex] + '}{prop|' + value[data.dataIndex] + '}{color| ' + unit + '}   {prop|' + prop[data.dataIndex] + '}{color| %} ';
                                    },
                                }
                            },
                            data: bgData,
                        },
                        {
                            type: "bar",
                            zlevel: 1,
                            itemStyle: {
                                normal: {
                                    color: "#6ab9fe",
                                },
                            },
                            barWidth: 8,
                            data: prop,
                        },
                        {
                            type: "bar",
                            barWidth: 8,
                            barGap: "-100%",
                            data: bgData,
                            itemStyle: {
                                normal: {
                                    color: "rgba(24,31,68,1)",
                                },
                            },
                        },
                    ],
                };

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

<style></style>