子组件使用echarts,让图表更新

1.定义容器

<template>
    <div style="display: flex;" v-if="props.billList">
        <!-- 饼状图容器 -->
        <div ref="pieChart" style="width: 32vw; height: 45vh"></div>
        <!-- 柱形图容器 -->
        <div ref="barChart" style="width: 32vw; height: 45vh"></div>
        <!-- 折线图容器 -->
        <div ref="lineChart" style="width: 32vw; height: 45vh"></div>
    </div>
</template>

2.导入所需

  import * as echarts from 'echarts';
    import { Ref } from 'vue';

3.初始化以及挂载

  const pieChart: Ref<HTMLElement | null> = ref();
    const barChart: Ref<HTMLElement | null> = ref();
    const lineChart: Ref<HTMLElement | null> = ref();

    const props = defineProps({
        billList: {
            type: Array,
            required: true
        },
    })
    //类别数据
    
    const categoryDataList =ref([])
    const pieChartInstance =ref(null)
    //金属材质
    const materList = ref([])
    const barChartInstance =ref(null)
    //主石材质
    const mainStoneList = ref([])
    const lineChartInstance =ref(null)

4.数据处理以及更新

  watch(() => props.billList, () => {
        // 数据处理
        categoryDataList.value = []
        //金属材质
        materList.value = []
        //主石材质
        mainStoneList.value = []
        if (props.billList.length) {
            props.billList.map(item => {
                // 检查 categoryDataList 中是否已存在相同的 category 属性名
                const existingIndex = categoryDataList.value.findIndex(data => data.name === item.category);
                if (existingIndex !== -1) {
                    // 如果已存在相同的 category 属性名，则将其值加一
                    categoryDataList.value[existingIndex].value += 1;
                } else {
                    // 如果不存在相同的 category 属性名，则将该项添加到 categoryDataList 数组中
                    categoryDataList.value.push({ name: item.category, value: 1 });
                }

                //金属材质
                const metalInfo = item.metalInfo ? JSON.parse(item.metalInfo) : null
                let material = ""
                if (metalInfo) {
                    material = metalInfo[0] != undefined || metalInfo[0] != null ? metalInfo[0].material : null
                }

                const existingIndex1 = materList.value.findIndex(data => data.name === material)
                if (existingIndex1 !== -1) {
                    materList.value[existingIndex1].value += 1
                } else {
                    materList.value.push({ name: material, value: 1 })
                }
                const mainInfo = item.mainStoneInfo ? JSON.parse(item.mainStoneInfo) : null
                let mainStone = ""
                if (mainInfo) {
                    mainStone = mainInfo[0] != undefined || mainInfo[0] != null ? mainInfo[0].material : null
                }


                console.log("====>", mainStone)
                const existingIndex2 = mainStoneList.value.findIndex(data => data.name === mainStone)
                if (existingIndex2 !== -1) {
                    mainStoneList.value[existingIndex2].value += 1
                } else {
                    mainStoneList.value.push({ name: mainStone, value: 1 })
                }

                return { categoryDataList, materList, mainStoneList }
            })
        }
    })

配置项

 const updateChart = () => {
        if (!pieChartInstance.value) return;
        pieChartInstance.value.setOption({
            title: {
                text: '类型饼状图',
                x: "center",
            },
            legend: {
                show: true,
                left: "7vw",
                orient: "vertical"
            },
            tooltip: {
                trigger: 'item'
            },
            series: {
                type: 'pie',
                data: categoryDataList.value.map(item => ({
                    name: item.name,
                    value: item.value
                })),
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10,
                },
                label: {
                    show: true,
                    position: 'outside',
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 14,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true,
                    length: 6,
                    length2: 17
                },

            },
        });


    }
    // 更新柱状图
    const updateBarChart = () => {
        // 更新柱状图的逻辑...
        if (!barChartInstance.value) return
        barChartInstance.value.setOption({
            title: {
                text: '金属材质柱形图',
                x: "center",
            },
            legend: {

                show: true,
                left: "7vw",
                orient: "vertical",
                itemStyle: {
                    color: "rgba(51, 103, 114, 1)"

                }
            },
            xAxis: {
                type: 'category',
                data: materList.value.map(item => item.name),
                name: "金属材质",
                offset: 14,
                // boundaryGap:false,
            },
            yAxis: {
                type: 'value',
                name: "数量"
            },
            series: [{
                data: materList.value.map(item => item.value),
                type: 'bar',
                name: "金属材质",
                realtimeSort: true,
                itemStyle: {
                    color: "rgba(51, 103, 114, 1)"
                }
            }],
        });
    };

    // 更新折线图
    const updateLineChart = () => {
        // 更新折线图的逻辑...
        if (!lineChartInstance.value) return
        lineChartInstance.value.setOption({
            title: {
                text: '主石折线图',
                x: "center",
            },
            legend: {
                show: true,
                left: "7vw",
                orient: "vertical"
            },

            xAxis: {
                type: 'category',
                data: mainStoneList.value.map(item => item.name),
                name: "主石材质",
                offset: 14,
                nameTextStyle: {
                    fontSize: "14px",
                }
            },
            yAxis: {
                type: 'value',
                name: "数量"
            },
            series: [{
                data: mainStoneList.value.map(item => item.value),
                type: 'line',
                itemStyle: {
                    color: "rgba(51, 103, 114, 1)"
                },
                name: "主石数量"
            }],
        });
    };