基于echarts对柱状图的封装

梦里梦外; 2022-12-24 02:57 211阅读 0赞

## 核心库 ##

*  echarts
 *  lodash
 *  ResizeListener

## 代码 ##

<template>
        <div class="charts" ref="charts"></div>
    </template>
    
    <script>
    import echarts from 'echarts';
    import {  merge } from 'lodash';
    import ResizeListener from 'element-resize-detector';
    
    export default { 
        name: 'ChartBar',
        props: { 
            extraOption: {  // 其他配置项
                type: Object,
                default: () => ({ })
            }
        },
        watch: { 
            extraOption: { 
                immediate: true,
                deep: true,
                handler () { 
                    this.updateChartView();
                }
            },
        },
        data () { 
            return { 
                myChart: null, // 图表对象
                option: {  // 配置项
                    legend: { 
                        itemHeight: 10,
                        itemWidth: 10,
                        icon: "rect",
                        data: [],
                        formatter: (name, index) => { 
                            return '{aa|' + name + '}'
                        },
                        textStyle: { 
                            rich: { 
                                aa: { 
                                    padding: [-2, 10, 0, 0],
                                    // lineHeight: 18,
                                },
                            }
                        },
                    },
                    tooltip: { 
                        confine: true, // 将图表限制在区域内
                    },
                    grid: { 
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        top: '2%',
                        containLabel: true
                    },
                    xAxis: [
                        { 
                            axisLabel: { 
                                show: false,
                                textStyle: { 
                                    color: '#333',
                                },
                            },
                            splitLine: {  // 坐标轴区域分割线
                                show: true,
                                lineStyle: { 
                                    color: '#c6d4e1',
                                    width: 1,
                                    type: 'dotted'
                                }
                            },
                            axisTick: {  // 刻度
                                show: false,
                                lineStyle: { 
                                    color: '#333'
                                }
                            },
                            axisLine: {  // 坐标轴轴线
                                show: false,
                                lineStyle: { 
                                    color: '#333'
                                }
                            },
                        }
                    ],
                    yAxis: [{ 
                        type: 'category',
                        // inverse: false, // 是否是反向坐标轴
                        axisLabel: {  // 坐标轴刻度标签的相关设置
                            show: true,
                            color: '#333'
                        },
                        splitLine: {  // 坐标轴区域分割线
                            show: false,
                            lineStyle: { 
                                color: '#c6d4e1',
                                width: 1,
                                type: 'dotted'
                            }
                        },
                        axisTick: {  // 刻度
                            show: false,
                            lineStyle: { 
                                color: '#333'
                            }
                        },
                        axisLine: {  // 坐标轴轴线
                            show: false,
                            lineStyle: { 
                                color: '#333'
                            }
                        },
                        data: []
                    }],
                    series: [],
                    color: ['#1fa776', '#f6b239', '#1fb8f1', '#ff9f7f', '#fb7293', '#67e0e3', '#fb7293', '#e062ae', '#e690d1', '#e7bcf3', '#9d96f5', '#8378ea', '#96bfff', '#859e41', '#9e7341', '#78419e', '#9e416d', '#414c9e'],
                },
            }
        },
        methods: { 
    
            updateChartView () {  // 更新视图
                if (!this.myChart) return;
                const fullOption = this.mergeDataToOption();
                this.myChart.setOption(fullOption, true);
            },
    
            mergeDataToOption () {  // 合并并将数据加入到配置项
                return merge(
                    { },
                    this.option,
                    this.extraOption
                )
            },
    
            addChartResizeListener () {  // 监听元素变化
                // 创建实例带参
                const instance = ResizeListener({ 
                    strategy: 'scroll',
                    callOnAdd: true
                });
    
                // 监听元素大小的变化
                instance.listenTo(this.$refs.charts, () => { 
                    if (!this.myChart) return;
                    this.myChart.resize();
                });
            },
    
            handleClick () {  // 点击图表触发
                this.myChart.on('click', (event) => { 
                    this.$emit('chart_click', event);
                });
            }
        },
        mounted () { 
            if (!this.myChart) { 
                // 初始化图表
                this.myChart = echarts.init(this.$refs.charts);
    
                // 绘制图表
                this.updateChartView();
    
                // 监听元素大小变化
                this.addChartResizeListener();
    
                // 绑定点击事件
                this.handleClick();
            }
        },
    }
    </script>
    
    <style lang="less" scoped>
        .charts { 
            width: 100%;
            height: 100%;
        }
    </style>

