vue3使用echarts并封装echarts组件
vue3使用echarts并封装echarts组件
- 前言:
- 一、安装并导入echart
- 1.npm下载包
- 2.配置echarts
- 二、使用echarts
- 三、封装echarts为组件
前言:
本文使用的echarts版本为5.3.1,详细文档可见:
Echarts 官方文档
文中案例基于vue3编写,有关js部分使用的是"script setup"语法糖形式
一、安装并导入echart
1.npm下载包
npm i echarts --save
2.配置echarts
- 这里介绍使用 provide 和 injec 配置 echartst
- provide、injec 可以实现嵌套组件之间进行传递数据和方法
- 在父组件使用provide可向子代组件传递数据;子级组件使用inject来获取上级组件传递过来的数据
- 注:这两个函数都是在setup函数中使用的
在 app.vue 下
<script>
import { provide } from 'vue'
import * as echarts from 'echarts'
export default {setup() {provide('echarts', echarts)},
};
</script>
在子代组件,使用 inject 获取 echarts 后便可使用
<script setup>
import { inject } from "vue"
const echarts = inject("echarts")
</script>
二、使用echarts
这里举一个小例子:
<template><div class="echart" ref="chartDom"></div>
</template>
<script setup>
//按需导入需要用到的 vue函数 和echarts
import { ref, inject, onMounted } from "vue";
const echarts = inject("echarts");
//获取 dom 和 父组件数据 并定义"myChart"用于初始化图表
const chartDom = ref()
let myChart = null;
let option = reactive ({title: { text: "总用户量" },tooltip: {},xAxis: {data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],},yAxis: {},series: [{name: "用户量",type: "line",data: [5, 20, 36, 10, 10, 20],},],
})
//页面成功渲染,开始绘制图表
onMounted(() => {myChart = echarts.init(chartDom.value)myChart.setOption(props.option, true);
})
</script>
<style lang="scss" scoped>
.echart {width: 800px;height: 500px;
}
</style>
效果:
三、封装echarts为组件
echarts封装组件:
<template><div class="echart" ref="chartDom"></div>
</template>
<script setup>
//按需导入需要用到的 vue函数 和 echarts
import { ref, inject, onMounted, onBeforeUnmount, defineProps, watch } from "vue";
const echarts = inject("echarts");
//获取 dom 和 父组件数据 并定义"myChart"用于初始化图表
const chartDom = ref()
let myChart = null;
const props = defineProps({option: Object,
})
//重绘图表函数
const resizeHandler = () => {myChart.resize();
}
//设置防抖,保证无论拖动窗口大小,只执行一次获取浏览器宽高的方法
const debounce = (fun, delay) => {let timer;return function () {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {fun();}, delay);}
};
const cancalDebounce = debounce(resizeHandler, 500);
//页面成功渲染,开始绘制图表
onMounted(() => {//配置为 svg 形式,预防页面缩放而出现模糊问题;图表过于复杂时建议使用 CanvasmyChart = echarts.init(chartDom.value,null, {renderer:'svg'})// myChart = echarts.init(chartDom.value)myChart.setOption(props.option, true);//自适应不同屏幕时改变图表尺寸window.addEventListener('resize', cancalDebounce);
})
//页面销毁前,销毁事件和实例
onBeforeUnmount(() => {window.removeEventListener('resize', cancalDebounce)myChart.dispose()
})
//监听图表数据时候变化,重新渲染图表
watch(() => props.option, () => {myChart.setOption(props.option, true);
}, { deep: true })</script>
<style lang="scss" scoped>
.echart {width: 100%;height: 100%
}
</style>
- 上面的在不同屏幕大小下自适应重绘图表需在 flexible.js 的配置下才有效,有关 flexible 的配置可参考 “移动端与大屏幕自适应适配方案”
- 注:在调用该组件时需传入 option配置值 和 设置组件大小
提示:文章到此结束,文章仅为个人学习记录,若有不足还请大家指出。
vue3使用echarts并封装echarts组件相关推荐
- vue3中,echarts使用(四)02——柱状图之堆叠条形图-定制化 封装切换tag标签组件 封装title组件
vue3中,echarts使用(四)02--柱状图之堆叠条形图-定制化 & 封装切换tag标签组件 & 封装title组件 效果 代码 1.主页面 index.vue <temp ...
- 微信小程序封装echarts组件
下载echarts-for-weixin小程序组件,将ec-canvas文件夹放到小程序项目中 创建echarts组件 组件代码 <!-- com-chart/index.wxml --> ...
- 首页仪表盘echarts _封装万能表单组件
响应式布局 element -ui 找到layout布局 – 分栏间隔 gutter:间隔 span:列数 <el-row :gutter = "20"><el- ...
- 封装echarts china map geo实现dispatch触发geoSelect事件高亮显示某个省份和城市,并定义复杂样式
实现如下效果 用echarts geo类型的中国地图封装vue组件,具体的地图信息china.json传送门https://blog.csdn.net/qq_37860634/article/deta ...
- vue封装echarts示例
1.首先先弄明白vue怎么引入echarts示例,再弄封装echarts这个事情vue框架引入echarts示例 2.封装组件 pops是: 父组件通过v-bind向子组件传值,子组件通过props来 ...
- vue2项目中封装echarts地图的比较优雅的方式
以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇. 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排 ...
- 关于封装echarts的那些事
文章目录 前言 我希望这个echarts组件能设计成什么样 一.对使用echarts需要提前知道的知识 二.开始封装 1.封装思路及使用 2.灵活配置 3.代码实例 4.效果展示 总结 前言 每个开发 ...
- vue echarts饼图封装
// main.js引入echarts import * as echarts from 'echarts' 2.pie.js // 我是饼图 const echarts = require('ech ...
- vue3 - 仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件
仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件 element-ui 面包屑结构 <el-breadcrumb separator="/"&g ...
最新文章
- R语言使用magick包的image_write函数将已有图像以任何指定的格式导出保存到磁盘上(例如将原文将从png转化为jpeg)
- python复数类型-python复数类型
- 嵌入式C语言代码规范
- 【CV】多目标跟踪:监控领域你必须要了解的算法
- 安装LibreOffice和字体
- windows共享文件服务器迁移(NTFS权限,共享权限,磁盘配额迁移)
- Fiddler-004-配置过滤器之-域名过滤
- 不要轻易在数据库(尤其是线上数据库)执行,update、delete数据 !!!
- linux初学者-软件安装与管理篇
- WPS如何使参考文献对齐
- 海关179号出口清单报文CEB603Message描述规范
- C语言入门教程|| C语言 程序结构|| C语言 基本语法
- 超全!40000字 Matplotlib 实战
- 网络中超难的75道逻辑题及答案
- 三菱fx2n64mr说明书_三菱基本单元 FX2N-64MR-001
- PCI Option ROM 在UEFI中加载流程
- 免费集装箱号识别API免费集装箱信息识别,中国人工智能企业CIMCAI集装箱识别云服务全球4千企业用户,中国人工智能企业智慧港航
- 360 搜索、UC 浏览器已被多个应用市场下架
- STemwin图形库移植与运用(基于STM32)(完成QQ界面设计、局域网聊天)
- echarts学习1----格式整理以及地图入门