gasInjection-project/src/views/vent/gas/gasAnalysis/components/echartBox.vue

<template>
    <div class="echartBar">
        <div class="bar" ref="bar"></div>
    </div>
</template>

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

let props = defineProps({
    gridV: {
        type: Object,
        default: () => {
            return {
                left: '2%',
                right: '4%',
                bottom: '14%',
                top: '16%',
                containLabel: true
            }
        }
    },
    legendV: {
        type: Object,
        default: () => {
            return {}
        }
    },
    xData: {
        type: Array,
        default: () => {
            return []
        }
    },
    maxY: {
        type: String,
        default: '100'
    },
    datazoomShow: {
        type: Boolean,
        default: false,
    },
    yData1: {
        type: Array,
        default: () => {
            return []
        }
    },
    yData2: {
        type: Array,
        default: () => {
            return []
        }
    },
    typeV: {
        type: String,
        default: 'bar',
    }
});
//获取dom元素节点
let bar = ref<any>();
let legendD = reactive({})
function getOption() {
    nextTick(() => {
        let myChart = echarts.init(bar.value);
        let option = {
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0, 0, 0, .6)',
                textStyle: {
                    color: '#fff',
                    fontSize: 12,
                },
            },
            grid: props.gridV,
            legend: legendD || {},
            xAxis: {
                type: 'category',
                data: props.xData || [],
                axisLine: {
                    lineStyle: {
                        color: 'rgba(36, 71, 76,1)'

                    }
                },
                axisLabel: {
                    interval: 'auto',
                    fontSize: 14,
                    rotate: 0,
                    textStyle: {
                        color: '#fff',
                        fontFamily: 'Microsoft YaHei'
                    }
                },
            },

            yAxis: {
                type: 'value',
                max: props.maxY,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'white'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(36, 71, 76,.6)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },
                    formatter: '{value}',
                },
            },
            // "dataZoom": [{
            //     "show": props.datazoomShow,
            //     "height": 12,
            //     "xAxisIndex": [
            //         0
            //     ],
            //     bottom: '8%',
            //     "start": 10,
            //     "end": 90,
            //     handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            //     handleSize: '110%',
            //     handleStyle: {
            //         color: "#d3dee5",

            //     },
            //     textStyle: {
            //         color: "#fff"
            //     },
            //     borderColor: "#90979c"
            // }, {
            //     "type": "inside",
            //     "show": true,
            //     "height": 15,
            //     "start": 1,
            //     "end": 35
            // }],
            series: [{
                name: legendD['data'][0],
                type: props.typeV || '',
                barWidth: '10%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#fccb05'
                        }, {
                            offset: 1,
                            color: '#f5804d'
                        }]),
                        barBorderRadius: 12,
                    },
                },
                data: props.yData1 || []
            },
            {
                name: legendD['data'][1],
                type: props.typeV || '',
                barWidth: '10%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#8bd46e'
                        }, {
                            offset: 1,
                            color: '#09bcb7'
                        }]),
                        barBorderRadius: 12,
                    }

                },
                data: props.yData2 || []
            },
            ]
        };
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize();
        };
    });
}

watch(() => props.legendV, (newV, oldV) => {
    if (JSON.stringify(newV) != '{}') {
        legendD = Object.assign({}, newV)
        getOption()
        console.log(legendD, 'legendD')
    }
}, {
    immediate: true,
})
watch(() => props.yData1, (newY, oldY) => {
    getOption()
}, { immediate: true })
onMounted(() => {

})
</script>

<style scoped lang="less">
.echartBar {
    width: 100%;
    height: 100%;

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