vue+element項目中對echarts圖表隨着瀏覽器窗口resize的處理

原創 duansamve 2020-06-16 12:12

知識點：

mixins、ref、$refs、element響應式佈局

準備工作：

1、項目中安裝echarts：

cnpm i echarts -S

2、在main.js中引入echarts：

import echarts from 'echarts'
// 在原型鏈中註冊，然後在需要的頁面調用：this.$echarts
Vue.prototype.$echarts = echarts

實現方式：

1、普通方式：

實現該功能的單文件組件爲：chart.vue

<template>
  <el-row>
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <div ref="myChart1" style="height: 300px;"></div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <div ref="myChart2" style="height: 300px;"></div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      AreaPiecesChart: null,
      electricityChart: null
    };
  },
  methods: {
    drawAreaPieces() {
      this.AreaPiecesChart = this.$echarts.init(
        this.$refs.myChart1
      );

      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"]
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: "rgba(0, 180, 0, 0.5)"
            },
            {
              gt: 5,
              lt: 7,
              color: "rgba(0, 180, 0, 0.5)"
            }
          ]
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "green",
              width: 5
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
            },
            areaStyle: {},
            data: [
              ["2019-10-10", 200],
              ["2019-10-11", 400],
              ["2019-10-12", 650],
              ["2019-10-13", 500],
              ["2019-10-14", 250],
              ["2019-10-15", 300],
              ["2019-10-16", 450],
              ["2019-10-17", 300],
              ["2019-10-18", 100]
            ]
          }
        ]
      };

      this.AreaPiecesChart.setOption(option);
    },
    drawElectricity() {
      this.electricityChart = this.$echarts.init(
                this.$refs.myChart2
      );

      let option = {
        title: {
          text: "一天用電量分佈",
          subtext: "純屬虛構"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "01:15",
            "02:30",
            "03:45",
            "05:00",
            "06:15",
            "07:30",
            "08:45",
            "10:00",
            "11:15",
            "12:30",
            "13:45",
            "15:00",
            "16:15",
            "17:30",
            "18:45",
            "20:00",
            "21:15",
            "22:30",
            "23:45"
          ]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} W"
          },
          axisPointer: {
            snap: true
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: "green"
            },
            {
              gt: 6,
              lte: 8,
              color: "red"
            },
            {
              gt: 8,
              lte: 14,
              color: "green"
            },
            {
              gt: 14,
              lte: 17,
              color: "red"
            },
            {
              gt: 17,
              color: "green"
            }
          ]
        },
        series: [
          {
            name: "用電量",
            type: "line",
            smooth: true,
            data: [
              300,
              280,
              250,
              260,
              270,
              300,
              550,
              500,
              400,
              390,
              380,
              390,
              400,
              500,
              600,
              750,
              800,
              700,
              600,
              400
            ],
            markArea: {
              data: [
                [
                  {
                    name: "早高峯",
                    xAxis: "07:30"
                  },
                  {
                    xAxis: "10:00"
                  }
                ],
                [
                  {
                    name: "晚高峯",
                    xAxis: "17:30"
                  },
                  {
                    xAxis: "21:15"
                  }
                ]
              ]
            }
          }
        ]
      };
      this.electricityChart.setOption(option);
    },
    chartResize(){
        let eleArr = [this.AreaPiecesChart, this.electricityChart];
        for(let i = 0; i<eleArr.length; i++){
          //此處定時器是爲了在頁面存在多個圖時，resize方法的調用時間微微錯開，避免明顯的卡頓
          setTimeout(function(){
              eleArr[i].resize();
          }, 200);
        }
    }
  },
  mounted() {
    this.drawAreaPieces();
    this.drawElectricity();
    //注：此處要用addEventListener,如果用 window.onresize = function(){},如果別的組件也用了onresize事件，就容易覆蓋掉此處的函數
    window.addEventListener("resize", this.chartResize);
  },
  destroyed(){
    window.removeEventListener("resize", this.chartResize);
  }
};
</script>

<style scoped>
#myChart1,
#myChart2 {
  height: 300px;
}
</style>

2、使用mixins的方式引入：

定義一個頁面Resize.vue，用來處理每一個有圖表的頁面添加resize , 離開時移除resize函數：

<script>
/**
 * 用來處理每一個有圖表的頁面添加resize , 離開時移除resize函數
 */
