Vue——整合EChart

解决方案

<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封装简易的vue-echarts
• vue-cli3整合echarts

总结

以上是生活随笔为你收集整理的Vue——整合EChart的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。