├── .gitignore
├── babel.config.js
├── public
    ├── bg.jpg
    ├── favicon.ico
    ├── index.html
    └── css
    │   └── normalize.min.css
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── views
    │   ├── Home.vue
    │   ├── grid1.vue
    │   └── grid2.vue
    ├── router.js
    ├── libs
    │   └── util.js
    ├── App.vue
    └── components
    │   └── dashboard
    │       ├── charts
    │           ├── gauge
    │           │   └── index.vue
    │           ├── bar
    │           │   └── index.vue
    │           ├── scatter
    │           │   └── index.vue
    │           ├── line
    │           │   └── index.vue
    │           ├── dataset
    │           │   └── index.vue
    │           ├── pie
    │           │   └── index.vue
    │           ├── radar
    │           │   └── index.vue
    │           ├── graph
    │           │   └── index.vue
    │           └── bar2
    │           │   └── index.vue
    │       ├── index.vue
    │       ├── index-grid2.vue
    │       └── index-grid.vue
├── package.json
├── LICENSE
├── vue.config.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MengFangui/vue-data-visualization/HEAD/public/bg.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MengFangui/vue-data-visualization/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MengFangui/vue-data-visualization/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import echarts from 'echarts'
 5 | import { debounce } from './libs/util'
 6 | Vue.prototype.$echarts = echarts
 7 | Vue.prototype.$debounce = debounce
 8 | 
 9 | Vue.config.productionTip = false
10 | 
11 | new Vue({
12 |   router,
13 |   render: h => h(App)
14 | }).$mount('#app')
15 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <dashboard></dashboard>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import dashboard from '_c/dashboard/index.vue'
 9 | 
10 | export default {
11 |   name: 'home',
12 |   components: {
13 |     dashboard
14 |   }
15 | }
16 | </script>
17 | <style scoped>
18 | .home{
19 |   width: 100%;
20 |   height: 100%;
21 | }
22 | </style>
23 | 
24 | 


--------------------------------------------------------------------------------
/src/views/grid1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <dashboard></dashboard>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import dashboard from '_c/dashboard/index-grid.vue'
 9 | 
10 | export default {
11 |   name: 'home',
12 |   components: {
13 |     dashboard
14 |   }
15 | }
16 | </script>
17 | <style scoped>
18 | .home{
19 |   width: 100%;
20 |   height: 100%;
21 | }
22 | </style>
23 | 
24 | 


--------------------------------------------------------------------------------
/src/views/grid2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <dashboard></dashboard>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import dashboard from '_c/dashboard/index-grid2.vue'
 9 | 
10 | export default {
11 |   name: 'home',
12 |   components: {
13 |     dashboard
14 |   }
15 | }
16 | </script>
17 | <style scoped>
18 | .home{
19 |   width: 100%;
20 |   height: 100%;
21 | }
22 | </style>
23 | 
24 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | import grid1 from './views/grid1.vue'
 5 | import grid2 from './views/grid2.vue'
 6 | 
 7 | Vue.use(Router)
 8 | 
 9 | export default new Router({
10 |   routes: [
11 |     {
12 |       path: '/',
13 |       name: 'home',
14 |       component: Home
15 |     },
16 |     {
17 |       path: '/grid1',
18 |       name: 'grid1',
19 |       component: grid1
20 |     },
21 |     {
22 |       path: '/grid2',
23 |       name: 'grid2',
24 |       component: grid2
25 |     }
26 |   ]
27 | })
28 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>数据可视化</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-data-visualization doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/libs/util.js:
--------------------------------------------------------------------------------
 1 | // 函数防抖
 2 | export function debounce(fn, wait, immediate) {
 3 |     let timer;
 4 |     return function () {
 5 |         if (timer) clearTimeout(timer);
 6 |         if (immediate) {
 7 |             // 如果已经执行过，不再执行
 8 |             var callNow = !timer;
 9 |             timer = setTimeout(() => {
10 |                 timer = null;
11 |             }, wait)
12 |             if (callNow) {
13 |                 fn.apply(this, arguments)
14 |             }
15 |         } else {
16 |             timer = setTimeout(() => {
17 |                 fn.apply(this, arguments)
18 |             }, wait);
19 |         }
20 |     }
21 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-data-visualization",
 3 |   "version": "1.0.0",
 4 |   "private": false,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "core-js": "^2.6.5",
11 |     "echarts": "^4.2.1",
12 |     "vue": "^2.6.10",
13 |     "vue-router": "^3.0.3"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "^3.10.0",
17 |     "@vue/cli-service": "^3.10.0",
18 |     "vue-template-compiler": "^2.6.10"
19 |   },
20 |   "postcss": {
21 |     "plugins": {
22 |       "autoprefixer": {}
23 |     }
24 |   },
25 |   "browserslist": [
26 |     "> 1%",
27 |     "last 2 versions"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style scoped>
 8 | @import '/css/normalize.min.css'
 9 | </style>
10 | 
11 | <style>
12 | html, body {
13 |   width: 100%;
14 |   height: 100%;
15 | }
16 | #app {
17 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
18 |   -webkit-font-smoothing: antialiased;
19 |   -moz-osx-font-smoothing: grayscale;
20 |   text-align: center;
21 |   color: #2c3e50;
22 |   width: 100%;
23 |   height: 100%;
24 | }
25 | #nav {
26 |   padding: 30px;
27 | }
28 | 
29 | #nav a {
30 |   font-weight: bold;
31 |   color: #2c3e50;
32 | }
33 | 
34 | #nav a.router-link-exact-active {
35 |   color: #42b983;
36 | }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 MengFangui
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | const resolve = dir => {
 4 |   return path.join(__dirname, dir)
 5 | }
 6 | 
 7 | const BASE_URL = process.env.NODE_ENV === 'production'
 8 |   ? './'
 9 |   : './'
