vue裏面使用echarts實現根據瀏覽器屏幕大小自適應

1- 安裝 echarts 依賴

npm install echarts -S

2- 創建圖表全局引入
在main.js 中寫

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3- 在對應的頁面裏面寫echarts圖表
示例

1，新建echarts_demo.vue

<template>
  <div id="myChart" :style="{width: '100%', height: '600px'}"></div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted() {
    this.day_init();
  },
  methods: {
    //實現自適應
    day_init() {
      const self = this; //因爲箭頭函數會改變this指向，指向windows。所以先把this保存
       var todaypieId = document.getElementById("myEchart");
        if (!todaypieId) {
        return false;
      } else {
       setTimeout(() => {
        window.onresize = function() {
          //   self.chart = echarts.init(self.$refs.myEchart);
          self.chart_today = echarts.init(
            todaypieId
          );
          self.chart_today.resize();
        };
      }, 20);
      }
    
    },
    drawLine() {
      // 基於準備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 繪製圖表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 座標軸指示器，座標軸觸發有效
            type: "shadow" // 默認爲直線，可選爲：'line' | 'shadow'
          }
        },
        legend: {
          data: [
            "西瓜",
            "菠蘿",
            "蘋果",
            "榴蓮",
            "草莓",
            "橘子"
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["週一", "週二", "週三", "週四", "週五", "週六", "週日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "西瓜",
            type: "bar",
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "菠蘿",
            type: "bar",
            stack: "",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "蘋果",
            type: "bar",
            stack: "",
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "榴蓮",
            type: "bar",
            stack: "",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "草莓",
            type: "bar",
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine: {
              lineStyle: {
                normal: {
                  type: "dashed"
                }
              },
              data: [[{ type: "min" }, { type: "max" }]]
            }
          },
          {
            name: "橘子",
            type: "bar",
            barWidth: 5,
            stack: "",
            data: [620, 732, 701, 734, 1090, 1130, 1120]
          }
        ]
      });
    }
  }
};
</script>

<style lang="less">
</style>

執行成功後會控制檯會出現錯誤

由於echarts圖形ID是由後臺傳輸過來的，並且是根據圖形數據一起傳過來，出現了圖形容器還未生成，但是數據已經來了，這樣就會出現這個問題：找不到圖形容器

解決辦法

（1）如果圖形數據和圖形ID一起傳輸過來，先保證圖形容器已存在，後生成圖形；可以利用定時器延後圖形數據

（2）可以將圖形數據和圖形ID分爲兩個請求接口，分別同步進行，先保證圖形容器存在，然後再生成圖形

代碼添加判斷

var pieId = document.getElementById(‘myChart’);
if (!pieId){
return false;
}
var pie = echarts.init(pieId)