接上一篇文章

237 阅读12分钟

图三

preview.png

  • 特点
    • 带纹理并且带圆角
  • 重点
    • 平铺图片
    • 因为有圆角所以需要截取
/**
 * @version 1.0.1
 * @author yfeng
 * @createTime:2021-08-01,
 * @updateTime:2021-08-01
 * @copyright thunisoft fd
 */
// 事件处理函数
export default {
    props: {
        // 需要传递的数据
        data: {
            type: Array,
            default() {
                return [{
                    name:'九监区',
                    value1:20,
                    value2:2
                }, {
                    name:'十一监区',
                    value1:20,
                    value2:2
                }, {
                    name:'十二监区',
                    value1:20,
                    value2:2
                }, {
                    name:'十三监区',
                    value1:20,
                    value2:2
                }, {
                    name:'十四监区',
                    value1:20,
                    value2:2
                }, {
                    name:'十五监区',
                    value1:20,
                    value2:2
                }];
            }
        },
        legend:{
            type: Array,
            default() {
                return [{
                    name:'本月办理减刑数',
                    key:'value1'
                }, {
                    name:'本月办理假释数',
                    key:'value2'
                }];
            }
        }
    },
    data() {
        return {
            // echarts对象
            myEchart: null,
            // 数据列表
            dataList: [],
            // echart的options
            options: {}
        };
    },
    // 创建元素
    mounted() {
        this.init();
    },
    // 销毁
    destroyed() {
        // 销毁图表
        this.destroyedChart();
    },
    methods: {
        // 设置默认参数
        setDefaultOptions() {
            // 默认的参数
            this.options = {
                barWidth: 15,
                yAxis: {
                    type: 'value',
                    splitLine: {show: false},
                    axisTick: {show: false},
                    axisLabel: {show: false},
                    axisLine:{show: false}
                },
                xAxis: {
                    type: 'category',
                    axisTick: {show: false},
                    axisLine: {show: false},
                    offset:20,
                    axisLabel: {
                        interval:0,
                        textStyle: {
                            interval:0,
                            color: '#b9eff8',
                            fontWeight: 'normal',
                            fontSize: 18
                        },
                        align:'center',
                        formatter:function (params) {
                            const text = params.slice(0, 4);
                            return text;
                        }
                    },
                    data: []
                },
                grid: {
                    top: '25%',
                    left: '5%',
                    bottom: '8%',
                    right: '5%',
                    containLabel: true
                },
                series: [{
                    type: 'bar',
                    name: 'bar1',
                    barWidth : 24,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position:'top',
                                formatter: function (value) {
                                    if (parseFloat(value.data)) {
                                        return value.data;
                                    }
                                    return '';
                                },
                                textStyle: {
                                    color: '#d4fbfd',
                                    fontSize: 18
                                }
                            },
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00f2fe'
                            }, {
                                offset: 1,
                                color: '#4facfe'
                            }]),
                            barBorderRadius:[12, 0, 0, 0]

                        }
                    },
                    data: []
                }, {
                    z: 15,
                    type: 'pictorialBar',
                    animation: true,
                    hoverAnimation: false,
                    data: [],
                    symbolSize: [24, 44],
                    symbolOffset: [0, 20],
                    symbolRepeat: true,
                    symbolClip:true,
                    symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAA2CAYAAADd0Vm+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowN0NGREZGREY5ODgxMUVCOEJCQTlDRjkwMkI3NTM4OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowN0NGREZGRUY5ODgxMUVCOEJCQTlDRjkwMkI3NTM4OCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3Q0ZERkZCRjk4ODExRUI4QkJBOUNGOTAyQjc1Mzg4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA3Q0ZERkZDRjk4ODExRUI4QkJBOUNGOTAyQjc1Mzg4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+0YrziAAAAYxJREFUeNq0mNtKAzEQhpNpLeLhxuOFh4KC4Ps/jqgoxVJBQdQiS9c4IxFKTJtMZmbgp8tu6Nf220nS9SGEK+fcDSY4eQ0w/fIJwOxiTpxO9ekJiK/HmD1nULB0PMZsWQLo+BIztAJQjTAXGG8FcFH6qSWA6gizbwmgOteQDoVrYulQuC6WDhVjRNKhclyzdGCMbZIOzLFs6cD8QKMI8VYAqh2OdGi8Oaqlg6CHSPq2JQBiEw6tAFXSpYCidA3AWukE+FCCjHPSCXCL6RQAPkrfSAELzJ3Sxuvf9P7n4BPzoPRTkfSznOQXzLMS5BBzkLuLJorSfzvd4+Y3vUCdeR1/T2l1uT5YxDvrW0P6qkabYx6t90Uq0ktTBUl/twSE2ISdFUAsvXY2bZbOma6bpHPXA7Z0LoAtvWVFY0lvXTLntdO7ZE1+rZEuXfSL0qWAonSNbcta6Vr7opXSCbCpBCHpsxzgS/HRxCR9P3D6RT56SwB9g3tLANUb5sk55WdDSU3pb29uX6RZgx8BBgBhG0+txbEqtQAAAABJRU5ErkJggg==',
                    barWidth: 24,
                    itemStyle: {
                        normal: {
                            label: {show: false},
                            barBorderRadius:[12, 0, 0, 0]
                        }
                    }
                }, {
                    type: 'bar',
                    name: 'bar2',
                    barWidth : 24,
                    z: 10,
                    barGap: '30%',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position:'top',
                                formatter: function (value) {
                                    if (parseFloat(value.data)) {
                                        return value.data;
                                    }
                                    return '';
                                },
                                textStyle: {
                                    color: '#d4fbfd',
                                    fontSize: 18
                                }
                            },
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fbdd97'
                            }, {
                                offset: 1,
                                color: '#d3fbfb'
                            }]),
                            barBorderRadius:[0, 12, 0, 0]

                        }
                    },
                    data: []
                }, {
                    z: 30,
                    type: 'pictorialBar',
                    animation: true,
                    barGap: '30%',
                    hoverAnimation: false,
                    symbolSize: [24, 48],
                    symbolOffset: [0, 20],
                    data: [],
                    symbolRepeat: true,
                    symbolClip:true,
                    symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAA2CAYAAADd0Vm+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowN0NGREZGREY5ODgxMUVCOEJCQTlDRjkwMkI3NTM4OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowN0NGREZGRUY5ODgxMUVCOEJCQTlDRjkwMkI3NTM4OCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3Q0ZERkZCRjk4ODExRUI4QkJBOUNGOTAyQjc1Mzg4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA3Q0ZERkZDRjk4ODExRUI4QkJBOUNGOTAyQjc1Mzg4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+0YrziAAAAYxJREFUeNq0mNtKAzEQhpNpLeLhxuOFh4KC4Ps/jqgoxVJBQdQiS9c4IxFKTJtMZmbgp8tu6Nf220nS9SGEK+fcDSY4eQ0w/fIJwOxiTpxO9ekJiK/HmD1nULB0PMZsWQLo+BIztAJQjTAXGG8FcFH6qSWA6gizbwmgOteQDoVrYulQuC6WDhVjRNKhclyzdGCMbZIOzLFs6cD8QKMI8VYAqh2OdGi8Oaqlg6CHSPq2JQBiEw6tAFXSpYCidA3AWukE+FCCjHPSCXCL6RQAPkrfSAELzJ3Sxuvf9P7n4BPzoPRTkfSznOQXzLMS5BBzkLuLJorSfzvd4+Y3vUCdeR1/T2l1uT5YxDvrW0P6qkabYx6t90Uq0ktTBUl/twSE2ISdFUAsvXY2bZbOma6bpHPXA7Z0LoAtvWVFY0lvXTLntdO7ZE1+rZEuXfSL0qWAonSNbcta6Vr7opXSCbCpBCHpsxzgS/HRxCR9P3D6RT56SwB9g3tLANUb5sk55WdDSU3pb29uX6RZgx8BBgBhG0+txbEqtQAAAABJRU5ErkJggg==',
                    barWidth: 24,
                    itemStyle: {
                        normal: {
                            label: {show: false},
                            barBorderRadius:[12, 0, 0, 0]
                        }
                    }
                }]
            };
        },
        // 设置数据列表
        setDataList(dataList) {
            this.dataList = dataList;
        },

        /**
         * @description 初始化的方法
         * @name init
         * @return {*} 无
         */
        init() {
            // 更新数据
            this.update(this.data);
        },

        /**
         * @description 刷新图表
         * @return {*} 无
         */
        refresh() {
            if (this.myEchart) {
                this.update(this.dataList);
            }
        },

        /**
         * @description 设置图表的数据
         * @name getChartData
         * @param {object} data 参数
         * @return {*} 无
         */
        update(data) {
            // 先判断数据是否存在
            if (!Array.isArray(data)) {
                return false;
            }
            // 设置数据列表
            this.setDataList(data);
            // 如果不存在echarts
            if (!this.myEchart) {
                // 图表对象
                this.myEchart = window.echarts.init(this.$refs.jsEchart);
                // 绑定resize 事件
                this.bindResizeEvent();
            }
            // 设置默认参数
            this.setDefaultOptions();
            // 方向排序
            const _data = data;
            // 更新数据
            this.updateData(_data);
            // 清空图表
            this.myEchart.clear();
            // 生成图表
            this.myEchart.setOption(this.options);
        },

        // 更新数据对象
        updateData(data) {
            // 需要找到legend的key
            const legendKey = {};
            // 横轴的数据
            const xAxis = [];
            // 有两个柱子
            const _num = 2;
            this.legend.forEach(item => {
                legendKey[item.key] = [];
            });
            data.forEach(item => {
                xAxis.push(item.name);
                // 处理数据
                for (const i in legendKey) {
                    legendKey[i].push(item[i]);
                }
            });
            this.options.series.forEach((item, index) => {
                if (index < _num) {
                    item.name = this.legend[0].name;
                    item.data = legendKey[this.legend[0].key];
                } else {
                    item.name = this.legend[1].name;
                    item.data = legendKey[this.legend[1].key];
                }
            });
            // 处理x轴数据
            this.options.xAxis.data = xAxis;
        },
        // resize 事件处理函数
        resizeHandler() {
            if (this.myEchart) {
                this.myEchart.resize();
            }
        },

        /**
         * @description 绑定resize 事件
         * @name init
         * @return {*} 无
         */
        bindResizeEvent() {
            // 绑定resize事件
            window.eventHandler.on(window, 'resize', this.resizeHandler);
        },
        // 取消事件绑定
        unbindResizeEvent() {
            // 取消绑定resize事件
            window.eventHandler.off(window, 'resize', this.resizeHandler);
        },

        /**
         * @description 销毁图表
         * @name destroyedChart
         * @return {*} 无
         */
        destroyedChart() {
            // 如果存在echarts
            if (this.myEchart) {
                // 销毁实例,销毁后实例无法再被使用。
                this.myEchart.dispose();
                this.myEchart = null;
                // 取消事件绑定
                this.unbindResizeEvent();
            }
        }
    }
};

