Vue中的echarts圖表如何實現loading效果

Posted on by

echarts圖表實現loading效果

main.js 中配置Vue屬性ecahrts

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts 
  • data() 初始化數據調用數據
  • mounted() 周期函數內獲取畫佈節點,並且調用加載loading和圖表渲染
  • computed計算屬性內定義echarts渲染內容以及數據請求

當服務器返回數據 hideLoading()

註意：loading方法要定義在計算屬性的get方法中,set可以不做任何定義。這樣圖表於loading樣式在畫佈上不會沖突

    <template>
        <div>
            <div class="echarts-wrap">
                <div id="dev-echarts"></div>
            </div>
        </div>
    </template>
    <script>
        export default {
            name: "echarts",
            data() {
                return {
                    one: [],
                    two: [],
                    three: [],
                    four: []
                }
            },
            mounted() {
                this.echartsG = this.$echarts.init(document.getElementById('dev-echarts'), 'dark');
                this.loading
                this.initDrawDevEchart
            },
            computed: {
                initDrawDevEchart() {
                    this.$axios.get("getEchartsUrl", {
                        params: {
                            id: 1
                        }
                    }).then((response) => {
                        this.one= response.data.one
                        this.two= response.data.two
                        this.three= response.data.three
                        this.xAxis= response.data.xaxis
    
                        this.echartsG.hideLoading()
                        let optionG = {
                            backgroundColor: 'rgba(128, 128, 128, 0)',
                            title: {
                                text: 'loading效果演示',
                            },
                            dataZoom: {},
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['一', '二', '三']
                            },
                            xAxis: {
                                type: 'category',
                                // 調整柱狀圖位置
                                boundaryGap: true,
                                data: this.xAxis
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            series: [
                                {
                                    name: '一',
                                    type: 'bar',
                                    data: this.one,
                                },
                                {
                                    name: '二',
                                    type: 'bar',
                                    data: this.two
                                },
                                {
                                    name: '三',
                                    type: 'bar',
                                    data: this.three
                                }
                            ]
                        };
                        this.echartsG.setOption(optionG);
                    }).catch((err => {
                        console.log(err)
                    }))
    
                },
                loading: {
                    get: function () {
                        this.echartsG.setOption({
                            backgroundColor: 'rgba(128, 128, 128, 0)',
                            legend: {
                                data: ['一', '二', '三']
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: true,
                                data: []
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            series: [
                                {
                                    name: '一',
                                    type: 'bar',
                                    data: []
                                },
                                {
                                    name: '二',
                                    type: 'bar',
                                    data: []
                                },
    
                                {
                                    name: '三',
                                    type: 'bar',
                                    data: []
                                }
                            ]
    
                        });
                        this.echartsG.showLoading({
                            text: '統計中，請稍候...'
                            , maskColor: 'rgba(3,3,8,0.5)',
                            textColor: '#fff600'
                        });
                    },
                    set(e) {
                    }
                }
            }
        }
</script>    

Vue使用echarts圖表總結

今天在寫後臺項目的時候，使用echarts來繪制圖表。下面來說說怎麼使用echarts。

echarts地址：https://echarts.apache.org/zh/index.html

效果：

在這裡插入圖片描述

代碼：

在vue項目中使用echarts圖表的步驟：

安裝echarts依賴

npm install echarts -S

或者使用淘寶的鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

創建圖表

一、全局引入

在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

二、局部引入（在需要的頁面中引入）

import echarts from "echarts";

在頁面中的使用（在這裡我用的局部引入）

完整的代碼：

<template>
  <div>
    <!-- 面包屑 -->
    <BreadCrumb level1="數據統計" level2="數據報表"></BreadCrumb>
    <!-- 內容 -->
    <el-card style="margin-top:20px;">
      <!-- 為Echarts準備一個Dom -->
      <div id="main" style="width: 750px;height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
import { getReports } from "../../http/api";
import echarts from "echarts";
import _ from "lodash";
export default {
  data() {
    return {
      // 需要合並的數據
      options: {
        title: {
          text: "用戶來源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
      }
    };
  },
  mounted() {
    this.reports();
  },
  methods: {
    async reports() {
      var myChart = echarts.init(document.getElementById("main"));
      const res = await getReports();
      console.log(res);
      const resultJieg = _.merge(res.result, this.options);
      //   展示數據
      myChart.setOption(resultJieg);
    }
  }
};
</script>
<style></style>

解釋：

1、需要在頁面上給一個掛載點

		<!-- 為Echarts準備一個Dom -->
      <div id="main" style="width: 750px;height:400px;"></div>

2、在data裡面定義一下

// 需要合並的數據
      options: {
        title: {
          text: "用戶來源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
      }

3、初始化數據

  mounted() {
    this.reports();
  },
  methods: {
    async reports() {
    //獲取在頁面中掛載的數據
      var myChart = echarts.init(document.getElementById("main"));
      //調用接口（即後臺返回的數據）
      const res = await getReports();
      console.log(res);
      //使用lodash來合並數據
      const resultJieg = _.merge(res.result, this.options);
      //   展示數據
      myChart.setOption(resultJieg);
    }
  }

總結一下：

在vue中使用echarts圖表，分為二步：

1.在頁面中給圖表一個掛載的元素。

2.在mounted的函數裡初始化數據。

  • 通過echarts.init來拿到頁面中掛載的節點。
  • 調用數據
  • 最後通過setOption來展示數據。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：