• <track id="uvunq"></track>

    <track id="uvunq"><div id="uvunq"></div></track>
    <bdo id="uvunq"></bdo>
    <menuitem id="uvunq"></menuitem>
    1. <tbody id="uvunq"></tbody>

      <tbody id="uvunq"></tbody>
    2. <bdo id="uvunq"><dfn id="uvunq"><thead id="uvunq"></thead></dfn></bdo>
      <menuitem id="uvunq"><dfn id="uvunq"><menu id="uvunq"></menu></dfn></menuitem>

        <track id="uvunq"><span id="uvunq"></span></track>

        <track id="uvunq"></track>
      1. <bdo id="uvunq"><dfn id="uvunq"></dfn></bdo>

          <menuitem id="uvunq"><dfn id="uvunq"></dfn></menuitem>

        1. <bdo id="uvunq"><dfn id="uvunq"></dfn></bdo>

        2. <track id="uvunq"><span id="uvunq"><td id="uvunq"></td></span></track>
        3. <progress id="uvunq"></progress>
            <track id="uvunq"><nobr id="uvunq"></nobr></track>
            
            

            <menuitem id="uvunq"></menuitem>
          1. <menuitem id="uvunq"></menuitem>

            1. <tbody id="uvunq"></tbody>
              1. <track id="uvunq"></track>
                <tbody id="uvunq"><div id="uvunq"><address id="uvunq"></address></div></tbody>
                <bdo id="uvunq"><dfn id="uvunq"></dfn></bdo>

                1. <track id="uvunq"></track>

                2. <option id="uvunq"><div id="uvunq"></div></option>
                  <track id="uvunq"><span id="uvunq"></span></track>
                3. <bdo id="uvunq"></bdo>

                4. <track id="uvunq"><span id="uvunq"></span></track>

                  <menuitem id="uvunq"></menuitem>

                  <option id="uvunq"><span id="uvunq"><td id="uvunq"></td></span></option>
                  <bdo id="uvunq"></bdo>
                  <bdo id="uvunq"><dfn id="uvunq"></dfn></bdo>

                    <bdo id="uvunq"></bdo>

                  1. <tbody id="uvunq"></tbody>
                    <tbody id="uvunq"></tbody>

                      1. <track id="uvunq"><div id="uvunq"><td id="uvunq"></td></div></track>

                                1. <option id="uvunq"></option>

                                  <tbody id="uvunq"></tbody>

                                    <track id="uvunq"><nobr id="uvunq"></nobr></track>
                                    <bdo id="uvunq"><optgroup id="uvunq"><thead id="uvunq"></thead></optgroup></bdo>
                                  1. <tbody id="uvunq"><nobr id="uvunq"></nobr></tbody>
                                      <track id="uvunq"></track><tbody id="uvunq"><div id="uvunq"><address id="uvunq"></address></div></tbody>

                                        <track id="uvunq"><span id="uvunq"><address id="uvunq"></address></span></track>

                                      1. <menuitem id="uvunq"><optgroup id="uvunq"></optgroup></menuitem>

                                        <track id="uvunq"><div id="uvunq"></div></track>

                                            <tbody id="uvunq"><div id="uvunq"><address id="uvunq"></address></div></tbody>
                                            <track id="uvunq"></track>
                                            <bdo id="uvunq"></bdo>

                                            <track id="uvunq"></track>
                                            <track id="uvunq"><div id="uvunq"></div></track>
                                            <menuitem id="uvunq"><dfn id="uvunq"></dfn></menuitem>
                                            1. <track id="uvunq"></track>

                                                1. <tbody id="uvunq"><span id="uvunq"></span></tbody>

                                                  <bdo id="uvunq"><dfn id="uvunq"><dd id="uvunq"></dd></dfn></bdo>

                                                2. <tbody id="uvunq"><div id="uvunq"><address id="uvunq"></address></div></tbody>

                                                    <menuitem id="uvunq"><optgroup id="uvunq"></optgroup></menuitem>

                                                              1. <address id="uvunq"><menu id="uvunq"><blockquote id="uvunq"></blockquote></menu></address>
                                                                <bdo id="uvunq"><optgroup id="uvunq"><menu id="uvunq"></menu></optgroup></bdo>

                                                                <tbody id="uvunq"></tbody>

                                                                  <menuitem id="uvunq"><strong id="uvunq"></strong></menuitem>
                                                                  1. <tbody id="uvunq"></tbody>
                                                                    <tbody id="uvunq"></tbody>

                                                                    1. <tbody id="uvunq"><span id="uvunq"><address id="uvunq"></address></span></tbody>
                                                                      <progress id="uvunq"></progress>

                                                                          <bdo id="uvunq"><dfn id="uvunq"></dfn></bdo>

                                                                          <bdo id="uvunq"><dfn id="uvunq"></dfn></bdo>
                                                                          1. <menuitem id="uvunq"><sup id="uvunq"></sup></menuitem>

                                                                              <bdo id="uvunq"></bdo>

                                                                              <bdo id="uvunq"></bdo> <bdo id="uvunq"></bdo>
                                                                              <menuitem id="uvunq"><optgroup id="uvunq"></optgroup></menuitem>
                                                                              1. <menuitem id="uvunq"><strong id="uvunq"></strong></menuitem>

                                                                                  <track id="uvunq"></track>
                                                                                1. <tbody id="uvunq"></tbody>
                                                                                  1. <bdo id="uvunq"></bdo><bdo id="uvunq"></bdo>
                                                                                      <track id="uvunq"><span id="uvunq"><address id="uvunq"></address></span></track>

                                                                                    1. 
                                                                                      
                                                                                        <track id="uvunq"><div id="uvunq"></div></track>
                                                                                          1. <menuitem id="uvunq"></menuitem>
                                                                                            <bdo id="uvunq"></bdo>

                                                                                            <track id="uvunq"><div id="uvunq"></div></track>
                                                                                            <bdo id="uvunq"></bdo>

                                                                                          2. <option id="uvunq"></option>

                                                                                                <tbody id="uvunq"></tbody>
                                                                                                1. <bdo id="uvunq"></bdo>
                                                                                                  1. <bdo id="uvunq"></bdo>
                                                                                                      <option id="uvunq"></option>
                                                                                                      <bdo id="uvunq"><dfn id="uvunq"><thead id="uvunq"></thead></dfn></bdo>
                                                                                                          <track id="uvunq"><span id="uvunq"></span></track>

                                                                                                          1. <track id="uvunq"></track>
                                                                                                          2. <tbody id="uvunq"></tbody>

                                                                                                              <track id="uvunq"><nobr id="uvunq"></nobr></track>
                                                                                                            1. <progress id="uvunq"></progress>
                                                                                                                <tbody id="uvunq"></tbody>
                                                                                                              1. <bdo id="uvunq"></bdo>

                                                                                                                    1. <bdo id="uvunq"><dfn id="uvunq"><menu id="uvunq"></menu></dfn></bdo>
                                                                                                                          1. <menuitem id="uvunq"><dfn id="uvunq"></dfn></menuitem>
                                                                                                                            <menuitem id="uvunq"></menuitem>

                                                                                                                                <menuitem id="uvunq"></menuitem>
                                                                                                                                  <track id="uvunq"></track><track id="uvunq"></track>
                                                                                                                                  1. <tbody id="uvunq"></tbody>
                                                                                                                                    <menuitem id="uvunq"></menuitem>
                                                                                                                                  2. <menuitem id="uvunq"></menuitem><menuitem id="uvunq"></menuitem>
                                                                                                                                  3. 
                                                                                                                                    

                                                                                                                                    <menuitem id="uvunq"><optgroup id="uvunq"></optgroup></menuitem>

                                                                                                                                    <progress id="uvunq"></progress>
                                                                                                                                      <track id="uvunq"><div id="uvunq"></div></track>
                                                                                                                                      <nobr id="uvunq"><dfn id="uvunq"></dfn></nobr>

                                                                                                                                      <b id="uvunq"><ins id="uvunq"></ins></b>
                                                                                                                                      <track id="uvunq"></track>
                                                                                                                                    1. <tbody id="uvunq"></tbody>

                                                                                                                                      <menuitem id="uvunq"><optgroup id="uvunq"></optgroup></menuitem>
                                                                                                                                      1. <track id="uvunq"></track>

                                                                                                                                        <track id="uvunq"></track>
                                                                                                                                        <tbody id="uvunq"><bdo id="uvunq"><optgroup id="uvunq"></optgroup></bdo></tbody>
                                                                                                                                        <track id="uvunq"><div id="uvunq"></div></track>
                                                                                                                                        <bdo id="uvunq"></bdo>

                                                                                                                                        <track id="uvunq"></track>
                                                                                                                                        <menuitem id="uvunq"><ins id="uvunq"></ins></menuitem>

                                                                                                                                          <tbody id="uvunq"><nobr id="uvunq"></nobr></tbody>
                                                                                                                                          <bdo id="uvunq"></bdo>

                                                                                                                                          echarts、dataV 數據可視化大屏

                                                                                                                                          貴客云 2022-05-21 20:33 閱讀 61

                                                                                                                                          一、項目描述 (包含echarts中國地圖、dataV科技炫酷邊框等等)

                                                                                                                                          • 一個基于 Vue、Datav、Echart 框架的 " 數據大屏項目 ",通過 Vue 組件實現數據動態刷新渲染,內部圖表可實現自由替換。部分圖表使用 DataV 自帶組件, 組件庫基于Vue (React版) ,主要用于構建大屏(全屏)數據展示頁面即數據可視化,具有多種類型組件可供使用。

                                                                                                                                          • 項目環境:Vue-cli、DataV、Echarts、node

                                                                                                                                          友情鏈接:

                                                                                                                                          1. Vue 官 方文檔
                                                                                                                                          2. Vue CLI
                                                                                                                                          3. DataV 官方文檔
                                                                                                                                          4. echarts 實例,echarts API 文檔

                                                                                                                                          項目展示

                                                                                                                                          二、主要文件介紹

                                                                                                                                          文件作用/功能
                                                                                                                                          main.js主目錄文件,引入 Echart/DataV 等文件
                                                                                                                                          utils工具函數與 mixins 函數等
                                                                                                                                          components/ HomeWord.vue項目主結構
                                                                                                                                          assets靜態資源目錄,放置 logo 與背景圖片

                                                                                                                                          三、項目注意點

                                                                                                                                          引用的模塊(先下載 install)

                                                                                                                                          main.js

                                                                                                                                          import Vue from 'vue'
                                                                                                                                          import App from './App.vue'
                                                                                                                                          import router from './router'
                                                                                                                                          import store from './store'
                                                                                                                                          import * as echarts from 'echarts'  //echarts 引用使用斷言,否則可能報錯
                                                                                                                                          import ElementUI from 'element-ui'; 
                                                                                                                                          import 'element-ui/lib/theme-chalk/index.css';  
                                                                                                                                          import dataV from '@jiaminghi/data-view'
                                                                                                                                          Vue.use(ElementUI); //部分圖標使用 element-ui
                                                                                                                                          Vue.use(dataV)   //全局啟用 dataV
                                                                                                                                          
                                                                                                                                          Vue.prototype.$echarts=echarts  //將echarts掛載到Vue原型上,全局可使用this.$echarts 調用
                                                                                                                                          Vue.config.productionTip = false
                                                                                                                                          new Vue({
                                                                                                                                            router,
                                                                                                                                            store,
                                                                                                                                            render: h => h(App)
                                                                                                                                          }).$mount('#app')
                                                                                                                                          

                                                                                                                                          封裝組件渲染圖表

                                                                                                                                          所有的 ECharts 圖表已經對數據和屏幕改動進行了監聽,能夠動態渲染圖表數據。在監聽窗口小大的模塊。

                                                                                                                                          中間部分中國地圖json數據來源 (地址)

                                                                                                                                          我這邊直接復制內容存到本地 (把復制的鏈接在網頁打開Ctrl+A Ctrl+C 全選復制粘貼): assets > json > china.json
                                                                                                                                          在這里插入圖片描述

                                                                                                                                          渲染地圖的子組件

                                                                                                                                          有幾個注意點:

                                                                                                                                          1. 需要地圖json文件
                                                                                                                                          2. 需要監聽數據變化
                                                                                                                                          3. tooltip: formatter 鼠標移入的提示信息框
                                                                                                                                          <template>
                                                                                                                                            <div
                                                                                                                                              id="map"
                                                                                                                                              :style="{
                                                                                                                                                width: '700px',
                                                                                                                                                height: '730px',
                                                                                                                                                marginTop: '10px',
                                                                                                                                              }"
                                                                                                                                            ></div>
                                                                                                                                          </template>
                                                                                                                                          
                                                                                                                                          <script>
                                                                                                                                          import china from "../assets/json/china.json"; //引入地圖json文件
                                                                                                                                          export default {
                                                                                                                                            mounted() {
                                                                                                                                              this.initChart();
                                                                                                                                            },
                                                                                                                                          
                                                                                                                                            props: {
                                                                                                                                              mapData: {  //接收父組件傳過來的值
                                                                                                                                                type: Object,
                                                                                                                                                default: () => ({}),
                                                                                                                                              },
                                                                                                                                            },
                                                                                                                                            data() {
                                                                                                                                              return {
                                                                                                                                                options: {},
                                                                                                                                                chart: null,
                                                                                                                                              };
                                                                                                                                            
                                                                                                                                            methods: {
                                                                                                                                              // 地圖
                                                                                                                                              initChart() {
                                                                                                                                                this.$echarts.registerMap("china", china); //echarts的map需要注冊,根據引入的json文件名,并定義map的名稱
                                                                                                                                                this.chart = this.$echarts.init(document.getElementById("map"), null, {
                                                                                                                                                  renderer: "svg",
                                                                                                                                                }); //init()掛載在某個元素,所以還需要在mounted調用, { renderer: "svg" } 將原來的canvas繪圖改為svg 清晰度更高
                                                                                                                                                this.drawMap();
                                                                                                                                              },
                                                                                                                                              drawMap() {
                                                                                                                                                this.chart.setOption(
                                                                                                                                                  {
                                                                                                                                                    title: {
                                                                                                                                                      text: "平臺運營實時數據",
                                                                                                                                                      textStyle: {
                                                                                                                                                        color: "#fff",
                                                                                                                                                        fontSize: 28,
                                                                                                                                                      },
                                                                                                                                                    },
                                                                                                                                          
                                                                                                                                                    tooltip: { //鼠標移入的提示信息框
                                                                                                                                                      show: true,
                                                                                                                                                      trigger: "item",
                                                                                                                                                      formatter: function (a, b) {
                                                                                                                                                        // 將人數改千分位
                                                                                                                                                        let a2 = "";
                                                                                                                                                        let olda = Number(a["data"].value);
                                                                                                                                          
                                                                                                                                                        if (olda >= 0) {
                                                                                                                                                          a2 = olda;
                                                                                                                                                          if (olda > 999) {
                                                                                                                                                            let parts = olda.toString().split(".");
                                                                                                                                                            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                                                                                                                                                            a2 = parts.join(".");
                                                                                                                                                          }
                                                                                                                                                        }
                                                                                                                                                        // 日活兼容
                                                                                                                                                        let a3 = a["data"].ratio ? a["data"].ratio : 0;
                                                                                                                                                        let a1 = a["name"];
                                                                                                                                                        if (a1 == "臺灣省" && !a2) { // 臺灣省顯示暫無數據
                                                                                                                                                          return `${a1}<br/> 暫無數據`;
                                                                                                                                                        }
                                                                                                                                          
                                                                                                                                                        return `${a1}<br/>累計注冊: ${a2}  <br/>日活: ${a3} %`;
                                                                                                                                                      },
                                                                                                                                                    },
                                                                                                                                          
                                                                                                                                                    series: [
                                                                                                                                                      {
                                                                                                                                                        type: "map", 
                                                                                                                                                        map: "china", //對應registerMap() 對應的名稱
                                                                                                                                                        top: "150",  //調整地圖在頁面的位置
                                                                                                                                                        zoom: 1.3,  //縮放比例
                                                                                                                                                        emphasis: {
                                                                                                                                                          label: { show: false },
                                                                                                                                                          itemStyle: {
                                                                                                                                                            areaColor: "rgba(136, 132, 216)",
                                                                                                                                                          },
                                                                                                                                                        },
                                                                                                                                                        itemStyle: {
                                                                                                                                                          borderColor: "#fff",
                                                                                                                                                        },
                                                                                                                                                        data: this.mapData.mapArr, //有數據才顯示顏色
                                                                                                                                                      },
                                                                                                                                                    ],
                                                                                                                                          
                                                                                                                                                    visualMap: {
                                                                                                                                                      show: true,
                                                                                                                                                      type: "continuous",
                                                                                                                                                      calculable: true,
                                                                                                                                                      orient: "horizontal",  
                                                                                                                                                      textStyle: {
                                                                                                                                                        color: "#fff",
                                                                                                                                                      },
                                                                                                                                                      min: 0,
                                                                                                                                                      max: 10000000,
                                                                                                                                                      text: ["累計注冊/人", ""],
                                                                                                                                                      color: ["#df3d20", "#fff"],
                                                                                                                                                      inRange: {
                                                                                                                                                        // color: [ "#fff","#44effb", "#3399ff","#2b8afe", "#006699"],
                                                                                                                                                        color: ["#44effb", "#3399ff", "#2b8afe", "#006699"],  //地圖顏色
                                                                                                                                                      },
                                                                                                                                                    },
                                                                                                                                                  },
                                                                                                                                                  true
                                                                                                                                                );
                                                                                                                                              },
                                                                                                                                            },
                                                                                                                                          
                                                                                                                                            watch: {
                                                                                                                                              // handler  監聽數據發生變化需要具體執行的方法
                                                                                                                                              // deep  需要監聽的數據的深度,一般用來監聽對象中某個屬性的變化
                                                                                                                                              mapData: {
                                                                                                                                                handler() {
                                                                                                                                                  this.drawMap();
                                                                                                                                                },
                                                                                                                                                deep: true, 
                                                                                                                                              },
                                                                                                                                            },
                                                                                                                                          };
                                                                                                                                          </script>
                                                                                                                                          
                                                                                                                                          <style></style>
                                                                                                                                          

                                                                                                                                          復用圖表組件(可以研究下)

                                                                                                                                          更換邊框 (炫酷的科技感動態邊框)

                                                                                                                                          邊框是使用了 DataV 自帶的組件,只需要去 views 目錄下去尋找對應的位置去查找并替換就可以,具體的種類請去 DavaV 官網查看
                                                                                                                                          如:

                                                                                                                                          <dv-border-box-1> 內容撐開 </dv-border-box-1>
                                                                                                                                          <dv-border-box-2> 內容撐開 </dv-border-box-2>
                                                                                                                                          <dv-border-box-3> 內容撐開 </dv-border-box-3>
                                                                                                                                          

                                                                                                                                          在這里插入圖片描述

                                                                                                                                          Mixins 解決自適應適配功能

                                                                                                                                          使用 mixins 注入解決了界面大小變動圖表自適應適配的功能,函數在 utils/resizeMixins.js 中,應用在 common/echart/index.vue 的封裝渲染組件,主要是對 this.chart 進行了功能注入。

                                                                                                                                          屏幕適配

                                                                                                                                          使用更流程通用的 css3:scale 縮放方案,通過 ref 指向 主頁面的元素,基準尺寸是 1980px*1080px,所以支持同比例屏幕 100% 填充,如果非同比例則會自動計算比例居中填充,不足的部分則留白。實現代碼在 `src/utils/drawMixin ,如果有其它的適配方案,歡迎交流。

                                                                                                                                          src > utils > drawMixin.js

                                                                                                                                          // 屏幕適配 mixin 函數
                                                                                                                                          //需要先設置index.html meta 標簽 user-scalable=no
                                                                                                                                          //<meta name="viewport" content="width=device-width,initial-scale=1.0 ,user-scalable=no">
                                                                                                                                          //并且需要綁定ref 
                                                                                                                                          
                                                                                                                                          // * 默認縮放值
                                                                                                                                          const scale = {
                                                                                                                                              width: '1',
                                                                                                                                              height: '1',
                                                                                                                                            }
                                                                                                                                            
                                                                                                                                            // * 設計稿尺寸(px)
                                                                                                                                            // 1920×1080
                                                                                                                                            const baseWidth =1920
                                                                                                                                            const baseHeight = 1080
                                                                                                                                            
                                                                                                                                            
                                                                                                                                            // * 需保持的比例(默認1.77778)
                                                                                                                                            const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
                                                                                                                                            
                                                                                                                                            export default {
                                                                                                                                              data() {
                                                                                                                                                return {
                                                                                                                                                  // * 定時函數
                                                                                                                                                  drawTiming: null
                                                                                                                                                }
                                                                                                                                              },
                                                                                                                                              mounted () {
                                                                                                                                                this.calcRate()
                                                                                                                                                window.addEventListener('resize', this.resize)
                                                                                                                                              },
                                                                                                                                              beforeDestroy () {
                                                                                                                                                window.removeEventListener('resize', this.resize)
                                                                                                                                              },
                                                                                                                                              methods: {
                                                                                                                                                calcRate () {
                                                                                                                                                  const appRef = this.$refs["appRef"]
                                                                                                                                                  if (!appRef) return 
                                                                                                                                                  // 當前寬高比
                                                                                                                                                  const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
                                                                                                                                                  if (appRef) {
                                                                                                                                                    if (currentRate > baseProportion) {
                                                                                                                                                      // 表示更寬
                                                                                                                                                      scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
                                                                                                                                                      scale.height = (window.innerHeight / baseHeight).toFixed(5)
                                                                                                                                                      appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
                                                                                                                                                    } else {
                                                                                                                                                      // 表示更高
                                                                                                                                                      scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
                                                                                                                                                      scale.width = (window.innerWidth / baseWidth).toFixed(5)
                                                                                                                                                      appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
                                                                                                                                                    }
                                                                                                                                                  }
                                                                                                                                                },
                                                                                                                                                resize () {
                                                                                                                                                  clearTimeout(this.drawTiming)
                                                                                                                                                  this.drawTiming = setTimeout(() => {
                                                                                                                                                    this.calcRate()
                                                                                                                                                  }, 200)
                                                                                                                                                }
                                                                                                                                              },
                                                                                                                                            }
                                                                                                                                          

                                                                                                                                          homeword.vue

                                                                                                                                          <template>
                                                                                                                                            <div id="index" ref="appRef">
                                                                                                                                            ...頁面內容...
                                                                                                                                            </div>
                                                                                                                                          </template>
                                                                                                                                          
                                                                                                                                          <script>
                                                                                                                                          import drawMixin from "../utils/drawMixin";
                                                                                                                                          export default {
                                                                                                                                            components: {
                                                                                                                                             //.....
                                                                                                                                            },
                                                                                                                                            mixins: [drawMixin], //混入 (保持頁面縮放比例)
                                                                                                                                           } 
                                                                                                                                           </script>
                                                                                                                                          

                                                                                                                                          請求數據

                                                                                                                                          使用 axios 進行數據請求,在 main.js 位置進行全局配置。

                                                                                                                                          src > request 文件統一處理所有的請求

                                                                                                                                          src > request > request.js 請求和響應攔截

                                                                                                                                          // 封裝axios實例的攔截器(請求, 響應)
                                                                                                                                          import axios from 'axios';
                                                                                                                                          
                                                                                                                                          
                                                                                                                                          // 1. 創建axios實例
                                                                                                                                          const instance = axios.create({
                                                                                                                                              timeout: 15000, // 超時時間15s
                                                                                                                                              baseURL: '這里是你請求是ip地址', // ip+端口, 公用的前綴路徑
                                                                                                                                          });
                                                                                                                                          
                                                                                                                                          // 重寫實例請求前攔截器
                                                                                                                                          instance.interceptors.request.use((config) => {
                                                                                                                                          
                                                                                                                                              return config;
                                                                                                                                          }, (err) => {
                                                                                                                                              return Promise.reject(err);
                                                                                                                                          })
                                                                                                                                          
                                                                                                                                          // 重寫實例響應后攔截器
                                                                                                                                          instance.interceptors.response.use((result) => {
                                                                                                                                             
                                                                                                                                              return result.data;
                                                                                                                                          }, (err) => {
                                                                                                                                              return Promise.reject(err);
                                                                                                                                          })
                                                                                                                                          
                                                                                                                                          // 導出axios實例
                                                                                                                                          export default instance;
                                                                                                                                          

                                                                                                                                          src > request > request.js 請求拼接地址

                                                                                                                                          import request from './request';
                                                                                                                                          
                                                                                                                                          // 主要指標 /mcpbd-data/data/mainIndex
                                                                                                                                          export const getMainIndex= () => request.get('/mainIndex')  //這里是get請求,"/mainIndex" 是接口文檔的請求拼接字段
                                                                                                                                          
                                                                                                                                          //......
                                                                                                                                          
                                                                                                                                          

                                                                                                                                          homeword.vue 引入,并發送請求數據

                                                                                                                                          由于一個頁面要發送多個請求,并且成功獲取數據再渲染,我使用了promise.all

                                                                                                                                          并發請求,但是發現請求很慢(不知道有什么方法可以優化)

                                                                                                                                          <template>
                                                                                                                                              ...
                                                                                                                                          </template>
                                                                                                                                          
                                                                                                                                          <script>
                                                                                                                                          import drawMixin from "../utils/drawMixin";
                                                                                                                                          
                                                                                                                                          //接口
                                                                                                                                          import { 
                                                                                                                                            getMainIndex,
                                                                                                                                          } from "../request/httpApi";
                                                                                                                                          
                                                                                                                                          export default {
                                                                                                                                            components: {
                                                                                                                                              //...
                                                                                                                                            },
                                                                                                                                            mixins: [drawMixin],
                                                                                                                                            name: "HelloWorld",
                                                                                                                                            props: {},
                                                                                                                                            data() {
                                                                                                                                              return {
                                                                                                                                                //渲染子組件,還未請求到數據的時候,需要放數據的所有元素不顯示
                                                                                                                                                falg: false,
                                                                                                                                                loading: true,
                                                                                                                                                loadTimer: null,
                                                                                                                                                resd: [],
                                                                                                                                                realVal: 0,
                                                                                                                                                MainIndicators: {
                                                                                                                                                  // 主要指標 默認數據
                                                                                                                                                  userAllCnt: "",
                                                                                                                                                  userNewCnt: "",
                                                                                                                                                  userDailyActvCnt: "",
                                                                                                                                                  userDailyActvRatio: "",
                                                                                                                                                  userMonthlyActvCnt: "",
                                                                                                                                                  userMonthlyActvRatio: "",
                                                                                                                                                  mctAllCnt: "",
                                                                                                                                                },
                                                                                                                                          
                                                                                                                                                //累計注冊用戶數折線
                                                                                                                                               
                                                                                                                                                //....
                                                                                                                                          
                                                                                                                                                mapData: {
                                                                                                                                                  //地圖數據
                                                                                                                                                  mapArr: [],
                                                                                                                                                },
                                                                                                                                              };
                                                                                                                                            },
                                                                                                                                            mounted() {
                                                                                                                                              this.cancelLoading();
                                                                                                                                            },
                                                                                                                                            filters: {
                                                                                                                                              //過濾數據
                                                                                                                                              numFilter(val) {
                                                                                                                                                return (parseFloat(val) * 100).toFixed(1);
                                                                                                                                              },
                                                                                                                                            },
                                                                                                                                            created() {
                                                                                                                                              this.getJ();
                                                                                                                                              this.getShishi();
                                                                                                                                              // 實時更新數據(隔一個小時請求數據)
                                                                                                                                              setInterval(() => {
                                                                                                                                                this.getJ();
                                                                                                                                              }, 3600000);
                                                                                                                                              //左下角數據實時更新(1分鐘)
                                                                                                                                              setInterval(() => {
                                                                                                                                                this.getShishi();
                                                                                                                                              }, 60000);
                                                                                                                                            },
                                                                                                                                            methods: {
                                                                                                                                              getShishi() {
                                                                                                                                                //左下角數據 (因為這部分數據需要每分鐘更新一次所以單獨拎出來)
                                                                                                                                                getRealTimeIndex()  //發送請求
                                                                                                                                                  .then((res) => {
                                                                                                                                                    this.RealTimeIndex.newUserAllUserCnt = [];
                                                                                                                                                    this.RealTimeIndex.newUserAllUserDate = [];
                                                                                                                                                    this.resd = res;
                                                                                                                                                    this.resd.forEach((item) => {
                                                                                                                                                      this.RealTimeIndex.newUserAllUserCnt.push(
                                                                                                                                                        Number(item.userAllCnt).toFixed()
                                                                                                                                                      ),
                                                                                                                                                        this.RealTimeIndex.newUserAllUserDate.push(
                                                                                                                                                          item.calTime.substring(11)
                                                                                                                                                        );
                                                                                                                                                    });
                                                                                                                                                  })
                                                                                                                                                  .catch((err) => {
                                                                                                                                                    return;
                                                                                                                                                  });
                                                                                                                                              },
                                                                                                                                              sortData(attr) {
                                                                                                                                                return function (a, b) {
                                                                                                                                                  return b[attr] - a[attr];
                                                                                                                                                };
                                                                                                                                              },
                                                                                                                                              getJ() {
                                                                                                                                                // 累計注冊用戶
                                                                                                                                                let p1 = new Promise((resolve, reject) => {
                                                                                                                                                  getUserAllCnt()
                                                                                                                                                    .then((res) => {
                                                                                                                                                      resolve(res);
                                                                                                                                                    })
                                                                                                                                                    .catch((err) => {
                                                                                                                                                      reject(err);
                                                                                                                                                    });
                                                                                                                                                });
                                                                                                                                          
                                                                                                                                                // 用戶
                                                                                                                                                let p2 = new Promise((resolve, reject) => {
                                                                                                                                                 //....
                                                                                                                                                });
                                                                                                                                                // 累計用戶數
                                                                                                                                                let p3 = new Promise((resolve, reject) => {
                                                                                                                                                  //....
                                                                                                                                                });
                                                                                                                                                // 日活用戶數
                                                                                                                                                let p4 = new Promise((resolve, reject) => {
                                                                                                                                                   //....
                                                                                                                                                });
                                                                                                                                          
                                                                                                                                                // 新增用戶數
                                                                                                                                                let p5 = new Promise((resolve, reject) => {
                                                                                                                                                  //....
                                                                                                                                                });
                                                                                                                                                // 指標排行表
                                                                                                                                                let p6 = new Promise((resolve, reject) => {
                                                                                                                                                  //....
                                                                                                                                                });
                                                                                                                                          
                                                                                                                                                // 主要指標
                                                                                                                                                let p7 = new Promise((resolve, reject) => {
                                                                                                                                                  getMainIndex()
                                                                                                                                                    .then((res) => {
                                                                                                                                                      setTimeout(() => {
                                                                                                                                                        resolve(res);
                                                                                                                                                      }, 700);
                                                                                                                                                    })
                                                                                                                                                    .catch((err) => {
                                                                                                                                                      reject(err);
                                                                                                                                                    });
                                                                                                                                                });
                                                                                                                                                // 地圖數據省份
                                                                                                                                                let p8 = new Promise((resolve, reject) => {
                                                                                                                                                  //....
                                                                                                                                                });
                                                                                                                                          
                                                                                                                                                Promise.all([p1, p2, p3, p4, p5, p6, p7, p8])
                                                                                                                                                  .then((res) => {
                                                                                                                                                    // 累計注冊用戶
                                                                                                                                                 	  //數據處理。。。
                                                                                                                                          
                                                                                                                                                    // 日活
                                                                                                                                                   //數據處理。。。
                                                                                                                                          
                                                                                                                                                    // 累計用戶數 (只展示前5條數據)
                                                                                                                                                   //數據處理。。。
                                                                                                                                          
                                                                                                                                                    // 日活用戶數
                                                                                                                                                 //數據處理。。。
                                                                                                                                          
                                                                                                                                                    // 新增用戶數
                                                                                                                                                    //數據處理。。。
                                                                                                                                          
                                                                                                                                                    // 指標排行表
                                                                                                                                                    //數據處理。。。
                                                                                                                                          
                                                                                                                                                    // 主要指標
                                                                                                                                                    let mainIndex = res[6];
                                                                                                                                                    this.MainIndicators.userAllCnt = Number(
                                                                                                                                                      mainIndex.userAllCnt
                                                                                                                                                    ).toLocaleString("en-US"); //使用千分符
                                                                                                                                                    this.MainIndicators.userNewCnt = Number(
                                                                                                                                                      mainIndex.userNewCnt
                                                                                                                                                    ).toLocaleString("en-US");
                                                                                                                                                    this.MainIndicators.userDailyActvCnt = Number(
                                                                                                                                                      mainIndex.userDailyActvCnt
                                                                                                                                                    ).toLocaleString("en-US");
                                                                                                                                                    this.MainIndicators.userDailyActvRatio = mainIndex.userDailyActvRatio;
                                                                                                                                                    this.MainIndicators.userMonthlyActvCnt = Number(
                                                                                                                                                      mainIndex.userMonthlyActvCnt
                                                                                                                                                    ).toLocaleString("en-US");
                                                                                                                                                    this.MainIndicators.userMonthlyActvRatio =
                                                                                                                                                      mainIndex.userMonthlyActvRatio;
                                                                                                                                                    this.MainIndicators.mctAllCnt = Number(
                                                                                                                                                      mainIndex.mctAllCnt
                                                                                                                                                    ).toLocaleString("en-US");
                                                                                                                                          
                                                                                                                                                    //  地圖省份指標
                                                                                                                                                    let FenUserMap = res[7];
                                                                                                                                                    this.mapData.mapArr = FenUserMap.map((item) => ({
                                                                                                                                                      name: item.regionName,
                                                                                                                                                      value: Number(item.userAllCnt).toFixed(),
                                                                                                                                                      ratio: (Number(item.userActvDailyRatio) * 100).toFixed(1),
                                                                                                                                                    }));
                                                                                                                                                    //由于暫無數據隱藏南海諸島,不太好,后面想到既然可以隱藏也可以將提示信息改成暫無數據
                                                                                                                                                    this.mapData.mapArr.push({  
                                                                                                                                                      name: "南海諸島",
                                                                                                                                                      value: 0,
                                                                                                                                                      itemStyle: { opacity: 0, label: { show: false } },
                                                                                                                                                    });
                                                                                                                                          
                                                                                                                                                    this.falg = true; //子組件渲染
                                                                                                                                                  })
                                                                                                                                                  .catch((err) => {});
                                                                                                                                              },
                                                                                                                                          
                                                                                                                                              cancelLoading() {
                                                                                                                                                if (!this.loadTimer) {
                                                                                                                                                  this.loadTimer = setTimeout(() => {
                                                                                                                                                    this.loading = false;
                                                                                                                                                  }, 500);
                                                                                                                                                } else {
                                                                                                                                                  clearTimeout(this.loadTimer);
                                                                                                                                                }
                                                                                                                                              },
                                                                                                                                             
                                                                                                                                            },
                                                                                                                                            destroyed() {},
                                                                                                                                          };
                                                                                                                                          </script>
                                                                                                                                          
                                                                                                                                          
                                                                                                                                          分類: 科技 關鍵詞: 數據大屏
                                                                                                                                          原文 編輯 投訴 置頂 分享
                                                                                                                                          推薦
                                                                                                                                          快訊
                                                                                                                                          劇透網 展會網 鄉村游
                                                                                                                                          營銷軟件 行業信息

                                                                                                                                          營銷 網絡營銷 自媒體營銷 產品推廣 營銷策劃 媒體投放 電商營銷 廣告聯盟 科技 大數據 人工智能 智能硬件 工業互聯網 物聯網
                                                                                                                                          財經 跨境電商 投資理財 量化交易 價值投資 招商加盟 食品招商 餐飲加盟

                                                                                                                                          版權所有©貴客云    QQ732055019 交談 魯ICP備08109250號-5
                                                                                                                                          魯公網安備 37020302371242號
                                                                                                                                          天堂最新版资源网,6080新视觉YY理论片,美女丝袜裸身喷水视频,国产亚洲日韩明星网曝 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>