vent-template/src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine1.vue

<template>
    <div class="echartLine">
        <div class="line" ref="line"></div>
    </div>
</template>
  
<script lang="ts" setup>
import * as echarts from 'echarts'
import { ref, nextTick, reactive, watch, defineProps } from 'vue';
let props = defineProps({
    echartDataSg: {
        type: Object,
    }
})

//获取dom元素节点
let line = ref<any>()
let echartDataSgs = reactive({})
watch(() => props.echartDataSg, (data) => {
    echartDataSgs = Object.assign({}, data)
    getOption()
}, { immediate: true, deep: true })



function getOption() {
    nextTick(() => {
        const myChart = echarts.init(line.value)
        let option = {
            grid: {
                top: '8%',
                left: '5%',
                bottom: '14%',
                right: '5%',
                //   containLabel: true,
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(0, 0, 0, .6)',
                textStyle: {
                    color: '#fff',
                    fontSize: 12,
                },
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        // formatter: '{value}',
                        fontSize: 14,
                        margin: 10,
                        textStyle: {
                            color: '#b3b8cc',
                        },
                        // interval: 0,
                        formatter: function (params) {
                            let newParamsName = ref('')  // 最终拼接成的字符串
                            let paramsNameNumber = ref(params.length) // 实际标签的个数
                            let provideNumber = ref(10)  // 每行能显示的字的个数
                            let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber.value > provideNumber.value) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = '' // 表示每一次截取的字符串
                                    var start = p * provideNumber.value // 开始截取的位置
                                    var end = start + provideNumber.value // 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {
                                        // 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber.value)
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + '\n'
                                    }
                                    newParamsName.value += tempStr // 最终拼成的字符串
                                }
                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName.value = params
                            }
                            //将最终的字符串返回
                            return newParamsName.value
                        }

                    },
                    axisLine: {
                        lineStyle: {
                            color: '#244a94',
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#0d2973',
                            type: 'dashed',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: echartDataSgs.xData,
                },
            ],
            yAxis: [
                {
                    boundaryGap: false,
                    // name: '(%)',
                    type: 'value',
                    max: 50,
                    axisLabel: {
                        textStyle: {
                            color: '#b3b8cc',
                        },
                    },
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 12,
                        lineHeight: 2,
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#0d2973',
                            type: 'dashed',
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#244a94',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                },
            ],
            series: [
                {
                    name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
                    type: 'line',
                    smooth: false,
                    showSymbol: false,
                    symbolSize: 8,
                    zlevel: 3,
                    itemStyle: {
                        color: '#02f2de',
                        borderColor: '#a3c8d8',
                    },
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: '#02f2de',
                        },
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: 'rgba(2, 242, 222,0.8)',
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(2, 242, 222,0.4)',
                                    },
                                    {
                                        offset: 0.9,
                                        color: 'rgba(2, 242, 222,0)',
                                    },
                                ],
                                false
                            ),
                        },
                    },
                    data: echartDataSgs.yData,
                },
            ],
        }
        myChart.setOption(option)
        window.onresize = function () {
            myChart.resize()
        }
    })
}


</script>
  
<style scoped lang='less'>
.echartLine {
    width: 100%;
    height: 100%;

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