推荐一个好用的插件，vue-echarts

1.介绍

    这个插件好处就是可以帮我们在使用echarts的时候节省掉一些事情，比如浏览器窗口大小发生变化时需要根据resize事件重新渲染图表，数据发生变化时重新渲染图表等，这个插件都帮我们做好了这块

2.使用方法

    首先先安装这个插件

pnpm install echarts vue-echarts // 如果是npm就使用npm

    如果是vue2的话还需要安装这个插件

pnpm i -D @nuxtjs/composition-api

用法的话我推荐是根据这个插件进行二次封装，作为一个通用组件，并且不建议作为全局组件，在需要的界面使用即可
一般的话使用autoresize属性，数据改变的时候直接改变option里的数据即可满足我们的日常需求

<script setup lang="ts">
import { PropType, provide } from 'vue'
import { ECBasicOption } from 'echarts/types/dist/shared'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
// 如果使用时发现有哪个图表没有显示，可以在控制台查看报错，它会提示你需要引入哪个组件
import { PieChart, LineChart, FunnelChart, CustomChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
} from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  LineChart,
  ToolboxComponent,
  FunnelChart,
  CustomChart,
])
// echarts的主题 light和dark
provide(THEME_KEY, 'light')

const props = defineProps({
  option: {
    type: Object as PropType<ECBasicOption>,
    required: true,
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '400px',
  },
})
</script>

<template>
  <div class="chart-container" :style="{ width, height }">
    <VChart class="w-full h-full" :option="props.option" autoresize />
  </div>
</template>

如果有其它需要的话可以查看插件文档
vue-echarts