echarts封装resize函数

最新推荐文章于 2024-07-26 15:20:05 发布

每天吃饭的羊

最新推荐文章于 2024-07-26 15:20:05 发布

阅读量277

点赞数

分类专栏： # 前端基础文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/m0_47999208/article/details/134427257

版权

前端基础专栏收录该内容

36 篇文章 0 订阅

订阅专栏

文章描述了一个如何在Vue组件中使用mixins方法处理窗口大小改变时，使ECharts图表自动调整大小的示例。开发者在util/resizeMixin.js中定义了resize事件监听器，并在具体页面中混入该mixin，确保图表在页面尺寸变化时能正确响应。

摘要由CSDN通过智能技术生成

我这里使用了mixins的方法；

在 util/resizeMixin.js

export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
        setTimeout(()=>{
            this.chart.resize();
        },300)
        // const width = window.innerWidth;
        // const height = window.innerHeight;
        // console.log(`窗口宽度: ${width}px, 窗口高度: ${height}px`);
      },
  },
};

在具体的页面写

<template>
  <div class="secondLine">
    <div id="typeError" style="width: 650px; height: 250px"></div>
  </div>
</template>
<script>
import ResizeHandler from "@/util/resizeMixin";
import echarts from "echarts";
export default {
  data() {
    return {
      options: {},
    };
  },
  mixins: [ResizeHandler],
  mounted() {
    this.drawnLine();
  },
  methods: {
    drawnLine() {
      this.chart = echarts.init(document.getElementById("typeError"));
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "20%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // data: ["T01", "T02", "T03", "T04", "T05", "T06", "T07"],
            data: [
              "参数超限",
              "燃弧异常",
              "受电弓异常",
              "温度超限",
              "线磨耗超限",
              "悬挂异常",
              "接触力超限",
              "硬点异常",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "white",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#305583",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "white",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: "30%",
            data: [990, 552, 500, 334, 903, 330, 720, 600],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#94C2FD",
                  },
                  {
                    offset: 1,
                    color: "#5B8FF9",
                  },
                ]),
                barBorderRadius: 11,
              },
            },
          },
        ],
      });
      this.chart.resize();
    },
  },
};
</script>
<style scoped>
.secondLine {
  display: flex;
  justify-content: center;
}
</style>