解決方案

<template><div :style="{ height: height, width: width }" /> </template><script lang="ts"> import { defineComponent } from 'vue'export default defineComponent({name: 'ECharts', }) </script><script lang="ts" setup> import * as echarts from 'echarts' import 'echarts/theme/macarons' import { debounce } from '@/utils/debounce' import {nextTick,onMounted,onUnmounted,shallowRef,getCurrentInstance,watchEffect, } from 'vue' import { EChartsType } from 'echarts'const instance = getCurrentInstance()const props = defineProps({options: {type: Object,required: true,},width: {type: String,default: '100%',},height: {type: String,default: '100%',}, })const chart = shallowRef<EChartsType>()const initChart = () => {if (instance) {chart.value = echarts.init(instance.proxy?.$el, 'macarons')chart.value?.setOption(props.options)} }const resizeHandler = debounce(() => {if (chart.value) {chart.value.resize()} }, 100)onMounted(() => {nextTick(() => {initChart()window.addEventListener('resize', resizeHandler)}) })onUnmounted(() => {if (!chart.value) {return}window.removeEventListener('resize', resizeHandler)chart.value.dispose()chart.value = undefined })watchEffect(() => {if (chart.value) {chart.value.setOption(props.options)} }) </script><style lang="scss" scoped></style>

Demo

<e-charts :options="options" height="300px" />

options 即 echarts 的options

參考文章

• https://echarts.apache.org/
• vue3封裝簡(jiǎn)易的vue-echarts
• vue-cli3整合echarts

總結(jié)

以上是生活随笔為你收集整理的Vue——整合EChart的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。