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

<template>
    <div class="dz-dust">
        <div ref="chartDust" class="chartDust"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';

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

//获取dom元素节点
let chartDust = ref<any>();
let xData = ref<any[]>([])
let yData = ref<any[]>([])

function getOption() {
    nextTick(() => {
        let myChart = echarts.init(chartDust.value);
        const offsetX = 8;
        const offsetY = 4;

        const colorList = [
            ['rgba(63, 124, 136, 1)', 'rgba(77, 193, 211, 1)'],
            ['rgba(145, 129, 47, 1)', 'rgba(211, 184, 46, 1)'],
            ['rgba(159, 121, 69, 1)', 'rgba(226, 173, 101, 1)'],
            ['rgba(163, 90, 25, 1)', 'rgba(240, 114, 4, 1)'],
            ['rgba(158, 13, 13, 1)', 'rgba(239, 2, 2, 1)'],
        ]
        // 绘制左侧面
        const CubeLeft = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0,
            },
            buildPath: function (ctx, shape) {
                const xAxisPoint = shape.xAxisPoint;
                const c0 = [shape.x, shape.y];
                const c1 = [shape.x - offsetX, shape.y - offsetY];
                const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                const c3 = [xAxisPoint[0], xAxisPoint[1]];
                ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
            },
        });
        // 绘制右侧面
        const CubeRight = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0,
            },
            buildPath: function (ctx, shape) {
                const xAxisPoint = shape.xAxisPoint;
                const c1 = [shape.x, shape.y];
                const c2 = [xAxisPoint[0], xAxisPoint[1]];
                const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                const c4 = [shape.x + offsetX, shape.y - offsetY];
                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
            },
        });
        // 绘制顶面
        const CubeTop = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0,
            },
            buildPath: function (ctx, shape) {
                const c1 = [shape.x, shape.y];
                const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                const c3 = [shape.x, shape.y - offsetX];
                const c4 = [shape.x - offsetX, shape.y - offsetY];
                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
            },
        });
        // 注册三个面图形
        echarts.graphic.registerShape('CubeLeft', CubeLeft);
        echarts.graphic.registerShape('CubeRight', CubeRight);
        echarts.graphic.registerShape('CubeTop', CubeTop);
        let option = {
            tooltip: {
                trigger: 'item',
            },
            grid: {
                top: "12%",
                left: "5%",
                right: "5%",
                bottom: "5%",
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                data: xData.value,
                // X
                axisLine: {
                    show: true,
                    lineStyle: {
                        // width: 1,
                        color: 'rgba(34, 55, 81,.7)',
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    fontSize: 14,
                    interval: 0,
                    textStyle: {
                        color: '#FFF',  //更改坐标轴文字颜色
                        fontSize: 12     //更改坐标轴文字大小
                    }
                },
            },


            yAxis: {
                name: '',
                type: 'value',
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        // type: 'dashed',
                        color: 'rgba(34, 55, 81,.7)',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    fontSize: 14,
                    textStyle: {
                        color: '#FFF',  //更改坐标轴文字颜色
                        fontSize: 12     //更改坐标轴文字大小
                    }
                },

            },
            series: [
                // 柱体
                {
                    name: '',
                    type: 'custom',
                    stack: "Ad",
                    renderItem: (params, api) => {
                        const location = api.coord([api.value(0), api.value(1)]);
                        return {
                            type: 'group',
                            x: 1,
                            children: [
                                {
                                    type: 'CubeLeft',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0]),
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: colorList[params.dataIndex][0],
                                            },
                                            {
                                                offset: 1,
                                                color: colorList[params.dataIndex][1],
                                            },
                                        ]),
                                    },
                                },
                                {
                                    type: 'CubeRight',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0]),
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: colorList[params.dataIndex][0],
                                            },
                                            {
                                                offset: 1,
                                                color: colorList[params.dataIndex][1],
                                            },
                                        ]),
                                    },
                                },
                                {
                                    type: 'CubeTop',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0]),
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: colorList[params.dataIndex][0],
                                            },
                                            {
                                                offset: 1,
                                                color: colorList[params.dataIndex][1],
                                            },
                                        ]),
                                    },
                                },
                            ],
                        };
                    },
                    data: yData.value,
                },
                {
                    type: "bar",
                    label: {
                        normal: {
                            show: true,
                            position: "top",
                            formatter: (e) => {
                                return e.value + "次";
                            },
                            fontSize: 12,
                           color:'#fff',
                            offset: [0, -6],
                        },
                    },
                    itemStyle: {
                        color: "transparent",
                    },
                    tooltip: {},
                    data: yData.value,
                },
            ],
        };
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize();
        };
    });
}

watch(() => props.paramData, (newV, oldV) => {
    xData.value = newV.map((el: any) => el.name)
    yData.value = newV.map((el: any) => el.value)
    getOption()
}, { immediate: true })


</script>

<style lang="less" scoped>
.dz-dust {
    position: relative;
    height: 100%;

    .chartDust {
        width: 100%;
        height: 100%;
    }
}
</style>