import echarts from "echarts";
export default {
  data() {
    return {
      doms: []
    };
  },
  methods: {
    chartResize(eleArr) {
      for (let i = 0; i < eleArr.length; i++) {
        setTimeout(function() {
          eleArr[i].resize();
        }, 200);
      }
    }
  },
  mounted() {
    let _this = this;
    window.addEventListener("resize", function() {
      _this.chartResize(_this.doms);
    });
  },
  destroyed() {
    let _this = this;
    window.removeEventListener("resize", function() {
      _this.chartResize(_this.doms);
    });
  }
};
</script>

圖表頁面Chart.vue中引入Resize.vue：

<template>
  <el-row>
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <div ref="myChart1" style="height: 300px;"></div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <div ref="myChart2" style="height: 300px;"></div>
    </el-col>
  </el-row>
</template>

<script>
import Resize from './Resize'
export default {
  mixins: [Resize],
  data() {
    return {
      AreaPiecesChart: null,
      electricityChart: null
    };
  },
  methods: {
    drawAreaPieces() {
      this.AreaPiecesChart = this.$echarts.init(
        this.$refs.myChart1
      );

      this.doms.push(this.AreaPiecesChart);

      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"]
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: "rgba(0, 180, 0, 0.5)"
            },
            {
              gt: 5,
              lt: 7,
              color: "rgba(0, 180, 0, 0.5)"
            }
          ]
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "green",
              width: 5
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
            },
            areaStyle: {},
            data: [
              ["2019-10-10", 200],
              ["2019-10-11", 400],
              ["2019-10-12", 650],
              ["2019-10-13", 500],
              ["2019-10-14", 250],
              ["2019-10-15", 300],
              ["2019-10-16", 450],
              ["2019-10-17", 300],
              ["2019-10-18", 100]
            ]
          }
        ]
      };

      this.AreaPiecesChart.setOption(option);
    },
    drawElectricity() {
      this.electricityChart = this.$echarts.init(
                this.$refs.myChart2
      );

      this.doms.push(this.electricityChart);

      let option = {
        title: {
          text: "一天用電量分佈",
          subtext: "純屬虛構"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "01:15",
            "02:30",
            "03:45",
            "05:00",
            "06:15",
            "07:30",
            "08:45",
            "10:00",
            "11:15",
            "12:30",
            "13:45",
            "15:00",
            "16:15",
            "17:30",
            "18:45",
            "20:00",
            "21:15",
            "22:30",
            "23:45"
          ]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} W"
          },
          axisPointer: {
            snap: true
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: "green"
            },
            {
              gt: 6,
              lte: 8,
              color: "red"
            },
            {
              gt: 8,
              lte: 14,
              color: "green"
            },
            {
              gt: 14,
              lte: 17,
              color: "red"
            },
            {
              gt: 17,
              color: "green"
            }
          ]
        },
        series: [
          {
            name: "用電量",
            type: "line",
            smooth: true,
            data: [
              300,
              280,
              250,
              260,
              270,
              300,
              550,
              500,
              400,
              390,
              380,
              390,
              400,
              500,
              600,
              750,
              800,
              700,
              600,
              400
            ],
            markArea: {
              data: [
                [
                  {
                    name: "早高峯",
                    xAxis: "07:30"
                  },
                  {
                    xAxis: "10:00"
                  }
                ],
                [
                  {
                    name: "晚高峯",
                    xAxis: "17:30"
                  },
                  {
                    xAxis: "21:15"
                  }
                ]
              ]
            }
          }
        ]
      };
      this.electricityChart.setOption(option);
    }
  },
  mounted() {
    this.drawAreaPieces();
    this.drawElectricity();
  }
};
</script>

<style scoped>

</style>

3、使用Vue.prototype方式引入：

將echarts中resize圖表的方法抽象成一個函數chartResize.js：

function chartResize(eleArr){
    for(let i = 0; i<eleArr.length; i++){
        // 定時器是爲了在頁面存在多個圖時，resize方法的調用時間微微錯開，避免明顯的卡頓
        setTimeout(function(){
            eleArr[i].resize();
        }, 200);
    }
}

export {chartResize}

main.js中在原型中註冊chartResize函數：

import {chartResize} from './assets/chartResize.js'

// 在原型鏈中註冊，然後在需要的頁面調用：this.$chartResize()
Vue.prototype.$chartResize = chartResize

在Chart.vue組件中使用：

