欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Vue3封裝一個(gè)通用echarts組件詳解

 更新時(shí)間：2024年02月19日 11:41:12   作者：weixin_43160044  
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝一個(gè)通用echarts組件詳解的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

實(shí)現(xiàn)這個(gè)組件需要引入echarts和vue-echarts插件，使用vue-echarts是因?yàn)樗鼛臀覀兎庋b了一些很常用的功能，比如監(jiān)聽(tīng)頁(yè)面resize后重新渲染功能，本次組件只使用到了autoresize配置，其它可以根據(jù)官方文檔按需選配

https://github.com/ecomfe/vue-echarts

首先引入echarts和vue-echarts插件

npm install echarts vue-echarts -S

組件定義參數(shù)如下

import type { ECBasicOption } from 'echarts/types/dist/shared'
 
const props = defineProps({
  // echarts options 傳參
  option: {
    type: Object as PropType<ECBasicOption>,
    required: true,
  },
  // 容器寬度
  width: {
    type: String,
    default: '100%',
  },
  // 容器高度
  height: {
    type: String,
    default: '400px',
  },
})

組件代碼如下

<script setup lang="ts">
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/components'
 
import 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 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>

到此這篇關(guān)于使用Vue3封裝一個(gè)通用echarts組件詳解的文章就介紹到這了,更多相關(guān)Vue3封裝通用echarts組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論