1.封装 echarts 组件 1.安装 echarts 所需 npm 包,如下。 npm i echarts@5.4.3 npm i echarts-liquidfill@3.1.0 //社区图等 npm i @vueuse/core@10.7.1 //一些好用的hook 2.封装 echarts
在Vue3中封装ECharts图表可以提高代码的可复用性和可维护性。以下是一个详细的步骤指南,包括环境准备、基本封装、高级封装以及常见问题处理。 一、环境准备 创建Vue3项目: 如果你还没有Vue3项目,可以使用以下命令快速创建一个: bash npm init vue@latest 安装ECharts: 进入项目目录并安装ECharts: bash cd your-...
}from"echarts/components"; // 引入标签自动布局、全局过渡动画等特性 import { LabelLayout }from"echarts/features"; // 引入 Canvas 渲染器,必须 import { CanvasRenderer }from"echarts/renderers"; import type { ComposeOption }from"echarts/core"; // 通过 ComposeOption 来组合出一个只有必须组件和...
import { echarts } from '@/plugins/echarts'; import type { EChartsInitOpts } from 'echarts'; interface ConfigProps { /** * init函数基本配置 * @see https://echarts.apache.org/zh/api.html#echarts.init */ echartsInitOpts?: EChartsInitOpts; } export const useEcharts = ( dom: Ref...
export default echarts; 基本封装 DOM结构和实例化 import { Ref, onMounted, onBeforeUnmount } from "vue"; import { type EChartsType } from "echarts/core"; interface Props { option: ECOption; theme?: Object | string; // 主题 }
一般实战开发,图表的option我们会单独封装一个文件,option的配置一般比较长,影响开发浏览体验。这里只做示例,放在一块。 <template><!-- 动态数据更新 --><EChartsWrapper ref="chartComponent" :option="chartOption" /><!-- 操作按钮 -->更新数据调整尺寸导出图表</template>import { ref } from 'vue';...
onBeforeUnmount: 在组件卸载前,我们销毁 ECharts 实例,以防止内存泄漏。 props: 我们通过props接收父组件传递的图表配置项。 2.3 使用组件 在父组件中使用ECharts组件: <template><ECharts:options="chartOptions"/></template>importEChartsfrom'./components/ECharts.vue';exportdefault{components: {ECharts, }...
ECharts 实例的类型 let myChart: echarts.ECharts | null = null 1. 默认生成随机 id id: { type: String, default: () => Math.random().toString(36).substring(2, 8) }, 1. 2. 3. 4. 深度监听图表配置的改变 watch( props.option, ...
创建组件 <template></template>import{ref,onMounted,onBeforeUnmount,watch,computed,markRaw,nextTick}from"vue"importechartsfrom"./types"import{useDebounceFn}from"@vueuse/core"importchalkfrom"./chalk.json"interfaceProps{option:anyrenderer?:"canvas"|"svg"resize?:booleantheme?:Object|stringwidth?:number...