Vue中的echarts圖表如何實(shí)現(xiàn)loading效果

更新時(shí)間：2022年08月10日 10:40:04 作者：June.1

這篇文章主要介紹了Vue中的echarts圖表如何實(shí)現(xiàn)loading效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

echarts圖表實(shí)現(xiàn)loading效果

main.js 中配置Vue屬性ecahrts

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

data() 初始化數(shù)據(jù)調(diào)用數(shù)據(jù)
mounted() 周期函數(shù)內(nèi)獲取畫布節(jié)點(diǎn),并且調(diào)用加載loading和圖表渲染
computed計(jì)算屬性內(nèi)定義echarts渲染內(nèi)容以及數(shù)據(jù)請(qǐng)求

當(dāng)服務(wù)器返回?cái)?shù)據(jù) hideLoading()

注意：loading方法要定義在計(jì)算屬性的get方法中,set可以不做任何定義。這樣圖表于loading樣式在畫布上不會(huì)沖突

?? ?<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',
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 調(diào)整柱狀圖位置
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?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: '統(tǒng)計(jì)中，請(qǐng)稍候...'
?? ? ? ? ? ? ? ? ? ? ? ? ? ?, maskColor: 'rgba(3,3,8,0.5)',
?? ? ? ? ? ? ? ? ? ? ? ? ? ?textColor: '#fff600'
?? ? ? ? ? ? ? ? ? ? ? ?});
?? ? ? ? ? ? ? ? ? ?},
?? ? ? ? ? ? ? ? ? ?set(e) {
?? ? ? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ? ? ?}
</script>?? ?

Vue使用echarts圖表總結(jié)

今天在寫后臺(tái)項(xiàng)目的時(shí)候，使用echarts來繪制圖表。下面來說說怎么使用echarts。

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

效果：

在這里插入圖片描述

代碼：

在vue項(xiàng)目中使用echarts圖表的步驟：

安裝echarts依賴

npm install echarts -S

或者使用淘寶的鏡像

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

創(chuàng)建圖表

一、全局引入

在main.js中

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

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

import echarts from "echarts";

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

完整的代碼：

<template>
  <div>
    <!-- 面包屑 -->
    <BreadCrumb level1="數(shù)據(jù)統(tǒng)計(jì)" level2="數(shù)據(jù)報(bào)表"></BreadCrumb>
    <!-- 內(nèi)容 -->
    <el-card style="margin-top:20px;">
      <!-- 為Echarts準(zhǔn)備一個(gè)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 {
      // 需要合并的數(shù)據(jù)
      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);
      //   展示數(shù)據(jù)
      myChart.setOption(resultJieg);
    }
  }
};
</script>
<style></style>

解釋：

1、需要在頁面上給一個(gè)掛載點(diǎn)

		<!-- 為Echarts準(zhǔn)備一個(gè)Dom -->
      <div id="main" style="width: 750px;height:400px;"></div>

2、在data里面定義一下

// 需要合并的數(shù)據(jù)
      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、初始化數(shù)據(jù)

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

總結(jié)一下：

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

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

2.在mounted的函數(shù)里初始化數(shù)據(jù)。