echarts 一个Echarts展示多个图表，共享一个图例，和提示

<template>
    <div class="chart-wrapper">
        <div ref="chartTarget" class="chart-target"></div>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import * as echarts from 'echarts'
import { getVisualization } from '@/api/visualization.js'

const chartTarget = ref(null)
onMounted(async () => {
    await loadData()
    renderChart1()
})

// 获取数据
let data = reactive([])
let abnormalDataList = reactive([])
let regionData = reactive([])
let serverData = reactive([])
let allList = reactive([])
let allListCopy = reactive([])
const loadData = async () => {
    data = await getVisualization()
    abnormalDataList = data.abnormalData.abnormals
    regionData = data.regionData.regions
    serverData = data.serverData.servers
    allList = [...abnormalDataList, ...regionData, ...serverData]
    // 深拷贝
    allListCopy = JSON.parse(JSON.stringify(allList));
}



const renderChart1 = () => {
    const chart = echarts.init(chartTarget.value)
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            // 格式化展示所有数据
            formatter: () => {
                let str = ''
                allListCopy.forEach(item => {
                    str += `<div>${item.name}：${item.value}</div>`
                })
                return str
            }
        },
        legend: {
            data: ['柱状', '雷达', '横柱'],
            right: '10', // 图例显示在底部
            pageButtonPosition: 'end'
        },
        grid: [
            {
                containLabel: true,
                height: '30%',
                top: 10,
                width: '70%',
            },
            {
                containLabel: true,
                height: '30%',
                top: '35%',
                width: '70%',
            },
            {
                containLabel: true,
                height: '30%',
                bottom: 0,
                width: '70%',
            }
        ],
        xAxis: [
            {
                type: 'category',
                data: abnormalDataList.map(item => item.name),
            },
            {
                type: 'category',
                data: regionData.map(item => item.name),
                gridIndex: 1,
            },
            {
                type: 'category',
                data: serverData.map(item => item.name),
                gridIndex: 2,
            }
        ],
        yAxis: [
            {
                type: 'value'
            },
            {
                type: 'value',
                gridIndex: 1,
            },
            {
                type: 'value',
                gridIndex: 2,
            }
        ],
        series: [
            // 空开电表
            {
                name: '柱状',
                type: 'line',
                data: abnormalDataList.map(item => ({
                    value: item.value,
                    name: item.name,
                    id: item.id,
                })),
                xAxisIndex: 0,
                yAxisIndex: 0
            },
            // 第二个折线图
            {
                name: '雷达',
                type: 'line',
                data: regionData.map(item => ({
                    value: item.value,
                    name: item.name,
                    id: item.id,
                })),
                xAxisIndex: 1,
                yAxisIndex: 1,
                gridIndex: 1,
            },
            {
                name: '横柱',
                type: 'line',
                data: serverData.map(item => ({
                    value: item.value,
                    name: item.name,
                    id: item.id,
                })),
                xAxisIndex: 2,
                yAxisIndex: 2,
                gridIndex: 2,
            }
        ]
    }
    chart.setOption(option)

    // 监听图例被点击
    chart.on('legendselectchanged', (params) => {
        // 获取被点击的图例的名称
        const selectedLegends = params.selected;
        // 获取为false的图例名称
        const falseItems = Object.entries(selectedLegends)
            .filter(([key, value]) => value === false)
            .map(([key, value]) => key);
        // 获取图例为false的数据
        const dataToRetrieve = option.series.filter(item => falseItems.includes(item.name));
        // 取出里面的data
        const extractedData = dataToRetrieve.map(item => item.data);
        // 合并成一个数组
        const mergedData = [].concat(...extractedData);
        // 对比获取不相同的数据
        const list = allList.reduce((result, item) => {
            const found = mergedData.some(data => (
                data.id === item.id &&
                data.name === item.name &&
                data.value === item.value
            ));

            if (!found) {
                result.push(item);
            }

            return result;
        }, []);
        // 赋值
        allListCopy = list
    });

}


</script>

<style>
.chart-wrapper {
    height: 100vh;
    padding: 10px;
}

.chart-target {
    height: 80vh;
    width: 90vw;
}
</style>