Cold_putoutstorage_web/src/components/echart/echart-bar-row.vue

<!-- 柱图 -->
<template>
    <div style="height:100%;min-height: 300px;" :id="props.id" class="myChart"></div>
</template>
<script setup lang="ts">
import { onMounted, inject, watch, reactive } from "vue";
import { findBarRowFun } from "@/plugins/findData";
// 接受父组件参数，配置默认值
const props = defineProps({
    id: {
        type: String,
        default: () => '',
    },
    lineData: {
        type: Object,
        default: () => { },
    },
});

let echart: any = null
let myChart: any = null

let echartData: any = reactive({})

watch(() => props.lineData, async () => {
    Object.assign(echartData,findBarRowFun(props.lineData))
    myChart.clear();
    myChart.setOption(initEcharts());
})
onMounted(() => {
    echart = inject('echart')
    myChart = echart.init(document.getElementById(props.id));
    setEchartFun();
})

//函数
const setEchartFun = async () => {
    myChart.setOption(initEcharts());
    window.onresize = function () {
        myChart.resize();
    };
}
const initEcharts = () => {
    // 绘制图表
    return {
        title: {},
        tooltip: {
            // trigger: 'axis',
            // axisPointer: {
            //     type: 'shadow'
            // }
        },
        legend: {},
        grid: {
            top:'0%',
            left: '0%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: echartData.xAxisArr
        },
        series: [
            {
                type: 'bar',
                data:  echartData.dataServe,
                barMaxWidth:'20%',//宽度
                itemStyle: { //面积图颜色设置
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                        { offset: 0, color: 'rgb(51,205,184)' },
                                    { offset: 0.5, color: 'rgb(51,205,184)' },
                                    { offset: 1, color: 'rgb(51,205,184)' }
                        ],
                        globalCoord: false // 缺省为 false
                    },
                    borderRadius: [0,20,20,0] //圓角
                },
            },
        ]
    }
}

</script>