网站关键词 分隔,网络编程课程,招聘网站html模板,seo运营专员实现这个组件需要引入echarts和vue-echarts插件#xff0c;使用vue-echarts是因为它帮我们封装了一些很常用的功能#xff0c;比如监听页面resize后重新渲染功能#xff0c;本次组件只使用到了autoresize配置#xff0c;其它可以根据官方文档按需选配
https://github.com/…实现这个组件需要引入echarts和vue-echarts插件使用vue-echarts是因为它帮我们封装了一些很常用的功能比如监听页面resize后重新渲染功能本次组件只使用到了autoresize配置其它可以根据官方文档按需选配
https://github.com/ecomfe/vue-echarts
首先引入echarts和vue-echarts插件
npm install echarts vue-echarts -S
组件定义参数如下
import type { ECBasicOption } from echarts/types/dist/sharedconst props defineProps({// echarts options 传参option: {type: Object as PropTypeECBasicOption,required: true,},// 容器宽度width: {type: String,default: 100%,},// 容器高度height: {type: String,default: 400px,},
})
组件代码如下
script setup langts
import { PropType, provide } from vue
import type { 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/componentsimport VChart, { THEME_KEY } from vue-echarts
use([CanvasRenderer,PieChart,TitleComponent,TooltipComponent,LegendComponent,GridComponent,LineChart,ToolboxComponent,FunnelChart,CustomChart,
])// 传入主题
provide(THEME_KEY, light)const props defineProps({option: {type: Object as PropTypeECBasicOption,required: true,},width: {type: String,default: 100%,},height: {type: String,default: 400px,},
})
/scripttemplatediv classchart-container :style{ width, height }VChart classw-full h-full :optionprops.option autoresize //div
/template
