VUE3中echarts组件重复使用问题

（1）引入echarts组件库

import * as echarts from 'echarts'

（2）在setup()中定义绘制的内容
1、定义绘制函数drawchart()
2、通过document.getElementById('flod-operator')获取到'flod-operator'的DOM节点，此时获取到的是一整个DOM树。

setup(){

      
      const drawchart = () =>{
       
        let myChart = echarts.init(document.getElementById('flod-operator'));

        
  // 绘制图表
            myChart.setOption({
                xAxis: {
                data: [1,2,3,4,5,6,7,8,9,10],
                axisTick: {
                        show: false, //不显示坐标轴刻度线
                    },
                    axisLine: {
                        show: false, //不显示坐标轴线
                    },
                    type: "category",
                },
                yAxis:{
                type: 'value',
                max:1,
                min:0,
                // splitNumber: 5,
                axisLabel: { //坐标文字
                    color: '#151515',
                    formatter: function (value) {
                        return `${value}C`;
                    }
                },
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: false, //不显示坐标轴线
                },
                splitLine: {
                                lineStyle: {  //y轴分隔线样式设置
                                    color: '#E2E5ED',   //颜色
                                    type: '', //虚线
                                    opacity: 1,
                                }
                            }
                },
                grid: {
                    top:'10%',
                    left: '3%', //默认10%
                    right: '4%', //默认10%
                    bottom: '8%', //默认60
                    containLabel: true
                    //grid区域是否包含坐标轴的刻度标签
                },
                series: [
                {
                    name: "用户量",
                    type: "line",
                    data: [1,2,3,4,5,6,7,8,9,10],
                    symbolSize: 0
                }
                ]
            })
            
      }
        
    }

(3)vue3对echarts复用时会出现，只绘制了一张折线图的问题，该问题的出现是因为没有对dom的id进行分别。只需对dom上组件进行id的动态配置即可解决。