vue——整合echart -凯发k8官方网

凯发k8官方网的解决方案

<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

总结

以上是凯发k8官方网为你收集整理的vue——整合echart的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。