基于echarts对柱状图的封装

核心库

• echarts
• lodash
• ResizeListener

代码

<!--
 * @Author: your name
 * @Date: 2020-11-03 10:39:39
 * @LastEditTime: 2020-11-21 16:04:42
-->
<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>

使用

<!--
 * @Author: your name
 * @Date: 2020-10-28 15:36:35
 * @LastEditTime: 2020-11-26 16:04:38
-->
<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>

效果图