首页 前端知识 移动端echarts图表的自适应使用

移动端echarts图表的自适应使用

2024-06-21 00:06:53 前端知识 前端哥 360 57 我要收藏

多个图表写法

<div id="main" style="width: 100%; height: 260px"></div>

<div id="main2" style="width: 100%; height: 300px; margin-top: 20px"></div>
import * as echarts from "echarts";
import { brokenLineOptions } from "./echarts/broken-line"; // 单独的option
import { barGraphOption } from "./echarts/bar-graph"; // 单独的option

// 多个图表的重绘要用事件监听,否则只会作用于最后一个图表
methods:{
	  // 图表一
	 initEahcrts() {
      // 基于准备好的dom,初始化echarts实例
      // 在data里面定义myChart,方便写图表重绘
      this.myChart = echarts.init(document.querySelector("#main"));
      // 绘制图表
      this.myChart.setOption(brokenLineOptions, true);
    },
    chartResize() {
      this.myChart.resize({
        width: document.querySelector("#main").getBoundingClientRect().width,
      });
    },
    //图表二: 折线图
    initBrokenLine() {
      this.myChart2 = echarts.init(document.getElementById("main2"));
      this.myChart2.setOption(barGraphOption);
    },
    chartResize2() {
      this.myChart2.resize({
        width: document.querySelector("#main2").getBoundingClientRect().width,
      });
    },
},
  mounted() {
    this.initEahcrts();
    this.initBrokenLine();
    window.addEventListener("resize", this.chartResize);
    window.addEventListener("resize", this.chartResize2);
  },
重点:事件监听后要记得移除事件,因为是绑定在window上的
// 添加了监听事件记得要销毁
  beforeDestroy() {
    window.removeEventListener("resize", this.chartResize);
    window.removeEventListener("resize", this.chartResize2);
  },
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13057.html
标签
评论
发布的文章

jquery 笔记

2024-04-08 11:04:27

vue使用echarts报错解决

2024-07-10 22:07:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!