eachars 自适应

news/2024/7/7 5:47:29 标签: javascript, 前端, vue.js

目录

  1. 案例：

  2. 原因：

  3. 解决： 

1. 案例：

默认是正常宽度（如图1），当再次跳转会该页面时，eachars图发生变化（如图2）。

图1
图1
图2

2. 原因：

没有给eachars添加自适应。

3. 解决： 

在父组件中：

第一步：给包eachars的div 添加  ref="refName",引用依赖，如图3所示；

第二步：监听div大小的变化，从而实时计算后的宽、高(看下面的代码)，并把值传给子组件（IndexEcharts1.vue）

在子组件中：直接看代码

图3

 

 

父组件：

javascript">mounted（）{
  this.GetEqOutView();

}；
methods:{
GetEqOutView() {
      var elementResizeDetectorMaker = detectors
      // 创建实例，无参数
      var erd = elementResizeDetectorMaker();
      // 创建实例带参数
      var erdUltraFast = elementResizeDetectorMaker({
        strategy: "scroll",
        callOnAdd: true,
        debug: true
      });
      //监听id为test的元素 大小变化
      erd.listenTo(this.$refs.IndexEcharts1Div, (element) => {
        this.widthAndheight = {
          width: element.offsetWidth + "px",
          height: element.offsetHeight + "px",
        }
        // debugger
        console.log('实时计算后的宽、高 :::', this.widthAndheight.width, '------', this.widthAndheight.height, '-----------------');
        this.EQINDEX1 = {
          backgroundColor: "transparent",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          // 调整位置
          grid: {
            top: "0%",
            left: "4%",
            right: "4%",
            bottom: "4%",
            containLabel: true,
          },
          textStyle: {
            color: "#ffffff",
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisTick: {
                inside: true,
                lineStyle: {
                  color: "#1868a9",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#1868a9",
                },
              },
              data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
              ],
            },
          ],
          yAxis: [
            {
              type: "value",
              splitLine: {
                lineStyle: {
                  color: "#1868a9",
                },
              },
              axisLabel: {
                inside: true,
                verticalAlign: "bottom",
                formatter: function (value) {
                  return value + "次";
                },
              },
            },
          ],
          lineStyle: {
            normal: {
              color: "#31ad6b", // 线条颜色
            },
          },
        };
        this.EQINDEX1_SERIES = {
          series: [
            {
              name: "本年度",
              type: "line",
              smooth: true,
              lineStyle: {
                normal: {
                  color: "#31ad6b", // 线条颜色
                },
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      { offset: 0, color: "#58ce8f" },
                      { offset: 0.7, color: "rgba(61,234,255, 0)" },
                    ],
                    false
                  ),

                  shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                  shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              symbol: "none",
              data: [120, 132, 101, 134, 90, 230, 210, 155, 201, 185, 135, 160],
            },
          ],
        }
      });

    },
}

 子组件：

<template>
<div ref="init" id="left_top" :style="{
    'width': `${width}`,
    'height': '100%'
  }"></div>
</template>
<script>

export default {
  data() {
    return {
      m2R2Data: [],
      width: '',
      height: '',
      main: '',
    };
  },
  //父组件传过来的数据
  props: {
    seriesOpeion: [Array, Object],
    baseOption: [Array, Object],
    widthAndheight: [Array, Object]
  },
  computed: {
    changeData() {
      const { baseOption, seriesOpeion, widthAndheight } = this;
      return { baseOption, seriesOpeion, widthAndheight };
    },
  },
  created() {
  },
  mounted() {
    // 动态获取
    // this.height = window.getComputedStyle(this.$refs.init).height
    // this.width = window.getComputedStyle(this.$refs.init).width
    // debugger

    // this.$nextTick(() => {// 直接导入使用，也可以在main.js中引入
    //   var elementResizeDetectorMaker = detectors
    //   // 创建实例，无参数
    //   var erd = elementResizeDetectorMaker();
    //   // 创建实例带参数
    //   var erdUltraFast = elementResizeDetectorMaker({
    //     strategy: "scroll",
    //     callOnAdd: true,
    //     debug: true
    //   });
    //   //监听id为test的元素 大小变化
    //   erd.listenTo(this.$refs.init, (element) => {
    //     this.width = element.offsetWidth + "px";
    //     this.height = element.offsetHeight + "px";
    //   });
    // })
  },
  watch: {
    //#region 宽度
    // width: {
    //   handler(n, o) {
    //     if (this.myChars !== null) {
    //       // debugger

    //       // this.initData();
    //       // this.myChars.resize();
    //       // this.myChars.resize();
    //     }
    //   },
    // },
    //#endregion
    changeData(val) {
      // debugger
      this.width = val.widthAndheight.width
      this.height = val.widthAndheight.height
      console.log('父级传递宽度', val.widthAndheight.width, '------', val.widthAndheight.height)
      this.main = this.$refs.init;
      this.myChars = this.$echarts.init(this.main); //markRaw(this.$echarts.init(this.main)); //this.$echarts.init(this.main);
      this.SetEchars(val.baseOption, val.seriesOpeion);

      this.$nextTick(() => {
        this.myChars.resize()
      })
    },
  },
  methods: {
    //#region 旧
    init() {
      let _this = this;
      let res = {
        code: "200",
        msg: "查询成功",
        m2R2Data: [
          {
            value: 20,
            legendname: "油箱",
            name: "油箱",
            itemStyle: { color: "#ff5252" },
          },
          {
            value: 20,
            legendname: "油滤",
            name: "油滤",
            itemStyle: { color: "#ffac52" },
          },
          {
            value: 20,
            legendname: " 发动机",
            name: "发动机",
            itemStyle: { color: "#21b8ff" },
          },
        ],
      };
      // console.log("饼图数据=", res);
      _this.m2R2Data = res.m2R2Data;
      this.initData();
    },
    initData() {
      this.main = this.$refs.init//document.getElementById("left_top");

      this.myChars = this.$echarts.init(this.main);
      var option;
      option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        // 调整位置
        grid: {
          top: "0%",
          left: "4%",
          right: "4%",
          bottom: "4%",
          containLabel: true,
        },
        textStyle: {
          color: "#ffffff",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisTick: {
              inside: true,
              lineStyle: {
                color: "#1868a9",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#1868a9",
              },
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              lineStyle: {
                color: "#1868a9",
              },
            },
            axisLabel: {
              inside: true,
              verticalAlign: "bottom",
              formatter: function (value) {
                return value + "次";
              },
            },
          },
        ],
        lineStyle: {
          normal: {
            color: "#31ad6b", // 线条颜色
          },
        },
        series: [
          {
            name: "本年度",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                color: "#31ad6b", // 线条颜色
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: "#58ce8f" },
                    { offset: 0.7, color: "rgba(61,234,255, 0)" },
                  ],
                  false
                ),

                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            symbol: "none",
            data: [120, 132, 101, 134, 90, 230, 210, 155, 201, 185, 135, 160],
          },
        ],
      };
      option && this.myChars.setOption(option, true);
      // window.addEventListener("resize", function () {
      //   _this.myChars.resize(); //图表自适应的一个方法
      // });
    },
    //#endregion
    SetEchars(bOp, sOp) {
      console.log("进入SetEchars方法");
      this.options = Object.assign(bOp, sOp);
      this.myChars.setOption(this.options, true);
    },
  },


};
</script>
<style scoped>
.eachar01 {
  height: 100%;
}
</style>