10 | 
11 | module.exports = {
12 |   baseUrl: BASE_URL,
13 |   outputDir: 'dist',
14 |   pages: {
15 |     index: {
16 |       // page 的入口
17 |       entry: 'src/main.js',
18 |       // 模板来源
19 |       template: 'public/index.html',
20 |       filename: 'index.html',
21 |       title: "大屏可视化",
22 |       // 在这个页面中包含的块，默认情况下会包含
23 |       // 提取出来的通用 chunk 和 vendor chunk。
24 |       chunks: ['chunk-vendors', 'chunk-common', 'index']
25 |     }
26 |   },
27 |   lintOnSave: process.env.NODE_ENV === 'development',
28 |   parallel: require('os').cpus().length > 1,
29 |   chainWebpack: config => {
30 |     config.resolve.alias
31 |       .set('@', resolve('src'))
32 |       .set('_c', resolve('src/components'))
33 |   },
34 | 
35 |   // 设为false打包时不生成.map文件
36 |   productionSourceMap: false,
37 |   devServer: {
38 |     quiet: false,
39 |     watchOptions: {
40 |       poll: true
41 |     },
42 |     // 在浏览器上全屏显示编译的errors或warnings。
43 |     overlay: {
44 |       warnings: false,
45 |       errors: true
46 |     }
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/components/dashboard/charts/gauge/index.vue:
--------------------------------------------------------------------------------
 1 | <!--  -->
 2 | <template>
 3 | <div class='gauge' id="gauge">    
 4 | </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | let myChart = null;
 9 | export default {
10 |   components: {},
11 |   data() {
12 |     return {
13 |       option: {
14 |         title: {
15 |           text: "仪表盘",
16 |           textStyle: {
17 |             color: "#fff"
18 |           }
19 |         },
20 |         tooltip: {
21 |           formatter: "{a} <br/>{b} : {c}%"
22 |         },
23 |         toolbox: {
24 |           feature: {
25 |             restore: {},
26 |             saveAsImage: {}
27 |           }
28 |         },
29 |         series: [
30 |           {
31 |             name: "业务指标",
32 |             type: "gauge",
33 |             detail: { formatter: "{value}%" },
34 |             data: [{ value: 50, name: "完成率" }]
35 |           }
36 |         ]
37 |       }
38 |     };
39 |   },
40 |   methods: {
41 |     drawgauge() {
42 |       // 绘制图表
43 |       myChart.setOption(this.option);
44 |     }
45 |   },
46 |   mounted() {
47 |     // 基于准备好的dom，初始化echarts实例
48 |     myChart = this.$echarts.init(document.getElementById("gauge"));
49 |     this.drawgauge();
50 |     // 窗口改变时重新绘制
51 |     window.addEventListener("resize", this.$debounce(myChart.resize, 500));
52 |   }
53 | };
54 | </script>
55 | <style scoped>
56 | .gauge {
57 |   width: 100%;
58 |   height: 100%;
59 | }
60 | </style>


--------------------------------------------------------------------------------
/src/components/dashboard/charts/bar/index.vue:
--------------------------------------------------------------------------------
 1 | <!--  -->
 2 | <template>
 3 | <div class='bar' id="bar">    
 4 | </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | let myChart = null;
 9 | export default {
10 |   components: {},
11 |   data() {
12 |     return {
13 |       option: {
14 |         title: {
15 |           text: "柱状图",
16 |           textStyle: {
17 |             color: "#fff"
18 |           }
19 |         },
20 |         xAxis: {
21 |           type: "category",
22 |           data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
23 |           axisLine: {
24 |             lineStyle: {
25 |               color: "#fff",
26 |               width: 1
27 |             }
28 |           }
29 |         },
30 |         yAxis: {
31 |           type: "value",
32 |           axisLine: {
33 |             lineStyle: {
34 |               color: "#fff",
35 |               width: 1
36 |             }
37 |           }
38 |         },
39 |         series: [
40 |           {
41 |             data: [120, 200, 150, 80, 70, 110, 130],
42 |             type: "bar"
43 |           }
44 |         ]
45 |       }
46 |     };
47 |   },
48 |   methods: {
49 |     drawbar() {
50 |       // 绘制图表
51 |       myChart.setOption(this.option);
52 |     }
53 |   },
54 |   mounted() {
55 |     // 基于准备好的dom，初始化echarts实例
56 |     myChart = this.$echarts.init(document.getElementById("bar"));
57 |     this.drawbar();
58 |     // 窗口改变时重新绘制
59 |     window.addEventListener("resize", this.$debounce(myChart.resize, 500));
60 |   }
61 | };
62 | </script>
63 | <style scoped>
64 | .bar {
65 |   width: 100%;
66 |   height: 100%;
67 | }
68 | </style>


--------------------------------------------------------------------------------
/public/css/normalize.min.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
2 | /*# sourceMappingURL=normalize.min.css.map */


--------------------------------------------------------------------------------
/src/components/dashboard/charts/scatter/index.vue:
--------------------------------------------------------------------------------
 1 | <!--  -->
 2 | <template>
 3 | <div class='scatter' id="scatter">    
 4 | </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | let myChart = null;
 9 | export default {
10 |   components: {},
11 |   data() {
12 |     return {
13 |       option: {
14 |         title: {
15 |           text: "散点图",
16 |           textStyle: {
17 |             color: "#fff"
18 |           }
19 |         },
20 |         xAxis: {
21 |           axisLine: {
22 |             lineStyle: {
23 |               color: "#fff",
24 |               width: 1
25 |             }
26 |           }
27 |         },
28 |         yAxis: {
29 |           axisLine: {
30 |             lineStyle: {
31 |               color: "#fff",
32 |               width: 1
33 |             }
34 |           }
35 |         },
36 |         series: [
37 |           {
38 |             symbolSize: 20,
39 |             data: [
40 |               [10.0, 8.04],
41 |               [8.0, 6.95],
42 |               [13.0, 7.58],
43 |               [9.0, 8.81],
44 |               [11.0, 8.33],
45 |               [14.0, 9.96],
46 |               [6.0, 7.24],
47 |               [4.0, 4.26],
48 |               [12.0, 10.84],
49 |               [7.0, 4.82],
50 |               [5.0, 5.68]
51 |             ],
52 |             type: "scatter"
53 |           }
54 |         ]
55 |       }
56 |     };
57 |   },
58 |   methods: {
59 |     drawscatter() {
60 |       // 绘制图表
61 |       myChart.setOption(this.option);
62 |     }
63 |   },
64 |   mounted() {
65 |     // 基于准备好的dom，初始化echarts实例
66 |     myChart = this.$echarts.init(document.getElementById("scatter"));
67 |     this.drawscatter();
68 |     // 窗口改变时重新绘制
69 |     window.addEventListener("resize", this.$debounce(myChart.resize, 500));
70 |   }
71 | };
72 | </script>
73 | <style scoped>
74 | .scatter {
75 |   width: 100%;
76 |   height: 100%;
77 | }
78 | </style>


--------------------------------------------------------------------------------
/src/components/dashboard/charts/line/index.vue:
--------------------------------------------------------------------------------
 1 | <!--  -->
 2 | <template>
 3 |   <div class='line' id="line"></div>
 4 | </template>
 5 | 
 6 | <script>
 7 | let myChart = null;
 8 | export default {
 9 |   components: {},
10 |   data() {
11 |     return {
12 |       option: {
13 |         title: {
14 |           text: "折线图",
15 |           textStyle: {
16 |             color: "#fff"
17 |           }
18 |         },
19 |         xAxis: {
20 |           type: "category",
21 |           data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
22 |           axisLine: {
23 |             lineStyle: {
24 |               color: "#fff",
25 |               width: 1
26 |             }
27 |           },
28 |           axisLabel: {
29 |             // 防止坐标轴标签显示空间不全
30 |             rotate: -30
31 |           },
32 |           // 防止坐标轴标签显示空间不全
33 |           interval: 0
34 |         },
35 |         yAxis: {
36 |           type: "value",
37 |           axisLine: {
38 |             lineStyle: {
39 |               color: "#fff",
40 |               width: 1
41 |             }
42 |           }
43 |         },
44 |         series: [
45 |           {
46 |             data: [820, 932, 901, 934, 1290, 1330, 1320],
47 |             type: "line"
48 |           }
49 |         ],
50 |         // 图例区域太大导致遮挡住图表
51 |         grid: {
52 |           left: "3%",
53 |           right: "3%",
54 |           bottom: 80,
55 |           containLabel: true
56 |         },
57 |       }
58 |     };
59 |   },
60 |   methods: {
61 |     drawLine() {
62 |       // 绘制图表
63 |       myChart.setOption(this.option);
64 |     }
65 |   },
66 |   mounted() {
67 |     // 基于准备好的dom，初始化echarts实例
68 |     myChart = this.$echarts.init(document.getElementById("line"));
69 |     this.drawLine();
70 |     // 窗口改变时重新绘制
71 |     window.addEventListener("resize", this.$debounce(myChart.resize, 500));
72 |   }
73 | };
74 | </script>
75 | <style scoped>
76 | .line {
77 |   width: 100%;
78 |   height: 100%;
79 | }
80 | </style>


--------------------------------------------------------------------------------
/src/components/dashboard/index.vue:
--------------------------------------------------------------------------------
 1 | <!--  -->
 2 | <template>
 3 | <div class='dashboard'>
 4 |     <div class="item">
 5 |       <button>操作相关按钮</button>
 6 |       <line-chart></line-chart>
 7 |     </div>
 8 |     <div class="item">
 9 |       <bar-chart></bar-chart>
10 |     </div>
11 |     <div class="item">
12 |       <pie-chart></pie-chart>
13 |     </div>
14 |     <div class="item">
15 |       <scatter-chart></scatter-chart>
16 |     </div>
17 |     <div class="item">
18 |       <radar-chart></radar-chart>
19 |     </div>
20 |     <div class="item">
21 |       <graph-chart></graph-chart>
22 |     </div>
23 |     <div class="item">
24 |       <gauge-chart></gauge-chart>
25 |     </div>
26 |     <div class="item">
27 |       <dataset-chart></dataset-chart>
28 |     </div>
29 |     <div class="item">
30 |       <bar2-chart></bar2-chart>
31 |     </div>
32 | </div>
33 | </template>
34 | 
35 | <script>
36 | import lineChart from './charts/line'
37 | import barChart from './charts/bar'
38 | import pieChart from './charts/pie'
39 | import scatterChart from './charts/scatter'
40 | import radarChart from './charts/radar'
41 | import graphChart from './charts/graph'
42 | import gaugeChart from './charts/gauge'
43 | import datasetChart from './charts/dataset'
44 | import bar2Chart from './charts/bar2'
45 | export default {
46 |   components: {lineChart,barChart,pieChart,scatterChart,radarChart,graphChart,gaugeChart,datasetChart,bar2Chart},
47 |   data() {
48 |     return {};
49 |   },
50 |   methods: {},
51 |   created() {},
52 |   mounted() {}
53 | };
54 | </script>
55 | <style scoped>
56 | .dashboard {
57 |   width: 100%;
58 |   height: 100%;
59 |   /* public文件夹下文件使用绝对路径即可 */
60 |   background: #000 url(/bg.jpg) no-repeat center center;
61 |   /* 网格布局 */
62 |   display: grid;
63 |   grid-template-columns: 29% 40% 29%;
64 |   grid-template-rows: 32.333% 33.333% 32.333%;
65 |   /* 行间距和列间距均是1% */
66 |   grid-gap: 1% 1%;
67 | }
68 | .item{
69 |   border: 2px solid #fff
70 | }
71 | </style>


--------------------------------------------------------------------------------
/src/components/dashboard/index-grid2.vue:
--------------------------------------------------------------------------------
 1 | <!--  -->
 2 | <template>
 3 | <div class='dashboard'>
 4 |     <div class="item item-1">
 5 |       <button>操作相关按钮</button>
 6 |       <line-chart></line-chart>
 7 |     </div>
 8 |     <div class="item">
 9 |       <bar-chart></bar-chart>
10 |     </div>
11 |     <div class="item">
12 |       <pie-chart></pie-chart>
13 |     </div>
14 |     <div class="item">
15 |       <scatter-chart></scatter-chart>
16 |     </div>
17 |     <div class="item">
18 |       <radar-chart></radar-chart>
19 |     </div>
20 |     <div class="item">
21 |       <graph-chart></graph-chart>
22 |     </div>
23 |     <div class="item">
24 |       <gauge-chart></gauge-chart>
25 |     </div>
26 |     <div class="item">
27 |       <dataset-chart></dataset-chart>
28 |     </div>
29 | </div>
30 | </template>
31 | 
32 | <script>
33 | import lineChart from './charts/line'
34 | import barChart from './charts/bar'
35 | import pieChart from './charts/pie'
36 | import scatterChart from './charts/scatter'
37 | import radarChart from './charts/radar'
38 | import graphChart from './charts/graph'
39 | import gaugeChart from './charts/gauge'
40 | import datasetChart from './charts/dataset'
41 | import bar2Chart from './charts/bar2'
42 | export default {
43 |   components: {lineChart,barChart,pieChart,scatterChart,radarChart,graphChart,gaugeChart,datasetChart,bar2Chart},
44 |   data() {
45 |     return {};
46 |   },
47 |   methods: {},
48 |   created() {},
49 |   mounted() {}
50 | };
51 | </script>
52 | <style scoped>
53 | .dashboard {
54 |   width: 100%;
55 |   height: 100%;
56 |   /* public文件夹下文件使用绝对路径即可 */
57 |   background: #000 url(/bg.jpg) no-repeat center center;
58 |   /* 网格布局 */
59 |   display: grid;
60 |   grid-template-columns: 29% 40% 29%;
61 |   grid-template-rows: 32.333% 33.333% 32.333%;
62 |   /* 行间距和列间距均是1% */
63 |   grid-gap: 1% 1%;
64 | }
65 | .item{
66 |   border: 2px solid red
67 | }
68 | .item-1 {
69 |   /* 行合并 */
70 |   grid-row-start: 1;
71 |   grid-row-end: 3;
72 | }
73 | </style>


--------------------------------------------------------------------------------
/src/components/dashboard/index-grid.vue:
--------------------------------------------------------------------------------
 1 | <!--  -->
 2 | <template>
 3 | <div class='dashboard'>
 4 |     <div class="item item-1">
 5 |       <button>操作相关按钮</button>
 6 |       <line-chart></line-chart>
 7 |     </div>
 8 |     <div class="item">
 9 |       <bar-chart></bar-chart>
10 |     </div>
11 |     <div class="item">
12 |       <pie-chart></pie-chart>
13 |     </div>
14 |     <div class="item">
15 |       <scatter-chart></scatter-chart>
16 |     </div>
17 |     <div class="item">
18 |       <radar-chart></radar-chart>
19 |     </div>
20 |     <div class="item">
21 |       <graph-chart></graph-chart>
22 |     </div>
23 |     <div class="item">
24 |       <gauge-chart></gauge-chart>
25 |     </div>
26 |     <div class="item">
27 |       <dataset-chart></dataset-chart>
28 |     </div>
29 | </div>
30 | </template>
31 | 
32 | <script>
33 | import lineChart from './charts/line'
34 | import barChart from './charts/bar'
35 | import pieChart from './charts/pie'
36 | import scatterChart from './charts/scatter'
37 | import radarChart from './charts/radar'
38 | import graphChart from './charts/graph'
39 | import gaugeChart from './charts/gauge'
40 | import datasetChart from './charts/dataset'
41 | import bar2Chart from './charts/bar2'
42 | export default {
43 |   components: {lineChart,barChart,pieChart,scatterChart,radarChart,graphChart,gaugeChart,datasetChart,bar2Chart},
44 |   data() {
45 |     return {};
46 |   },
47 |   methods: {},
48 |   created() {},
49 |   mounted() {}
50 | };
51 | </script>
52 | <style scoped>
53 | .dashboard {
54 |   width: 100%;
55 |   height: 100%;
56 |   /* public文件夹下文件使用绝对路径即可 */
57 |   background: #000 url(/bg.jpg) no-repeat center center;
58 |   /* 网格布局 */
59 |   display: grid;
60 |   grid-template-columns: 29% 40% 29%;
61 |   grid-template-rows: 32.333% 33.333% 32.333%;
62 |   /* 行间距和列间距均是1% */
63 |   grid-gap: 1% 1%;
64 | }
65 | .item{
66 |   border: 2px solid red
67 | }
68 | .item-1 {
69 |   /* 行合并 */
70 |   grid-column-start: 1;
71 |   grid-column-end: 3;
72 | }
73 | </style>


--------------------------------------------------------------------------------
/src/components/dashboard/charts/dataset/index.vue:
--------------------------------------------------------------------------------
 1 | <!--  -->
 2 | <template>
 3 | <div class='calendar' id="calendar">    
 4 | </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | let myChart = null;
 9 | export default {
10 |   components: {},
11 |   data() {
12 |     return {
13 |       option: {
14 |         title: {
15 |           text: "数据集",
16 |           textStyle: {
17 |             color: "#fff"
18 |           }
19 |         },
20 |         legend: {
21 |           textStyle: {
22 |             color: "#fff"
23 |           }
24 |         },
25 |         tooltip: {},
26 |         dataset: {
27 |           source: [
28 |             ["product", "2015", "2016", "2017"],
29 |             ["Matcha Latte", 43.3, 85.8, 93.7],
30 |             ["Milk Tea", 83.1, 73.4, 55.1],
31 |             ["Cheese Cocoa", 86.4, 65.2, 82.5],
32 |             ["Walnut Brownie", 72.4, 53.9, 39.1]
33 |           ]
34 |         },
35 |         xAxis: {
36 |           type: "category",
37 |           axisLine: {
38 |             lineStyle: {
39 |               color: "#fff",
40 |               width: 1
41 |             }
42 |           }
43 |         },
44 |         yAxis: {
45 |           axisLine: {
46 |             lineStyle: {
47 |               color: "#fff",
48 |               width: 1
49 |             }
50 |           }
51 |         },
52 |         // Declare several bar series, each will be mapped
53 |         // to a column of dataset.source by default.
54 |         series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]
55 |       }
56 |     };
57 |   },
58 |   methods: {
59 |     drawcalendar() {
60 |       // 绘制图表
61 |       myChart.setOption(this.option);
62 |     }
63 |   },
64 |   mounted() {
65 |     // 基于准备好的dom，初始化echarts实例
66 |     myChart = this.$echarts.init(document.getElementById("calendar"));
67 |     this.drawcalendar();
68 |     // 窗口改变时重新绘制
69 |     window.addEventListener("resize", this.$debounce(myChart.resize, 500));
70 |   }
71 | };
72 | </script>
73 | <style scoped>
74 | .calendar {
75 |   width: 100%;
76 |   height: 100%;
77 | }
78 | </style>


--------------------------------------------------------------------------------
/src/components/dashboard/charts/pie/index.vue:
--------------------------------------------------------------------------------
 1 | <!--  -->
 2 | <template>
 3 | <div class='pie' id="pie">    
 4 | </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | let myChart = null;
 9 | export default {
10 |   components: {},
11 |   data() {
12 |     return {
13 |       option: {
14 |         tooltip: {
15 |           trigger: "item",
16 |           formatter: "{a} <br/>{b}: {c} ({d}%)"
17 |         },
18 |         legend: {
19 |           orient: "vertical",
20 |           x: "left",
21 |           data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
22 |           textStyle: {
23 |             color: "#fff"
24 |           }
25 |         },
26 |         series: [
27 |           {
28 |             name: "访问来源",
29 |             type: "pie",
30 |             radius: ["50%", "70%"],
31 |             avoidLabelOverlap: false,
32 |             label: {
33 |               normal: {
34 |                 show: false,
35 |                 position: "center"
36 |               },
37 |               emphasis: {
38 |                 show: true,
39 |                 textStyle: {
40 |                   fontSize: "30",
41 |                   fontWeight: "bold"
42 |                 }
43 |               }
44 |             },
45 |             labelLine: {
46 |               normal: {
47 |                 show: false
48 |               }
49 |             },
50 |             data: [
51 |               { value: 335, name: "直接访问" },
52 |               { value: 310, name: "邮件营销" },
53 |               { value: 234, name: "联盟广告" },
54 |               { value: 135, name: "视频广告" },
55 |               { value: 1548, name: "搜索引擎" }
56 |             ]
57 |           }
58 |         ]
59 |       }
60 |     };
61 |   },
62 |   methods: {
63 |     drawpie() {
64 |       // 绘制图表
65 |       myChart.setOption(this.option);
66 |     }
67 |   },
68 |   mounted() {
69 |     // 基于准备好的dom，初始化echarts实例
70 |     myChart = this.$echarts.init(document.getElementById("pie"));
71 |     this.drawpie();
72 |     // 窗口改变时重新绘制
73 |     window.addEventListener("resize", this.$debounce(myChart.resize, 500));
74 |   }
75 | };
76 | </script>
77 | <style scoped>
78 | .pie {
79 |   width: 100%;
80 |   height: 100%;
81 | }
82 | </style>


--------------------------------------------------------------------------------
/src/components/dashboard/charts/radar/index.vue:
--------------------------------------------------------------------------------
 1 | <!--  -->
 2 | <template>
 3 | <div class='radar' id="radar">    
 4 | </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | let myChart = null;
 9 | export default {
10 |   components: {},
11 |   data() {
12 |     return {
13 |       option: {
14 |         title: {
15 |           text: "基础雷达图",
16 |           textStyle: {
17 |             color: "#fff"
18 |           }
19 |         },
20 |         tooltip: {},
21 |         legend: {
22 |           data: ["预算分配（Allocated Budget）", "实际开销（Actual Spending）"],
23 |           textStyle: {
24 |             color: "#fff"
25 |           }
26 |         },
27 |         radar: {
28 |           // shape: 'circle',
29 |           name: {
30 |             textStyle: {
31 |               color: "#fff",
32 |               backgroundColor: "#999",
33 |               borderRadius: 3,
34 |               padding: [3, 5]
35 |             }
36 |           },
37 |           indicator: [
38 |             { name: "销售（sales）", max: 6500 },
39 |             { name: "管理（Administration）", max: 16000 },
40 |             { name: "信息技术（Information Techology）", max: 30000 },
41 |             { name: "客服（Customer Support）", max: 38000 },
42 |             { name: "研发（Development）", max: 52000 },
43 |             { name: "市场（Marketing）", max: 25000 }
44 |           ]
45 |         },
46 |         series: [
47 |           {
48 |             name: "预算 vs 开销（Budget vs spending）",
49 |             type: "radar",
50 |             // areaStyle: {normal: {}},
51 |             data: [
52 |               {
53 |                 value: [4300, 10000, 28000, 35000, 50000, 19000],
54 |                 name: "预算分配（Allocated Budget）"
55 |               },
56 |               {
57 |                 value: [5000, 14000, 28000, 31000, 42000, 21000],
58 |                 name: "实际开销（Actual Spending）"
59 |               }
60 |             ]
61 |           }
62 |         ]
63 |       }
64 |     };
65 |   },
66 |   methods: {
67 |     drawradar() {
68 |       // 绘制图表
69 |       myChart.setOption(this.option);
70 |     }
71 |   },
72 |   mounted() {
73 |     // 基于准备好的dom，初始化echarts实例
74 |     myChart = this.$echarts.init(document.getElementById("radar"));
75 |     this.drawradar();
76 |     // 窗口改变时重新绘制
77 |     window.addEventListener("resize", this.$debounce(myChart.resize, 500));
78 |   }
79 | };
80 | </script>
81 | <style scoped>
82 | .radar {
83 |   width: 100%;
84 |   height: 100%;
85 | }
86 | </style>


--------------------------------------------------------------------------------
/src/components/dashboard/charts/graph/index.vue:
--------------------------------------------------------------------------------
  1 | <!--  -->
  2 | <template>
  3 | <div class='graph' id="graph">    
  4 | </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | let myChart = null;
  9 | export default {
 10 |   components: {},
 11 |   data() {
 12 |     return {
 13 |       option: {
 14 |         title: {
 15 |           text: "Graph 示例",
 16 |           textStyle: {
 17 |             color: "#fff"
 18 |           }
 19 |         },
 20 |         tooltip: {},
 21 |         animationDurationUpdate: 1500,
 22 |         animationEasingUpdate: "quinticInOut",
 23 |         series: [
 24 |           {
 25 |             type: "graph",
 26 |             layout: "none",
 27 |             symbolSize: 50,
 28 |             roam: true,
 29 |             label: {
 30 |               normal: {
 31 |                 show: true
 32 |               }
 33 |             },
 34 |             edgeSymbol: ["circle", "arrow"],
 35 |             edgeSymbolSize: [4, 10],
 36 |             edgeLabel: {
 37 |               normal: {
 38 |                 textStyle: {
 39 |                   fontSize: 20
 40 |                 }
 41 |               }
 42 |             },
 43 |             data: [
 44 |               {
 45 |                 name: "节点1",
 46 |                 x: 300,
 47 |                 y: 300
 48 |               },
 49 |               {
 50 |                 name: "节点2",
 51 |                 x: 800,
 52 |                 y: 300
 53 |               },
 54 |               {
 55 |                 name: "节点3",
 56 |                 x: 550,
 57 |                 y: 100
 58 |               },
 59 |               {
 60 |                 name: "节点4",
 61 |                 x: 550,
 62 |                 y: 500
 63 |               }
 64 |             ],
 65 |             // links: [],
 66 |             links: [
 67 |               {
 68 |                 source: 0,
 69 |                 target: 1,
 70 |                 symbolSize: [5, 20],
 71 |                 label: {
 72 |                   normal: {
 73 |                     show: true
 74 |                   }
 75 |                 },
 76 |                 lineStyle: {
 77 |                   normal: {
 78 |                     width: 5,
 79 |                     curveness: 0.2
 80 |                   }
 81 |                 }
 82 |               },
 83 |               {
 84 |                 source: "节点2",
 85 |                 target: "节点1",
 86 |                 label: {
 87 |                   normal: {
 88 |                     show: true
 89 |                   }
 90 |                 },
 91 |                 lineStyle: {
 92 |                   normal: { curveness: 0.2 }
 93 |                 }
 94 |               },
 95 |               {
 96 |                 source: "节点1",
 97 |                 target: "节点3"
 98 |               },
 99 |               {
100 |                 source: "节点2",
101 |                 target: "节点3"
102 |               },
103 |               {
104 |                 source: "节点2",
105 |                 target: "节点4"
106 |               },
107 |               {
108 |                 source: "节点1",
109 |                 target: "节点4"
110 |               }
111 |             ],
112 |             lineStyle: {
113 |               normal: {
114 |                 opacity: 0.9,
115 |                 width: 2,
116 |                 curveness: 0
117 |               }
118 |             }
119 |           }
120 |         ]
121 |       }
122 |     };
123 |   },
124 |   methods: {
125 |     drawgraph() {
126 |       // 绘制图表
127 |       myChart.setOption(this.option);
128 |     }
129 |   },
130 |   mounted() {
131 |     // 基于准备好的dom，初始化echarts实例
132 |     myChart = this.$echarts.init(document.getElementById("graph"));
133 |     this.drawgraph();
134 |     // 窗口改变时重新绘制
135 |     window.addEventListener("resize", this.$debounce(myChart.resize, 500));
136 |   }
137 | };
138 | </script>
139 | <style scoped>
140 | .graph {
141 |   width: 100%;
142 |   height: 100%;
143 | }
144 | </style>


--------------------------------------------------------------------------------
/src/components/dashboard/charts/bar2/index.vue:
--------------------------------------------------------------------------------
  1 | <!--  -->
  2 | <template>
  3 | <div class='tdglobeChart' id="tdglobeChart">    
  4 | </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | let myChart = null;
  9 | export default {
 10 |   components: {},
 11 |   data() {
 12 |     return {
 13 |       option: {
 14 |         tooltip: {
 15 |           trigger: "axis",
 16 |           axisPointer: {
 17 |             // 坐标轴指示器，坐标轴触发有效
 18 |             type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
 19 |           }
 20 |         },
 21 |         legend: {
 22 |           data: [
 23 |             "直接访问",
 24 |             "邮件营销",
 25 |             "联盟广告",
 26 |             "视频广告",
 27 |             "搜索引擎",
 28 |             "百度",
 29 |             "谷歌",
 30 |             "必应",
 31 |             "其他"
 32 |           ],
 33 |           textStyle: {
 34 |             color: "#fff"
 35 |           }
 36 |         },
 37 |         // 图例区域太大导致遮挡住图表
 38 |         // 主要设置top的值
 39 |         grid: {
 40 |           left: "3%",
 41 |           right: "3%",
 42 |           bottom: "3%",
 43 |           containLabel: true
 44 |         },
 45 |         xAxis: [
 46 |           {
 47 |             type: "category",
 48 |             data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
 49 |             axisLine: {
 50 |               lineStyle: {
 51 |                 color: "#fff",
 52 |                 width: 1
 53 |               }
 54 |             }
 55 |           }
 56 |         ],
 57 |         yAxis: [
 58 |           {
 59 |             type: "value",
 60 |             axisLine: {
 61 |               lineStyle: {
 62 |                 color: "#fff",
 63 |                 width: 1
 64 |               }
 65 |             }
 66 |           }
 67 |         ],
 68 |         series: [
 69 |           {
 70 |             name: "直接访问",
 71 |             type: "bar",
 72 |             data: [320, 332, 301, 334, 390, 330, 320]
 73 |           },
 74 |           {
 75 |             name: "邮件营销",
 76 |             type: "bar",
 77 |             stack: "广告",
 78 |             data: [120, 132, 101, 134, 90, 230, 210]
 79 |           },
 80 |           {
 81 |             name: "联盟广告",
 82 |             type: "bar",
 83 |             stack: "广告",
 84 |             data: [220, 182, 191, 234, 290, 330, 310]
 85 |           },
 86 |           {
 87 |             name: "视频广告",
 88 |             type: "bar",
 89 |             stack: "广告",
 90 |             data: [150, 232, 201, 154, 190, 330, 410]
 91 |           },
 92 |           {
 93 |             name: "搜索引擎",
 94 |             type: "bar",
 95 |             data: [862, 1018, 964, 1026, 1679, 1600, 1570],
 96 |             markLine: {
 97 |               lineStyle: {
 98 |                 normal: {
 99 |                   type: "dashed"
100 |                 }
101 |               },
102 |               data: [[{ type: "min" }, { type: "max" }]]
103 |             }
104 |           },
105 |           {
106 |             name: "百度",
107 |             type: "bar",
108 |             barWidth: 5,
109 |             stack: "搜索引擎",
110 |             data: [620, 732, 701, 734, 1090, 1130, 1120]
111 |           },
112 |           {
113 |             name: "谷歌",
114 |             type: "bar",
115 |             stack: "搜索引擎",
116 |             data: [120, 132, 101, 134, 290, 230, 220]
117 |           },
118 |           {
119 |             name: "必应",
120 |             type: "bar",
121 |             stack: "搜索引擎",
122 |             data: [60, 72, 71, 74, 190, 130, 110]
123 |           },
124 |           {
125 |             name: "其他",
126 |             type: "bar",
127 |             stack: "搜索引擎",
128 |             data: [62, 82, 91, 84, 109, 110, 120]
129 |           }
130 |         ]
131 |       }
132 |     };
133 |   },
134 |   methods: {
135 |     drawtdglobeChart() {
136 |       // 绘制图表
137 |       myChart.setOption(this.option);
138 |     }
139 |   },
140 |   mounted() {
141 |     // 基于准备好的dom，初始化echarts实例
142 |     myChart = this.$echarts.init(document.getElementById("tdglobeChart"));
143 |     this.drawtdglobeChart();
144 |     // 窗口改变时重新绘制
145 |     window.addEventListener("resize", this.$debounce(myChart.resize, 500));
146 |   }
147 | };
148 | </script>
149 | <style scoped>
150 | .tdglobeChart {
151 |   width: 100%;
152 |   height: 100%;
153 | }
154 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 基于VUE、echarts和Grid的大屏数据可视化实现技术
  2 | 
  3 | ## 简介
  4 | 
  5 | 数据可视化技术是将把比较复杂、抽象的数据通过可视的技术以人们更易理解的形式展示出来，数据可视化技术促进了数据信息的传播和应用。 数据可视化技术是抽象数据的具象表达。 
  6 | 
  7 | 大屏数据可视化是以大屏为主要展示载体的数据可视化。目前市场上大屏设备有1280*768的笔记本，也有7680*4320的8K显示屏，设备分辨率宽泛。“面积大、炫酷动效、丰富色彩、可交互”是大屏数据可视化的特点。大屏数据可视化技术主要应用场景有：信息展示、数据分析和监控预警三类。
  8 | 
  9 | 本文阐述基于VUE.js、echarts图表和Grid布局的大屏数据可视化技术。
 10 | 
 11 | ## 技术栈
 12 | 
 13 | * vue
 14 | * echarts
 15 | * Grid布局
 16 | 
 17 | ## echarts图标库使用
 18 | 
 19 | echarts官网：https://www.echartsjs.com/zh/index.html
 20 | 
 21 | 1. echarts导入VUE项目
 22 | 
 23 | ``` 
 24 | import echarts from 'echarts'
 25 | Vue.prototype.$echarts = echarts
 26 | ```
 27 | 
 28 | 2. echarts 使用性能优化
 29 | 
 30 | 当window resize时，echart需要重新绘制。若window resize实时对echart重绘，页面会卡顿，页面性能会降低，因此需要考虑dom渲染的性能，加入函数防抖。 下面简单解释一下函数防抖和函数节流。
 31 | 
 32 | ### 函数节流throttle
 33 | 
 34 | 函数节流throttle通俗解释：假设你正在乘电梯上楼，当电梯门关闭之前发现有人也要乘电梯，礼貌起见，你会按下开门开关，然后等他进电梯； 但是，你是个没耐心的人，你最多只会等待电梯停留一分钟； 在这一分钟内，你会开门让别人进来，但是过了一分钟之后，你就会关门，让电梯上楼。
 35 | 
 36 | 所以函数节流throttle的作用是，预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新的时间周期。
 37 | 
 38 | 函数节流throttle应用：在指定时间，事件最多触发一次。
 39 | 
 40 | ### 函数防抖debounce
 41 | 
 42 | 函数防抖debounce通俗解释假设你正在乘电梯上楼，当电梯门关闭之前发现有人也要乘电梯，礼貌起见，你会按下开门开关，然后等他进电梯； 如果在电梯门关闭之前，又有人来了，你会继续开门； 这样一直进行下去，你可能需要等待几分钟，最终没人进电梯了，才会关闭电梯门，然后上楼。
 43 | 
 44 | 所以函数防抖debounce的作用是，当调用动作触发一段时间后，才会执行该动作，若在这段时间间隔内又调用此动作则将重新计算时间间隔。
 45 | 
 46 | 函数防抖debounce应用：百度首页的搜索按钮。
 47 | 
 48 | 函数节流throttle和函数防抖debounce在函数式编程，如lodash库都有实现。
 49 | 
 50 | 函数防抖debounce的封装：
 51 | 
 52 | ``` 
 53 | // 函数防抖
 54 | export function debounce(fn, wait, immediate) {
 55 |     let timer;
 56 |     return function () {
 57 |         if (timer) clearTimeout(timer);
 58 |         if (immediate) {
 59 |             // 如果已经执行过，不再执行
 60 |             var callNow = !timer;
 61 |             timer = setTimeout(() => {
 62 |                 timer = null;
 63 |             }, wait)
 64 |             if (callNow) {
 65 |                 fn.apply(this, arguments)
 66 |             }
 67 |         } else {
 68 |             timer = setTimeout(() => {
 69 |                 fn.apply(this, arguments)
 70 |             }, wait);
 71 |         }
 72 |     }
 73 | }
 74 | ```
 75 | 
 76 | Vue项目main.js中引入函数防抖：
 77 | 
 78 | ``` 
 79 | import { debounce } from './libs/util'
 80 | Vue.prototype.$debounce = debounce
 81 | 
 82 | ```
 83 | 
 84 | echarts图表组件初始化函数防抖：
 85 | 
 86 | ``` 
 87 | mounted() {
 88 |     // 窗口改变时重新绘制
 89 |     window.addEventListener("resize", this.$debounce(myChart.resize, 500));
 90 |   }
 91 | ```
 92 | 
 93 | ## echarts 图表使用时细节优化处理
 94 | 
 95 | 1. 图例区域太大导致遮挡住图表 
 96 | 
 97 | 在option中设置grid，主要设置top值。
 98 | 
 99 | ``` 
100 | grid: {
101 |   left: "3%",
102 |   right: "3%",
103 |   top: "3%",
104 |   containLabel: true
105 | },
106 | ```
107 | 
108 | 2. 防止坐标轴标签显示空间不全 
109 | 
110 | 在option中设置interval和rotate：
111 | 
112 | ``` 
113 | axisLabel: {
114 |     // 防止坐标轴标签显示空间不全
115 |     rotate: -30
116 | },
117 | // 防止坐标轴标签显示空间不全
118 | interval: 0
119 | ```
120 | 
121 | ## Grid布局
122 | 
123 | 首先说明的是grid布局不是bootstrap框架，element ui等UI的栅格布局。目前CSS布局方式有table，浮动，定位，flex和grid布局。
124 | 
125 | Grid布局说明：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
126 | 
127 | Grid和flex布局十分相似，但却有极大的不同。Flex 布局是一维布局，即轴线布局，只能指定"项目"针对轴线的位置。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，因此是二维布局。
128 | 在大屏数据可视化技术需要解决屏幕的响应式布局。常见的响应式布局有媒体查询，flex布局、百分比布局和Grid布局。相比于媒体查询，flex布局和百分比布局，Grid布局在实现大屏数据可视化技术响应式布局更便捷。有一点需要注意的是Grid存在浏览器兼容，请参考：https://caniuse.com/#search=grid，即在IE浏览器不兼容，对于Edge、Fifefox和Chrome主流浏览器兼容性良好。
129 | 
130 | 1. Grid布局三行三列布局核心配置示例
131 | 
132 | ``` 
133 |  /* 网格布局 */
134 |   display: grid;
135 |   grid-template-columns: 29% 40% 29%;
136 |   grid-template-rows: 32.333% 33.333% 32.333%;
137 |   /* 行与行的间隔（行间距） */
138 |   /* grid-row-gap: 20px; */
139 |   /* 列与列的间隔（列间距） */
140 |   /* grid-column-gap: 20px; */
141 |   /* 行间距和列间距均是1% */
142 |   grid-gap: 1% 1%;
143 | ``` 
144 | 
145 | 2. Grid布局中行合并示例配置 
146 | 
147 | html：
148 | 
149 | ```
150 | 
151 | <div class='dashboard'>
152 | 
153 |     <div class="item item-1">
154 |       <button>操作相关按钮</button>
155 |       <line-chart></line-chart>
156 |     </div>
157 |     <div class="item">
158 |       <bar-chart></bar-chart>
159 |     </div>
160 |     <div class="item">
161 |       <pie-chart></pie-chart>
162 |     </div>
163 |     <div class="item">
164 |       <scatter-chart></scatter-chart>
165 |     </div>
166 |     <div class="item">
167 |       <radar-chart></radar-chart>
168 |     </div>
169 |     <div class="item">
170 |       <graph-chart></graph-chart>
171 |     </div>
172 |     <div class="item">
173 |       <gauge-chart></gauge-chart>
174 |     </div>
175 |     <div class="item">
176 |       <dataset-chart></dataset-chart>
177 |     </div>
178 | 
179 | </div>
180 | 
181 | ``` 
182 | css：
183 | 
184 | ```
185 | 
186 | <style scoped>
187 | .dashboard {
188 |   width: 100%; 
189 |   height: 100%; 
190 |   /* public文件夹下文件使用绝对路径即可 */
191 |   background: #000 url(/bg.jpg) no-repeat center center; 
192 |   /* 网格布局 */
193 |   display: grid; 
194 |   grid-template-columns: 29% 40% 29%; 
195 |   grid-template-rows: 32.333% 33.333% 32.333%; 
196 |   /* 行与行的间隔（行间距） */
197 |   /* grid-row-gap: 20px; */
198 |   /* 列与列的间隔（列间距） */
199 |   /* grid-column-gap: 20px; */
200 |   /* 行间距和列间距均是1% */
201 |   grid-gap: 1% 1%; 
202 | }
203 | .item{
204 |   border: 2px solid red
205 | }
206 | .item-1 {
207 |   /* 行合并 */
208 |   grid-column-start: 1; 
209 |   grid-column-end: 3; 
210 | }
211 | </style>
212 | 
213 | ``` 
214 | 
215 | 2. Grid布局中列合并示例配置 
216 | 
217 | html：
218 | 
219 | ```
220 | 
221 | <div class='dashboard'>
222 | 
223 |     <div class="item item-1">
224 |       <button>操作相关按钮</button>
225 |       <line-chart></line-chart>
226 |     </div>
227 |     <div class="item">
228 |       <bar-chart></bar-chart>
229 |     </div>
230 |     <div class="item">
231 |       <pie-chart></pie-chart>
232 |     </div>
233 |     <div class="item">
234 |       <scatter-chart></scatter-chart>
235 |     </div>
236 |     <div class="item">
237 |       <radar-chart></radar-chart>
238 |     </div>
239 |     <div class="item">
240 |       <graph-chart></graph-chart>
241 |     </div>
242 |     <div class="item">
243 |       <gauge-chart></gauge-chart>
244 |     </div>
245 |     <div class="item">
246 |       <dataset-chart></dataset-chart>
247 |     </div>
248 | 
249 | </div>
250 | 
251 | ``` 
252 | css：
253 | 
254 | ```
255 | 
256 | <style scoped>
257 | .dashboard {
258 |   width: 100%; 
259 |   height: 100%; 
260 |   /* public文件夹下文件使用绝对路径即可 */
261 |   background: #000 url(/bg.jpg) no-repeat center center; 
262 |   /* 网格布局 */
263 |   display: grid; 
264 |   grid-template-columns: 29% 40% 29%; 
265 |   grid-template-rows: 32.333% 33.333% 32.333%; 
266 |   /* 行与行的间隔（行间距） */
267 |   /* grid-row-gap: 20px; */
268 |   /* 列与列的间隔（列间距） */
269 |   /* grid-column-gap: 20px; */
270 |   /* 行间距和列间距均是1% */
271 |   grid-gap: 1% 1%; 
272 | }
273 | .item{
274 |   border: 2px solid red
275 | }
276 | .item-1 {
277 |   /* 行合并 */
278 |   grid-row-start: 1; 
279 |   grid-row-end: 3; 
280 | }
281 | </style>
282 | 
283 | ``` 
284 | 
285 | 4. Grid布局左侧固定，右侧自适应布局示例配置
286 | 
287 | ```
288 | 
289 | display: grid; 
290 | /* 左侧固定，右侧自适应布局 */
291 | grid-template-columns: 150px 1fr; 
292 | /* grid-template-columns: 150px auto; */
293 | 
294 | ``` 
295 | 
296 | 5. Grid布局repeat属性
297 | 
298 | 将页面水平和垂直方向均分为100分。
299 | 
300 | ```
301 | 
302 | .grid {
303 | 
304 | 	height: 100%;
305 | 	display: grid;
306 | 	grid-template-columns: repeat(100, 1%);
307 | 	grid-template-rows: repeat(100, 1%);
308 | 
309 | }
310 | 
311 | .item {
312 | 
313 | 	border: 1px solid red;
314 | 
315 | }
316 | 
317 | .item-1 {
318 | /* item-1 dom元素在水平和垂直页面占据左上角的20% */
319 | 
320 | 	grid-column-start: 1;
321 | 	grid-column-end: 21;
322 | 	grid-row-start: 1;
323 | 	grid-row-end: 21;
324 | 
325 | }
326 | 
327 | ``` 
328 | 
329 | grid布局参考[grid](http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html)
330 | 
331 | ## VUe项目引入normalize 库初始化浏览器默认样式
332 | 
333 | ```
334 | 
335 | <style scoped>
336 | @import '/css/normalize.min.css'
337 | </style>
338 | ```
339 | 
340 | ## 项目代码：https://github.com/MengFangui/vue-data-visualization
341 | 
342 | ## 效果图
343 | 
344 | ![image](https://note.youdao.com/yws/public/resource/37560477869e49d436491028e210a537/xmlnote/4459220E3F6E42D9AFE912F447572348/75CCAAD6133F4D11BE615C78C3030AB5/16955)
345 | 
346 |   
347 | 
348 | ![image](https://note.youdao.com/yws/public/resource/37560477869e49d436491028e210a537/xmlnote/4459220E3F6E42D9AFE912F447572348/1D407F8E78C4493EB1AD095501E8DAF8/16953)
349 | 
350 | ![image](https://note.youdao.com/yws/public/resource/37560477869e49d436491028e210a537/xmlnote/4459220E3F6E42D9AFE912F447572348/347ED3EBEF9A4C9E9F1A1D9DA0B98A2E/16954)
351 | 
352 | 


--------------------------------------------------------------------------------