Vue中 echarts响应式页面变化resize()

简介: Vue中 echarts响应式页面变化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()感谢大家的阅读

如碰到其他的问题 可以私下我 一起探讨学习

如果对你有所帮助还请 点赞 收藏谢谢~!

关注收藏博客 作者会持续更新…

相关文章
|
2月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
213 1
|
19天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
20 1
|
19天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
27 1
|
22天前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
19天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
46 0
|
2月前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
29 3
|
2月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
61 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
2月前
|
缓存 JavaScript UED
优化Vue的响应式性能
【10月更文挑战第13天】优化 Vue 的响应式性能是一个持续的过程,需要不断地探索和实践,以适应不断变化的应用需求和性能挑战。
37 2
|
2月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
2月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序