mky-vent-base/src/views/vent/home/configurable/green/components/dz-chart.vue

<template>
    <div class="dz_chart">
        <div ref="chartRef" class="chartRef"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';
import warnLevel1 from '@/assets/images/home-green/300.png'
import warnLevel2 from '@/assets/images/home-green/400.png'
import warnLevel3 from '@/assets/images/home-green/500.png'
import warnLevel4 from '@/assets/images/home-green/600.png'
import warnLevel5 from '@/assets/images/home-green/700.png'

let props = defineProps({
    echartOption: {
        type: Object,
        default: () => {
            return {}
        }
    },
    echartData: {
        type: Array,
        default: () => {
            return []
        }
    }
})

//获取dom元素节点
let chartRef = ref<any>();
// 类别
let category = ref<any[]>([])
let echartY=ref<any[]>([])
function getOption() {
    let myChart = echarts.init(chartRef.value);
    let option = {
        xAxis: {
            max: 10,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
        },
        grid: {
            left: 10,
            top: 10, // 设置条形图的边距
            right: 10,
            bottom: 0
        },
        yAxis: [{
            type: "category",
            inverse: false,
            data: category.value,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
        }],
        series: [
            {
                // 内
                type: "bar",
                barWidth: 18,
                silent: true,
                itemStyle: {
                    normal: {
                        color: function (param) {
                            const colors = ['#ff0000', '#ff7700', '#d8b66f', '#dbbf2e', '#61b4c5',];
                            return colors[param.dataIndex % colors.length];
                        }
                    }
                },
                label: {
                    normal: {
                        formatter: (params) => {
                            let text;
                            if (params.dataIndex == 0) {
                                text = `{warnLevel5|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
                            } else if (params.dataIndex == 1) {
                                text = `{warnLevel4|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
                            } else if (params.dataIndex == 2) {
                                text = `{warnLevel3|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
                            } else if (params.dataIndex == 3) {
                                text = `{warnLevel2|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
                            } else if (params.dataIndex == 4) {
                                text = `{warnLevel1|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
                            }
                            return text;
                        },
                        textStyle: {
                            color: "#fff",
                            fontSize: 12
                        },
                        position: [0, -22],
                        show: true,
                        rich: { //富文本
                            warnLevel1: {
                                backgroundColor: {
                                    image: warnLevel1,
                                },
                                height: 16,
                                width: 16,
                            },
                            warnLevel2: {
                                backgroundColor: { //这里可以添加你想自定义的图片
                                    image: warnLevel2,
                                },
                                height: 16,
                                width: 16,
                            },
                            warnLevel3: {
                                backgroundColor: {
                                    image: warnLevel3,
                                },
                                height: 16,
                                width: 16,
                            },
                            warnLevel4: {
                                backgroundColor: { //这里可以添加你想自定义的图片
                                    image: warnLevel4,
                                },
                                height: 16,
                                width: 16,
                            },
                            warnLevel5: {
                                backgroundColor: { //这里可以添加你想自定义的图片
                                    image: warnLevel5,
                                },
                                height: 16,
                                width: 16,
                            },

                        },

                    }
                },
                data: category.value,
                z: 1,
                animationEasing: "elasticOut"
            },

            {
                // 分隔
                type: "pictorialBar",
                itemStyle: {
                    normal: {
                        color: "rgba(28, 48, 52)"
                    }
                },
                symbolRepeat: "fixed",
                symbolMargin: 3,
                symbol: "rect",
                symbolClip: true,
                symbolSize: [10, 24],
                symbolPosition: "start",
                symbolOffset: [1, -4],
                symbolBoundingData: 10,
                data: [10, 10, 10, 10, 10],
                z: 2,
                animationEasing: "elasticOut",


            },
            {
                // label
                type: "pictorialBar",
                symbolBoundingData: 10,
                itemStyle: {
                    normal: {
                        color: "none"
                    }
                },
                label: {
                    normal: {
                        formatter: (params) => {
                            let text;
                            if (params.dataIndex == 0) {
                                text = '{a| ' + params.data + '个}';
                            } else if (params.dataIndex == 1) {
                                text = '{b| ' + params.data + '个}';
                            } else if (params.dataIndex == 2) {
                                text = '{c| ' + params.data + '个}';
                            } else if (params.dataIndex == 3) {
                                text = '{d| ' + params.data + '个}';
                            } else if (params.dataIndex == 4) {
                                text = '{e| ' + params.data + '个}';
                            } else {
                                text = '{f| ' + params.data + '个}';
                            }

                            return text;
                        },
                        rich: {
                            a: {
                                color: "#ff0000"
                            },
                            b: {
                                color: "#ff7700"
                            },
                            c: {
                                color: "#d8b66f"
                            },
                            d: {
                                color: "#dbbf2e"
                            },
                            e: {
                                color: "#61b4c5"
                            },
                            f: {
                                color: "#fff"
                            },
                        },
                        position: [350, -12],
                        show: true
                    }
                },
                data: echartY.value,
                z: 0,

            },

            {
                name: "外框",
                type: "bar",
                barGap: "-130%", // 设置外框粗细
                data: [10, 10, 10, 10, 10],

                barWidth: 29,
                itemStyle: {
                    normal: {
                        barBorderRadius: [0, 0, 0, 0],
                        color: "transparent", // 填充色
                        barBorderColor: "#3ecca7", // 边框色
                        barBorderWidth: 1, // 边框宽度

                    }
                },

                z: 2
            },
            {
                type: 'scatter',
                name: '条形',
                symbol: 'roundRect',
                symbolSize: [6, 14],
                symbolOffset: [3, -3],
                symbolKeepAspect: true,
                itemStyle: {
                    normal: {
                        color: "#3ecca7"
                    }
                },
                data: [10, 10, 10, 10, 10],
            }

        ]
    }
    myChart.setOption(option);
    window.onresize = function () {
        myChart.resize();
    };

}

watch(() => props.echartData, (newV, oldV) => {
  if(newV.length){
    category.value=newV
    echartY.value=newV.map((el:any)=>el.value)
    getOption()
  }
}, { immediate: true,  })

</script>

<style lang="less" scoped>
.dz_chart {
    position: relative;
    padding-top: 10px;
    height: 100%;

    .chartRef {
        width: 100%;
        height: 100%;
    }

}
</style>