<template>
  <el-row>
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <div ref="myChart1" style="height: 300px;"></div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
      <div ref="myChart2" style="height: 300px;"></div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      AreaPiecesChart: null,
      electricityChart: null
    };
  },
  methods: {
    drawAreaPieces() {
      this.AreaPiecesChart = this.$echarts.init(
        this.$refs.myChart1
      );

      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"]
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: "rgba(0, 180, 0, 0.5)"
            },
            {
              gt: 5,
              lt: 7,
              color: "rgba(0, 180, 0, 0.5)"
            }
          ]
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "green",
              width: 5
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
            },
            areaStyle: {},
            data: [
              ["2019-10-10", 200],
              ["2019-10-11", 400],
              ["2019-10-12", 650],
              ["2019-10-13", 500],
              ["2019-10-14", 250],
              ["2019-10-15", 300],
              ["2019-10-16", 450],
              ["2019-10-17", 300],
              ["2019-10-18", 100]
            ]
          }
        ]
      };

      this.AreaPiecesChart.setOption(option);
    },
    drawElectricity() {
      this.electricityChart = this.$echarts.init(
                this.$refs.myChart2
      );

      let option = {
        title: {
          text: "一天用電量分佈",
          subtext: "純屬虛構"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "01:15",
            "02:30",
            "03:45",
            "05:00",
            "06:15",
            "07:30",
            "08:45",
            "10:00",
            "11:15",
            "12:30",
            "13:45",
            "15:00",
            "16:15",
            "17:30",
            "18:45",
            "20:00",
            "21:15",
            "22:30",
            "23:45"
          ]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} W"
          },
          axisPointer: {
            snap: true
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: "green"
            },
            {
              gt: 6,
              lte: 8,
              color: "red"
            },
            {
              gt: 8,
              lte: 14,
              color: "green"
            },
            {
              gt: 14,
              lte: 17,
              color: "red"
            },
            {
              gt: 17,
              color: "green"
            }
          ]
        },
        series: [
          {
            name: "用電量",
            type: "line",
            smooth: true,
            data: [
              300,
              280,
              250,
              260,
              270,
              300,
              550,
              500,
              400,
              390,
              380,
              390,
              400,
              500,
              600,
              750,
              800,
              700,
              600,
              400
            ],
            markArea: {
              data: [
                [
                  {
                    name: "早高峯",
                    xAxis: "07:30"
                  },
                  {
                    xAxis: "10:00"
                  }
                ],
                [
                  {
                    name: "晚高峯",
                    xAxis: "17:30"
                  },
                  {
                    xAxis: "21:15"
                  }
                ]
              ]
            }
          }
        ]
      };
      this.electricityChart.setOption(option);
    }
  },
  computed: {
    chartArr(){
      return [this.AreaPiecesChart, this.electricityChart];
    }
  },
  mounted() {
    this.drawAreaPieces();
    this.drawElectricity();

    let _this = this;
    //注：此處要用addEventListener,如果用 window.onresize = function(){},如果別的組件也用了onresize事件，就容易覆蓋掉此處的函數
    window.addEventListener("resize", function(){
      _this.$chartResize(_this.chartArr);
    });
  },
  destroyed(){
    let _this = this;
    window.removeEventListener("resize", function(){
      _this.$chartResize(_this.chartArr);
    });
  }
};
</script>

<style scoped>

</style>

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

DataGear 5.0.0 新特性之dgMap圖表選項

DataGear 企業版 1.1.0 已發佈！ http://datagear.tech/pro/ DataGear在新發布的 5.0.0 版本中，重構了地圖類圖表，新增了dgMap圖表選項，可以更方便靈活地設置圖表地圖。 在 5.0.0

原創 2024-04-26 21:42:31

柱形圖“變個裝”，跟上時尚步伐！

前言 職場中，日報、週報、月報、年度總結，都離不開圖表的製作，而柱狀圖又是最常用的一種，怎樣的柱狀圖，才能讓領導更容易閱讀，甚至是眼前一亮呢？今天小編就將爲大家介紹一下如何藉助葡萄城公司的嵌入式BI工具——Wyn商業智能軟件修改柱形圖的樣式

原創 2024-04-25 10:23:26

DataGear 5.0.0 發佈，數據可視化分析平臺

DataGear 企業版 1.1.0 已發佈，歡迎瞭解試用！ http://datagear.tech/pro/ DataGear 5.0.0 發佈，核心功能重構，新增圖表追加更新模式，具體更新內容如下： 重構：【圖表數據集】概念和設計

