关于Vue中echarts响应式页面变化resize()的用法介绍
更新时间：2023年06月15日 09:57:54 作者：下一站丶
Vue项目中开发数据大屏，使用echarts图表根据不同尺寸的屏幕进行适配，resize()可以调用echarts中内置的resize函数进行自适应缩放，本文将给大家详细介绍resize()的用法,需要的朋友可以参考下
前言
Vue项目中开发数据大屏，使用echarts图表根据不同尺寸的屏幕进行适配
BUG：当页面进行缩放时图表大小没有变化
- 使用到的方法：
resize() 调用echarts中内置的resize函数进行自适应缩放，然后添加监控，页面销毁时删掉，避免不必要内存占用 - 我们先看一下官方文档怎么说resize官网
- 响应的原理：需要手动调用 resize 方法获取正确的高宽并且刷新画布
亿点小知识：可以在opts 中显示指定图表高宽 - 实战 vue3.0
1.创建容器
<div ref="myChart" style="width:100%;height:100%"></div>
2.创建echarts
先创建一个 echartsLine.ts 文件
import { EChartsOption } from "echarts";
const exportFuns = (): EChartsOption => {
return {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
};
export const EchartsLineConsumption = exportFuns();在容器组件里面应用echartsLine.ts 文件
<script lang="ts" setup>
import { ref, onMounted, markRaw } from "vue";
import * as echarts from "echarts";
import { EchartsLineConsumption } from "@/config/echartsLine";
const myChart = ref<any>(); // 获取元素实例
const line = ref<any>(null); // 获取echarts
onMounted(() => {
init();
});
const init = ()=>{
line.value = markRaw(echarts.init(myChart.value));
line.value.setOption(EchartsLineConsumption);
}
</script>3.进行响应式页面变化.resize()
onMounted(() => {
// 只要窗口大小发生像素变化就会触发
window.addEventListener("resize", () => {
line.value.resize(); // 窗口发生改变就更新echarts
});
init();
});4.需要进行销毁实例优化性能
onUnmounted(() => {
// 卸载echarts实例
line.value.dispose();
window.removeEventListener("resize", line.value);
});以上就完成了 Vue中 echarts响应式页面变化
接下来总结了一下echarts的一些常用知识
- 在饼图中间添加文字
1.富文本 比较麻烦
2.在series的label中
type: "pie",
radius: ["47%", "57%"], // 让饼图中间为空心状
label: {
show: true,
position: "center",
formatter: "中间圆心内容",
fontSize: '18px',
},- 让图表占满容器
使用grid属性
grid: {
// 让图表占满容器
left: 0,
right: 0,
bottom: 0,
containLabel: true,
},- 自定义移入样式
marker属性
tooltip: {
position: "top",
show: true,
formatter: (params) => {
//只有“直接访问”使用大标签，其他都使用小标签
return `$标题<br/>${params.marker}`;//marker 图标
},
// extraCssText:'width:60px;white-space:pre-wrap'
},- legend显示和位置
bottom和left调整位置
circle:：让前面显示的为圆形
itemGap：显示之间的间距
legend: {
orient: "horizontal",
bottom: '5px',
left: "left",
icon: "circle",
itemGap: 2,
},以上就是echarts响应式页面变化.resize()感谢大家的阅读
到此这篇关于关于Vue中echarts响应式页面变化resize()的用法介绍的文章就介绍到这了,更多相关Vue页面变化resize()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vuepress实现自定义首页的样式风格，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
今天小编就为大家分享一篇使用vuex存储用户信息到localStorage的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)
这篇文章主要介绍了vue3.0 移动端二次封装van-uploader上传图片组件,此功能最多上传6张图片，并可以实现本地预览，实现代码简单易懂，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Vue前端整合Element Ui,本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue router 配置路由的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
在 Vue.js 中,组件是构建应用程序的基本单位,然而,当你的应用程序变得复杂时,组件之间的通信变得至关重要,本文将介绍几种 Vue 组件之间通信的方式,帮助你更好地管理和组织代码,感兴趣的朋友一起看看吧2024-06-06
本篇文章主要介绍了Vue.js写一个SPA登录页面过程的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了vue中上传视频或图片或图片和文字一起到后端的解决方法，需要的朋友可以参考一下2019-12-12
这篇文章主要介绍了antdv的table因数据量过大导致的卡顿问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结
这篇文章主要给大家介绍了关于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他们之家的区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
最新评论