echarts初始化时,必须给其绑定的元素设置宽高,否则echarts会初始化失败。 举例 <template></template>import*as echarts from'echarts'; import { onMounted, ref } from'vue'; const barChart=ref<HTMLElement>(); const myChart1=ref<any>();//绘制柱形图functioninitBarEcharts() { myChart1.value=e...
vue3+ts 封装 echarts ,监听屏幕变动更新图表 创建组件 <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"r...
src/components下新建chart文件夹,并在其下新建index.vue,封装如下 import{ onMounted, getCurrentInstance, defineExpose, ref }from'vue' defineOptions({ name:'WChart' }) // defineExpose 让父组件可调用此方法 defineExpose({ setData }) // 组件传参 constprops =defineProps({ width: { type:String,//...
闲时基于上次封装的图表组件做了一层优化,话不多说,直接上代码吧 Step-1: 新建一个config.ts文件 export const config = { labelKey: "name", valueKey: "value", }; export type chartDataItemType = { [key: string]: string | number; }; // 当前支持显示的图表类型(折线,柱形) export type cha...
Echarts还是要封装的,不然每次用都定义一堆,封装后我们只需要使用的时候传入options的参数就可以了! (1)引入Echarts,这样你在组件中使用就不用每次都import了 使用provide和inject这对,在App.vue中添加 import { provide } from 'vue' import * as echarts from 'echarts' provide('echarts', echarts)...
shims-vue.d.ts是为了 typescript 做的适配定义⽂件，因为.vue ⽂件不是⼀个常规的⽂件类型，ts 是不能理解 vue ⽂件是⼲嘛的，加这⼀段是是告诉 ts，vue ⽂件是这种类型的。这⼀段删除，会发现 import 的所有 vue 类型的⽂件都会报错。/** * shims-vue.d.ts的作⽤ * 为了 type...
在src/utils下新建resize.ts import { ref } from 'vue'; export default function () { const chart = ref<any>(); const sidebarElm = ref<Element>(); const chartResizeHandler = () => { if (chart.value) { chart.value.resize(); } }; const sidebarResizeHandler = (e: TransitionEvent)...
shims-vue.d.ts是为了 typescript 做的适配定义文件,因为.vue 文件不是一个常规的文件类型,ts 是不能理解 vue 文件是干嘛的, 加这一段是是告诉 ts,vue 文件是这种类型的。 这一段删除,会发现 import 的所有 vue 类型的文件都会报错。 /** * shims-vue.d.ts的作用 ...
前言:随着vue2官宣年底停止维护不在提供解决问题的帮助后,vue3+ts+vite大家已经都开始用了,最近也在学习,并结合DataV和Echarts搭建了一个数据大屏,多端自适应,拿来即用! 1.使用vite构建一个vue3项目 npm create vite@latest Project name:你的项目名; ...
import echarts from "@/utils/custom/echart" let tChart: Ref<HTMLDivElement | null> = ref(null) const initEchart = () => { const dom = tChart.value if (dom) { let myChart = echarts.init(dom) myChart.setOption(option) } } defineExpose({ initEchart }) 关于import echarts from ...