frontend/src/views/stritl/chartFiles/horizontalBar.vue

<template>
    <div id="myTopChart" ref="barChart" :style="boxStyle"></div>
</template>
<script>
export default {
    props: ['legendData', 'seriesData', 'boxStyle'],
    data() {
        return {};
    },
    mounted() {
        this.$nextTick(function () {
            this.drawBar();
        });
    },
    methods: {
        drawBar() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(this.$refs.barChart);
            // 绘制图表
            myChart.setOption({
                color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                tooltip: {},
                legend: {},
                grid: {
                    left: '6%',
                    right: '5%',
                    top: '7%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: this.legendData
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 25,
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#00DDFF' },
                                { offset: 1, color: '#80FFA5' }
                            ])
                        },
                        data: this.seriesData
                    }
                ]
            });
            window.addEventListener('resize', () => {
                // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
                myChart.resize();
            });
        }
    },
    watch: {
        legendData(val, old) {
            this.drawBar();
        }
    },
    beforeDestroy() {
        /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦*/
        window.removeEventListener('resize', () => {
            myChart.resize();
        });
    }
};
</script>
<style lang="less">
#myTopChart {
}
</style>