vue3中使用echarts

安装

<template>
    <el-card>
        <div id="myChart"></div>
    </el-card>
</template>


<script lang="ts" setup>
import { onMounted,reactive,onBeforeMount } from 'vue';
import {drawBar} from '@/api/api.js'
 import * as echarts from 'echarts'   //这是全部进入了
import { method } from 'lodash';
 //按需引入如下

 /*
 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
*/
    onBeforeMount(() =>{
        drawBar().then( res =>{
             if(res.data.status ==200){
                console.log(res.data.data)
                let {legend,xAxis,series} = res.data.data   //解构赋值
                draw(legend,xAxis,series)
             }
        })
      })  

function  draw(legend,xAxis,series){
    let myChart = echarts.init(document.getElementById('myChart'))    
        
   let option =  {
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [{
              type: 'category',
              data: xAxis,
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          tooltip: {
                        trigger: 'axis'
                    },
          legend: {
                    data: legend
                },
          yAxis: [{
              type: 'value',
            },
          ],
          series: series
        }


        myChart.setOption(option)  // 绘制图表
}
</script>

<style>
#myChart{width: 100%;height: 500px;}
</style>