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