ps:这些值是要在先定义的：

EQINDEX1: {},

EQINDEX1_SERIES: {},

widthAndheight: {},


http://www.niftyadmin.cn/n/4936949.html

相关文章

Markdown编辑器的使用

Markdown编辑器的使用

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…
阅读更多...
6939. 数组中的最大数对和

6939. 数组中的最大数对和

题目描述&#xff1a; 给你一个下标从 0 开始的整数数组 nums 。请你从 nums 中找出和 最大 的一对数&#xff0c;且这两个数数位上最大的数字相等。 返回最大和&#xff0c;如果不存在满足题意的数字对&#xff0c;返回 -1 。 示例&#xff1a; 解题思路&#xff1a; 使用数组…
阅读更多...
苹果cmsv11官网，最新版本v10下载

苹果cmsv11官网，最新版本v10下载

苹果CMS v10 是一款流行的内容管理系统&#xff0c;用于创建和管理网站。它具有丰富的功能和可定制的模块&#xff0c;旨在满足各种网站需求。 以下是一般情况下内容管理系统 (CMS) 的一些主要功能: 页面管理: 允许用户创建、编辑和发布网站页面&#xff0c;并提供简单易用的…
阅读更多...
Nodejs 第十一章（CSR SSR SEO）

Nodejs 第十一章（CSR SSR SEO）

概述 在上一章的时候我们说过在node环境中无法操作DOM 和 BOM&#xff0c;但是如果非要操作DOM 和 BOM 也是可以的我们需要使用第三方库帮助我们jsdom npm i jsdomjsdom 是一个模拟浏览器环境的库&#xff0c;可以在 Node.js 中使用 DOM API 简单案例 const fs require(no…
阅读更多...
2023-08-13 LeetCode每日一题（合并两个有序数组）

2023-08-13 LeetCode每日一题（合并两个有序数组）

2023-08-13每日一题 一、题目编号 88. 合并两个有序数组二、题目链接 点击跳转到题目位置 三、题目描述 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 …
阅读更多...
【ARM 嵌入式 编译系列 10.1 -- GCC 编译缩减可执行文件 elf 文件大小】

【ARM 嵌入式 编译系列 10.1 -- GCC 编译缩减可执行文件 elf 文件大小】

文章目录 上篇文章：ARM 嵌入式 编译系列 10 – GCC 编译缩减可执行文件 elf 文件大小 接着上篇文章 ARM 嵌入式 编译系列 10 – GCC 编译缩减可执行文件 elf 文件大小 的介绍，我们看下如何进一步缩小可执行文件test的大小。上篇文章通过 strip --strip-debug test 已经将 可…
阅读更多...
SpringCache的介绍和入门案例

SpringCache的介绍和入门案例

文章目录 概述常用注解入门案例 概述 Spring Cache是Spring框架提供的一个缓存抽象层&#xff0c;用于在应用程序中实现缓存的功能。它通过在方法执行前检查缓存中是否已经存在所需数据&#xff0c;如果存在则直接返回缓存中的数据&#xff0c;如果不存在则执行方法体&#xf…
阅读更多...
【运维】Zabbix简介及其应用领域

【运维】Zabbix简介及其应用领域

文章目录 1. Zabbix的背景与起源1.1. 监控工具的重要性为什么企业和个人需要监控工具&#xff1f;常见的监控挑战与需求 1.2. Zabbix的诞生背景Zabbix的发展历程Zabbix与其他监控工具的对比 2. Zabbix的核心功能2.1. 数据收集支持的数据收集方法数据的存储与历史记录 2.2. 可视…
阅读更多...
最新文章

Copyright @ 2022~2023