電商網(wǎng)站建設(shè)與運營/網(wǎng)站管理
實現(xiàn)這個組件需要引入echarts和vue-echarts插件,使用vue-echarts是因為它幫我們封裝了一些很常用的功能,比如監(jiān)聽頁面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>