前言
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()感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
