H5:数据看板demo

htmldev/dashboard/package-lock.json

@@ -5619,6 +5619,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.1.2",
+      "resolved": "https://registry.nlark.com/echarts/download/echarts-5.1.2.tgz",
+      "integrity": "sha1-qhqwzvW3T6L3xiAmGl8oaJPTD9E=",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.1.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.0.3.tgz",
+          "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -15169,6 +15185,21 @@
           }
         }
       }
+    },
+    "zrender": {
+      "version": "5.1.1",
+      "resolved": "https://registry.nlark.com/zrender/download/zrender-5.1.1.tgz",
+      "integrity": "sha1-BRX0+MwPR0LwKmuIGVUKbRPWTFw=",
+      "requires": {
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.0.3.tgz",
+          "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+        }
+      }
     }
   }
 }

htmldev/dashboard/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "better-scroll": "^2.0.4",
     "core-js": "^3.6.5",
+    "echarts": "^5.1.2",
     "vue": "^2.6.11",
     "vue-router": "^3.1.3"
   },

htmldev/dashboard/src/main.js

@@ -5,11 +5,14 @@ import store from './store'
 import cloneDeep from 'lodash/cloneDeep'
 import VueCookie from 'vue-cookie'
 import refreshTitle from './utils/refreshTitle'
+import * as echarts from 'echarts'
+import { BarChart, PieChart } from 'echarts/charts'
 import './utils/filter'
 import './assets/styles/icon.scss'
 // 全站配置
 window.SITE_CONFIG = {}
 Vue.prototype.$refreshTitle = refreshTitle
+Vue.prototype.$echarts = echarts
 Vue.directive('myBlur', {
   inserted: function (element) {
     element.onblur = function () {
@@ -23,6 +26,9 @@ Vue.directive('myBlur', {
 })
 
 Vue.use(VueCookie)
+echarts.use(
+  [BarChart, PieChart]
+)
 
 new Vue({
   router,

htmldev/dashboard/src/router/index.js

@@ -152,6 +152,22 @@ const routes = [
       isUseCache: false,
       keepAlive: true
     }
+  },
+  {
+    path: '/dashboard',
+    component: _import('views/dashboard/index'),
+    children: [
+      {
+        path: '',
+        name: 'DashboardSale',
+        component: _import('views/dashboard/sale/index'),
+        meta: {
+          title: '销售',
+          isUseCache: false,
+          keepAlive: true
+        }
+      }
+    ]
   }
 ]
 

htmldev/dashboard/src/views/dashboard/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <router-view/>
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

htmldev/dashboard/src/views/dashboard/sale/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div>
+      <div
+        ref="myChartOfBar"
+        class="demo-container">
+      </div>
+      <div
+        ref="myChartOfPie"
+        class="demo-container">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  data () {
+    return {
+      chartOfBar: null,
+      chartOfPie: null
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      this.initBarDemo()
+      this.initPieDemo()
+    }, 1000)
+  },
+  methods: {
+    initBarDemo () {
+      // 指定图表的配置项和数据
+      const option = {
+        title: {
+          text: '柱状图'
+        },
+        // 提示框组件
+        tooltip: {},
+        legend: {
+          show: true,
+          data: ['销量', '占比']
+        },
+        // 直角坐标系 X 轴
+        xAxis: {
+          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋']
+        },
+        // 直角坐标系 Y 轴
+        yAxis: {},
+        // 系列
+        series: [
+          {
+            name: '销量',
+            type: 'bar',
+            data: [5, 20, 36, 10, 10]
+          },
+          {
+            name: '占比',
+            type: 'line',
+            data: [20, 20, 30, 20, 10]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      this.chartOfBar = this.$echarts.init(this.$refs.myChartOfBar)
+
+      // 使用刚指定的配置项和数据显示图表。
+      this.chartOfBar.setOption(option)
+
+      window.onresize = () => {
+        this.chartOfBar.resize()
+      }
+    },
+    initPieDemo () {
+      // 指定图表的配置项和数据
+      const option = {
+        title: {
+          text: '饼图'
+        },
+        itemStyle: {
+          // 阴影的大小
+          shadowBlur: 200,
+          // 阴影水平方向上的偏移
+          shadowOffsetX: 0,
+          // 阴影垂直方向上的偏移
+          shadowOffsetY: 0,
+          // 阴影颜色
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+          // 鼠标 hover 时候的高亮样式
+          emphasis: {
+            shadowBlur: 200,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        },
+        // 系列
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: '55%',
+            data: [
+              { value: 235, name: '视频广告' },
+              { value: 274, name: '联盟广告' },
+              { value: 310, name: '邮件营销' },
+              { value: 335, name: '直接访问' },
+              { value: 400, name: '搜索引擎' }
+            ]
+          }
+        ]
+      }
+      // 基于准备好的dom，初始化echarts实例
+      this.chartOfPie = this.$echarts.init(this.$refs.myChartOfPie, 'dark')
+
+      // 使用刚指定的配置项和数据显示图表。
+      this.chartOfPie.setOption(option)
+
+      window.onresize = () => {
+        this.chartOfPie.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-container {
+  width: 360px;
+  height: 234px;
+  margin: 0 auto;
+}
+</style>