## 使用 ##

<template>
        <div>
            
            <template v-if="extraOption.series[0].data && extraOption.series[0].data.length > 0">
                <ChartBar :extraOption="extraOption"></ChartBar>
                <div class="unit">单位：只</div>
            </template>
            <noDataChartsImg chartPicType="h_bar_pic" v-else></noDataChartsImg>
        </div>
    </template>
    
    <script>
    import lodash from 'lodash';
    import {  getManufacturerStatisticsData } from '@/api/assetsAnalysisKanban/assetsStatusKanbanQuery';
    import ChartBar from '@/view/streamline/assetsAnalysisKanban/common/charts/ChartBar';
    import noDataChartsImg from '../../common/chartsImg';
    
    export default { 
        components: { 
            ChartBar,
            noDataChartsImg
        },
        props: { 
            chartsParams: {  // 需要请求的接口参数
                type: Object,
                default: () => { }
            }
        },
        watch: { 
            chartsParams: { 
                handler (val) { 
                    if (!lodash.isEmpty(val)) { 
                        this.getChartData(val);
                    }
                },
                immediate: true,
                deep: true
            }
        },
        data () { 
            return { 
                extraOption: { 
                    grid: { 
                        top: '13%',
                    },
                    tooltip: { 
                        trigger: 'item',
                        confine: true, // 将图表限制在区域内
                        formatter: function (params) {  // 提示内容太多隔行显示内容
                            const str = `${ params.marker} ${ params.name} : ${ params.value}只`
                            return str
                        },
                    },
                    xAxis: [
                        { 
                            axisLabel: { 
                                show: true,
                                textStyle: { 
                                    color: '#000',
                                },
                            },
                            axisLine: {  // 坐标轴轴线
                                show: true,
                                lineStyle: { 
                                    color: '#c6d4e1'
                                }
                            },
                        }
                    ],
                    yAxis: [
                        { 
                            // data: ["中国第一科技有限公司", "河南省", "浙江省", "湖北省", "贵州省", "江西省"],
                            data: [],
                            axisLabel: { 
                                show: true,
                                formatter: (value) => { 
                                    return (value.length > 5 ? (value.slice(0, 5) + "...") : value)
                                }
                            }
                        }, { 
                            type: 'category',
                            axisTick: 'none',
                            axisLine: 'none',
                            show: true,
                            axisLabel: { 
                                textStyle: { 
                                    color: '#000',
                                    fontSize: '12'
                                },
                            },
                            // data: [139, 181, 154, 144, 135, 117],
                            data: []
                        }
                    ],
                    series: [
                        { 
                            name: '值',
                            type: 'bar',
                            zlevel: 10,
                            itemStyle: { 
                                normal: { 
                                    // barBorderRadius: [0, 30, 30, 0],
                                    color: '#65b4f7',
                                },
                            },
                            label: { 
                                normal: { 
                                    show: false,
                                    formatter: (params) => { 
                                        return '{a|' + params.name + '}'
                                    },
                                    rich: { 
                                        a: { 
                                            color: '#fff'
                                        },
                                    }
                                }
                            },
                            showBackground: true,
                            backgroundStyle: { 
                                // barBorderRadius: [0, 30, 30, 0]
                            },
                            barWidth: 15,
                            // data: [139, 181, 154, 144, 135, 117],
                            data: [],
                        }
                    ]
                }
            }
        },
        methods: { 
            getChartData (data) {  // 获取图表数据
                const params = { 
                    equipCateg: data.equipCateg, // 设备类型
                    orgNo: data.orgNo // 组织树
                }
                getManufacturerStatisticsData(params).then((res) => { 
                    const jsonData = res.data;
                    if (jsonData.status === 1 && jsonData.code === 200 && !lodash.isEmpty(jsonData.data)) { 
                        const chartsData = jsonData.data.chartsData;
                        this.extraOption.yAxis[0].data = chartsData.yAxis.length > 0 && chartsData.yAxis[0].data;
                        this.extraOption.yAxis[1].data = chartsData.yAxis.length > 0 && chartsData.yAxis[1].data;
                        this.extraOption.series[0].data = chartsData.seriesData.length > 0 && chartsData.seriesData[0].data;
                    }
                })
            }
        },
    }
    </script>
    
    <style lang="less" scoped>
    .unit { 
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 12px;
        color: rgba(102, 102, 102, 1);
    }
    </style>

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8f05aa98423a425496a66a319ceef75d.png