前端深刻之Vue篇丨如何在項目中優雅的使用Echarts（上）

時間 2020-01-15

標籤前端深刻 vue 如何項目優雅使用 echarts 简体版

原文原文鏈接

寫在前面

最近因爲一些不可抗力因素，我跳槽去了一家作高校教育服務的公司，剛入職就正好遇上了PC端項目的重構，而我主要負責數據可視化這一模塊，其實作起來不算複雜，可是在使用Echarts的過程當中也踩到了一些坑。html

因此有了這一文章，這一文章分爲上下兩篇，在本篇中我將主要介紹前端

如何在vue項目中使用Echarts
如何確保Echarts在頁面中正常顯示並可隨窗口變化

但願小夥伴閱讀完以後能夠在項目中掌握Echarts正確的使用方式，而且在個人基礎上可以少踩一些坑。vue

話很少說，讓咱們開始吧。npm

在vue項目中使用Echarts

安裝

安裝實際上是比較簡單的，直接在項目中打開命令行工具，執行npm install echarts --save 也可簡寫爲npm i echarts -S，即將Echarts安裝到項目生產環境中。api

安裝完成以後咱們須要打開main.js文件，在上邊找一個位置進行引入Echarts，並將其掛載到vue的原型中，具體代碼以下瀏覽器

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
複製代碼

使用

在簡單安裝並掛載原型以後，咱們便可在所須要的頁面直接使用的。echarts

首先咱們要創建一個容器，一個能夠放置Echarts的空div工具

<div ref="myChart" style="width:100%;height:520px" id="myChart"></div>
複製代碼

在這裏我使用了ref來獲取DOM節點，主要是爲了不Echarts的容器尚未生成就進行初始化。學習

建立完容器以後便可使用數據對Echarts進行渲染了，爲了方便各位小夥伴，我在此貼一個公共代碼，須要在項目中使用Echarts的小夥伴能夠直接複製啦~ui

mounted(){
	this.setMyEchart()  //頁面掛載完成後執行
},
methods: {
    setMyEchart() {
        const myChart = this.$refs.myChart;  //經過ref獲取到DOM節點
        if (myChart) {
            const thisChart = this.$echarts.init(myChart);  //利用原型調取Echarts的初始化方法
            const option = {};  //{}內寫須要圖表的各類配置，能夠在官方案例中修改完畢後複製過來
            thisChart.setOption(option);  //將編寫好的配置項掛載到Echarts上
            window.addEventListener("resize", function() {
                thisChart.resize();  //頁面大小變化後Echarts也更改大小
            });
        }
    }
}
複製代碼

使Echarts在頁面中正常顯示

在基本結構寫完以後，就能夠去Echarts官方示例找到你所須要的圖，複製option中的內容粘貼到頁面中option對象中便可。

這裏我以雷達圖爲例進行展現，當我粘貼完代碼以後頁面是這樣子的。

寬度只有100px，其實這是由於Echarts不識別百分比制，因此就會把100%識別爲100px。當咱們修改了瀏覽器寬高以後，觸發thisChart.resize();，圖表也就能正常顯示了，可是咱們不能在用戶進來以後就改變瀏覽器寬高，官方建議咱們給Echarts容器設置具體寬高以保證顯示，這顯然不是一個很好的適配方案。

因此咱們應該設置動態的寬：這一步咱們首先要有一個寬度參照物（這個參照物能夠是百分比的寬，由於咱們在獲取寬的時候會被轉化成真正的像素寬），參照物能夠是chart的wrap，也能夠是相鄰寬度相同的DOM節點。

拿個人頁面舉例，獲取下面這一塊的寬度，假設這個div的類名爲 content，那麼咱們能夠編寫以下代碼

document.querySelector('#myChart').style.width =  document.querySelector('.content').clientWidth
複製代碼

這樣就能夠在一開始設置到具體的寬了，同時在變話瀏覽器寬高後也可以自適應的更改。

至於內容本身找到須要的進行修改就好，更多配置項能夠參考這個連接進行學習。

結論

通過以上的學習，相信你已經初步瞭解了Echarts的用法，其實算是比較簡單的，重要的仍是你想要展示什麼，選擇好以後複製到咱們的模板中就能夠了。

在下篇中我將主要介紹如何將api接口返回的數據填充到Echarts中，三天內會更新出來，但願有須要的小夥伴能夠持續關注。

最後給出全部的代碼吧，供你參考。

<div ref="myChart" style="width:100%;height:520px" id="myChart"></div>
<div class="content"></div>
<script>
mounted() {
    document.querySelector("#myChart").style.width = document.querySelector(".content").clientWidth;
    this.setMyEchart();
  },
  methods: {
      setMyEchart() {
        const myChart = this.$refs.myChart;  //經過ref獲取到DOM節點
        if (myChart) {
            const thisChart = this.$echarts.init(myChart);  //利用原型調取Echarts的初始化方法
            const option = {
          tooltip: {
            confine: true,
            enterable: true //鼠標是否能夠移動到tooltip區域內
          },
          legend: {
            // top : '96%',                    // 圖例距離頂部邊距
            textStyle: {
              coFlor: "#202124",
              fontWeight: "bold",
              fontSize: "14"
            },
            data: ["學生我的", "班級平均"]
          },

          calculable: true,
          color: ["#00CA90", "#4285F4"],
          radar: {
            name: {
              textStyle: {
                color: "#fff",
                backgroundColor: "#999",
                fontSize: "10",
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: [
              { name: "出勤率", max: 1 },
              { name: "做業提交率", max: 1 },
              { name: "話題參與率", max: 1 },
              { name: "表現得星數", max: 1 },
              { name: "互動參與率", max: 1 }
            ],
            radius: 80
          },
          series: [
            {
              type: "radar",
              data: [
                {
                  value: [
                      0.85,0.94,0.24,0.56,0.23
                  ],
                  name: "學生我的"
                },
                {
                  value: [
                    0.90,0.85,0.37,0.85,0.52
                  ],
                  name: "班級平均"
                }
              ]
            }
          ]
        };  //這裏是我配置好的一個雷達圖，你能夠複製到echart示例網查看效果
            thisChart.setOption(option);  //將編寫好的配置項掛載到Echarts上
            window.addEventListener("resize", function() {
                thisChart.resize();  //頁面大小變化後Echarts也更改大小
            });
        }
      }
    }
  }
</script>
複製代碼