一、封装echart图标钩子 首先应用我们之前学习的钩子方式,在hooks目录下创建一个名为 useECharts.js 的文件,用于封装 ECharts 的逻辑: import{ref,onMounted,onUnmounted}from'vue';import*asechartsfrom'echarts';exportdefaultfunctionuseECharts(chartContainer,options){constchartInstance=ref(null);onMounted(()=>...
exportdefaultecharts; 2. 新建newChart.js文件封装用法 import{ nextTick, onMounted, onUnmounted, unref }from"vue"; importechartsfrom"./echartsLib.js"; import{SVGRenderer,CanvasRenderer}from"echarts/renderers"; exportdefaultfunctionnewChart( elRef, autoChartSize =false, animation =false, theme ="...
npm install echarts --save 或者 bash yarn add echarts 2. 创建ECharts配置项的封装文件 在Vue项目的src目录下创建一个新的文件夹(例如charts),并在其中创建一个用于封装ECharts配置项的文件(例如echartsConfig.js)。 在echartsConfig.js中,你可以定义不同的配置项函数,每个函数返回一个配置对象。例如: ...
echart资源按需引入 第三方组件引入(echarts-liquidfill,水波纹图表) /* 即下文中的 @/modules/echartPlugin */ // https://echarts.apache.org/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6 import*asechartsfro...
封装的Echarts组件,可复现对应报错bug 组件二次封装Echarts代码 <template> </template> import { watch, onMounted, onBeforeUnmount, ref, shallowRef } from "vue"; import * as echarts from "echarts"; import debounce from 'lodash/debounce' const props = defineProps({ h: { type: String, ...
闲时基于上次封装的图表组件做了一层优化,话不多说,直接上代码吧Step-1: 新建一个config.ts文件 {代码...} Step-2: 新建一个index.vue文件 {代码...} Step-...
(event:any)=>props.onClick&&props.onClick(event)//初始化图表constinit=()=>{if(!chartRef.value)returnchartInstance.value=echarts.getInstanceByDom(chartRef.value)if(!chartInstance.value){chartInstance.value=markRaw(echarts.init(chartRef.value,chalk,{renderer:props.renderer}))chartInstance.value....
一、vue-echarts echarts官方专门为vue做的封装。 github vue-echarts 在vue3中使用: vue3中使用vue-echarts 1、安装 $ npm install echarts vue-echarts 2、使用 main.js import{createApp}from'vue'importEChartsfrom'vue-echarts'import{use}from"echarts/core";// 手动引入 ECharts 各模块来减小打包...
> |__ public 页面图标> |__ src 配置> | |__ api 接口目录> | | |__login.ts 登录接口> | |__ assets 静态资源(背景图片,svg图标)> | | |__ big 大屏背景图片> | | |__ icons svg图标> | | |__ login 登录背景图> | |__ components 封装组件库> | | |__ chart (echarts)图表...
npm install countup.js 下载安装echarts npm install echarts 本总结是基于vue3中使用echarts5 以及 利用ts对echart组件进行封装的一系列操作,本总结代码均为截图,私心希望读者和作者都能亲自实践代码,拒绝copy。 那么废话少说,开始上代码 1. 统计分析页面(dashboard.vue)使用element栅格进行布局 ...