图四

preview.png

  • 特点
    • 排序渐变
    • 带图标
    • 边框
/**
 * @version 1.0.1
 * @author yfeng
 * @createTime:2021-08-01,
 * @updateTime:2021-08-01
 * @copyright thunisoft fd
 */
// 事件处理函数
export default {
    props: {
        // 需要传递的数据
        data: {
            type: Array,
            default() {
                return [{
                    name:'一监区',
                    value:80
                }, {
                    name:'二监区',
                    value:20
                }, {
                    name:'三监区',
                    value:30
                }, {
                    name:'四监区',
                    value:50
                }, {
                    name:'五监区',
                    value:60
                }, {
                    name:'六监区',
                    value:20
                }];
            }
        }
    },
    data() {
        return {
            // echarts对象
            myEchart: null,
            // 数据列表
            dataList: [],
            // echart的options
            options: {},
            itemStyle: {
                normal: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        type: 'linear',
                        global: false,
                        colorStops: [
                            {
                                // 第一节下面
                                offset: 0,
                                color: '#025ec4'
                            },
                            {
                                offset: 1,
                                color: '#00ecfd'
                            }
                        ]
                    },
                    barBorderColor: 'transparent',
                    barBorderWidth: 10,
                    barBorderRadius: 2
                }
            }
        };
    },
    // 创建元素
    mounted() {
        this.init();
    },
    // 销毁
    destroyed() {
        // 销毁图表
        this.destroyedChart();
    },
    methods: {
        // 设置默认参数
        setDefaultOptions() {
            // 默认的参数
            this.options = {
                grid: {
                    top: '8%',
                    bottom: -15,
                    right: 30,
                    left: 30,
                    containLabel: true
                },
                xAxis: {show: false},
                yAxis: [{
                    show: true,
                    data: [],
                    axisLine: {show: false},
                    splitLine: {show: false},
                    axisTick: {show: false},
                    axisLabel: {
                        show:true,
                        color: '#b9eff8',
                        lineHeight: 40,
                        fontSize: 20,
                        fontWeight:'normal',
                        formatter: function (value) {
                            return value;
                        }
                    }
                }, {
                    show: true,
                    data: [],
                    axisLine: {show: false},
                    splitLine: {show: false},
                    axisTick: {show: false},
                    axisLabel: {
                        margin: 20,
                        color: '#fff',
                        align: 'left',
                        lineHeight: 40,
                        fontSize: 20,
                        fontWeight:'normal',
                        formatter: function (value) {
                            return value;
                        }
                    }
                }],
                series: [{
                    name: 'XXX',
                    type: 'pictorialBar',
                    symbolSize: [34, 33],
                    symbolOffset: [10, -1],
                    z: 12,
                    data: []
                }, {
                    name: 'bar',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: [],
                    barWidth: 20
                },
                {
                    name: 'border',
                    type: 'bar',
                    barGap: '-100%',
                    barWidth: 20,
                    itemStyle: {
                        normal: {
                            color: 'rgba(2,250,254,0.08)',
                            barBorderColor: 'rgba(0,255,246,0.35)',
                            barBorderWidth: 1,
                            barBorderRadius: 2,
                            label: {
                                // 标签显示位置
                                show: false,
                                position: 'top'
                            }
                        }
                    },
                    data: [],
                    z: 0
                }]
            };
        },
        // 设置数据列表
        setDataList(dataList) {
            this.dataList = dataList;
        },

        /**
         * @description 初始化的方法
         * @name init
         * @return {*} 无
         */
        init() {
            // 更新数据
            this.update(this.data);
        },

        /**
         * @description 刷新图表
         * @return {*} 无
         */
        refresh() {
            if (this.myEchart) {
                this.update(this.dataList);
            }
        },

        /**
         * @description 设置图表的数据
         * @name getChartData
         * @param {object} data 参数
         * @return {*} 无
         */
        update(data) {
            // 先判断数据是否存在
            if (!Array.isArray(data)) {
                return false;
            }
            // 设置数据列表
            this.setDataList(data);
            // 如果不存在echarts
            if (!this.myEchart) {
                // 图表对象
                this.myEchart = window.echarts.init(this.$refs.jsEchart);
                // 绑定resize 事件
                this.bindResizeEvent();
            }
            // 设置默认参数
            this.setDefaultOptions();
            // 方向排序
            const _data = data;
            // 更新数据
            this.updateData(_data);
            // 清空图表
            this.myEchart.clear();
            // 生成图表
            this.myEchart.setOption(this.options);
        },

        // 更新数据对象
        updateData(data) {
            // 对数组进行排序
            const _data = data.sort(this.compare('value')).reverse();
            // 存储名字
            const nameArr = [];
            // 存储值
            const number = [];
            // 光
            const guangArr = [];
            _data.forEach((item, index) => {
                nameArr.push(item.name);
                number.push(item.value);
                const guangItem = {
                    value:item.value,
                    symbolPosition:'end'
                };
                // 深拷贝
                item.itemStyle = JSON.parse(JSON.stringify(this.itemStyle));
                // eslint-disable-next-line default-case
                switch (index) {
                    // 最后一名
                    case 0:
                        item.itemStyle.normal.color.colorStops = [{
                            // 第一节下面
                            offset: 0,
                            color: '#db500d'
                        },
                        {
                            offset: 1,
                            color: '#dba212'
                        }];
                        guangItem.symbol = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAYAAAC803lsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMjBFQ0NDMkQ4QjYxMUVCOTRDMUYxNzVDRTJCOTA2NCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMjBFQ0NDM0Q4QjYxMUVCOTRDMUYxNzVDRTJCOTA2NCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjIyMEVDQ0MwRDhCNjExRUI5NEMxRjE3NUNFMkI5MDY0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIyMEVDQ0MxRDhCNjExRUI5NEMxRjE3NUNFMkI5MDY0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bMPLfwAAB5JJREFUeNqUWE1vJMUZ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';
                        break;
                    // eslint-disable-next-line no-fallthrough
                    case 1:
                        item.itemStyle.normal.color.colorStops = [{
                            // 第一节下面
                            offset: 0,
                            color: '#a39f17'
                        },
                        {
                            offset: 1,
                            color: '#d7c913'
                        }];
                        guangItem.symbol = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAYAAAC803lsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNEIzRTY4REQ4QjUxMUVCOTcyMUVDQkY0MEM3MTRGNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNEIzRTY4RUQ4QjUxMUVCOTcyMUVDQkY0MEM3MTRGNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU0QjNFNjhCRDhCNTExRUI5NzIxRUNCRjQwQzcxNEY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0QjNFNjhDRDhCNTExRUI5NzIxRUNCRjQwQzcxNEY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++jdIbQAAB8RJREFUeNqUWFtzHEcV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';
                        break;
                    // eslint-disable-next-line no-fallthrough
                    case 2:
                        item.itemStyle.normal.color.colorStops = [{
                            // 第一节下面
                            offset: 0,
                            color: '#008e9e'
                        },
                        {
                            offset: 1,
                            color: '#07fda5'
                        }];
                        guangItem.symbol = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAYAAAC803lsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MDFDQUNDN0Q4QjUxMUVCODk3NDg2OTg3OERCOEM4NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MDFDQUNDOEQ4QjUxMUVCODk3NDg2OTg3OERCOEM4NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjgwMUNBQ0M1RDhCNTExRUI4OTc0ODY5ODc4REI4Qzg3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjgwMUNBQ0M2RDhCNTExRUI4OTc0ODY5ODc4REI4Qzg3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+W2VH7QAAB6dJREFUeNqUWEuPFFUU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';
                        break;
                    // eslint-disable-next-line no-fallthrough
                    default:
                        guangItem.symbol = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAYAAAC803lsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4OUEzNjlFMUQ4QjAxMUVCQkNBMUY5NDI3MzdFMUJBRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4OUEzNjlFMkQ4QjAxMUVCQkNBMUY5NDI3MzdFMUJBRSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg5QTM2OURGRDhCMDExRUJCQ0ExRjk0MjczN0UxQkFFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg5QTM2OUUwRDhCMDExRUJCQ0ExRjk0MjczN0UxQkFFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+cqrxoQAAB2JJREFUeNqcWFtvVFUU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';
                }
                guangArr.push(guangItem);
            });
            // 获取数组中最大的值
            const maxNum = Math.max.apply(null, number);
            // 改变yAxis
            this.options.yAxis.forEach((item, index) => {
                item.data = nameArr;
                if (index) {
                    item.axisLabel.formatter = function (value, index) {
                        return `${number[index]}分`;
                    };
                }
            });
            // 带光的bar
            // 光的data
            this.options.series[0].data = guangArr;
            // bar的data
            this.options.series[1].data = _data;
            // 框的data
            this.options.series[2].data = new Array(nameArr.length).fill(maxNum);
        },
        // 对象排序
        compare(property) {
            return function (a, b) {
                const value1 = a[property];
                const value2 = b[property];
                return value2 - value1;
            };
        },
        // resize 事件处理函数
        resizeHandler() {
            if (this.myEchart) {
                this.myEchart.resize();
            }
        },

        /**
         * @description 绑定resize 事件
         * @name init
         * @return {*} 无
         */
        bindResizeEvent() {
            // 绑定resize事件
            window.eventHandler.on(window, 'resize', this.resizeHandler);
        },
        // 取消事件绑定
        unbindResizeEvent() {
            // 取消绑定resize事件
            window.eventHandler.off(window, 'resize', this.resizeHandler);
        },

        /**
         * @description 销毁图表
         * @name destroyedChart
         * @return {*} 无
         */
        destroyedChart() {
            // 如果存在echarts
            if (this.myEchart) {
                // 销毁实例,销毁后实例无法再被使用。
                this.myEchart.dispose();
                this.myEchart = null;
                // 取消事件绑定
                this.unbindResizeEvent();
            }
        }
    }
};