原創 2024-04-24 21:42:05

顛覆傳統開發流程！「原型、設計、開發」僅需一個組件設計器就夠了！

常言說：工具用對，效率翻倍！ 這句話對於IT互聯網領域的從業者來說尤爲重要。合理選擇和正確使用工具可以顯著提高工作效率，降低出錯率，促進項目的順利實施。 以產品經理爲例，傳統的開發模式下，構建產品原型通常需要經過大量繁瑣的步驟： 從前期準備

原創 2024-03-22 21:28:57

「全棧」低代碼時代開啓！頁面開發、數據處理、複雜邏輯統統一站搞定！

數字化浪潮的推進讓企業對應用開發效率有着愈發嚴苛的要求。 傳統的開發模式，無論是前端開發還是後端處理，都普遍面臨週期長、成本高、響應慢、迭代難等問題，由於部分企業長期未進行創新改革，導致每次在新增系統功能時，必然會經歷一系列繁瑣步驟。 從需

原創 2024-03-18 10:29:50

echarts 公共

<template> <div class="w-full h-full"> <div class="w-full h-full" ref="charts" > </div> <!-- v-show="!val

原創 2024-03-05 21:23:59

bi報表免費工具排行推薦

最近發現幾款不錯的開源報表，現在給大家分享一下，希望能帶來幫助！ 1、項目名稱：積木報表 項目簡介：積木報表，免費的企業級WEB報表工具。專注於“專業、 易用 、優質”的報表設計器和大屏設計器。支持打印設計、數據報表、圖形報表、大屏設計

原創 2023-10-12 01:00:25

echarts 文字大小調整

一： nameTextStyle 座標軸名稱的文字樣式。 axisLabel 座標軸刻度標籤的相關設置。  二： 1.圖中‘1’的文字大小調整在‘legend’對象下的‘textStyle’屬性裏 2.圖中‘2’的文字大小調整在‘toolt

文文1 2023-10-11 13:48:20

vivado報錯

[Synth 8-6014] Unused sequential element cnt_reg was removed. 綜合的時候， 上面報錯，說的是 cnt這個寄存器，被綜合去掉了。 仔細看了一下代碼，原來這個寄存器是多餘的，他是一

osc_hwc3munb 2024-05-14 02:04:33

一鍵自動化博客發佈工具,用過的人都說好(cnblogs篇)

cnblogs和其他的博客平臺相比會比較複雜，需要設置的項目也比較多一些，弄懂了cnblogs的實現方式，那麼你應該對selenium的整個框架使用已經爛熟於心了。 除了正常的標題，內容，摘要之外，cnblogs還需要設置個人分類，合集，投

原創 2024-05-09 21:45:36

6個實例帶你解讀TinyVue 組件庫跨框架技術

本文分享自華爲雲社區《6個實例帶你解讀TinyVue 組件庫跨框架技術》，作者： 華爲雲社區精選。 在DTSE Tech Talk 《 手把手教你實現mini版TinyVue組件庫 》的主題直播中，華爲雲前端開發DTSE技術佈道師阿健老師給

原創 2024-04-26 10:33:20

Apache DolphinScheduler 社區 3 月月報

各位熱愛 DolphinScheduler 的小夥伴們，DolphinScheduler 社區月報開始更新啦！這裏將記錄 DolphinScheduler 社區每月的重要更新。 社區爲 DolphinScheduler 3.2.x 版本

原創 2024-04-11 21:18:10

canvas和context的關係 畫布和畫筆的關係

在HTML5中，Canvas是一個圖形繪製區域，它是一個HTML標籤，用於在網頁上動態渲染2D和3D圖形。而Context是Canvas的上下文，它是用於在Canvas上進行繪圖的接口。具體來說，有2D Context和3D Context

原創 2024-03-29 21:24:02

注入js編程應該知道的一些基礎知識，以防混淆造成的錯誤

假設我現在用的是chrome extension的方式注入javascript來控制網頁 ，例如有一個元素，原始的網頁製作者已經給他註冊了各種事件，但是我想得到當這個元素髮生改變 時，會觸發一個我自己能控制的事件，有沒有什麼辦法？ 要在

原創 2024-03-18 22:26:56

GO1.18簡單實現泛型LinkedHashMap

簡單實現 // ListMap.go package main import "container/list" // _listMapKV : 內部list.Element的Value type _listMapKV[K string

原創 2023-10-13 00:00:04