增加图表

package.json

@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.3.2",
     "http-proxy-middleware": "^0.18.0",
     "js-md5": "^0.7.3",

src/components/leftnav.vue

@@ -151,6 +151,23 @@ export default {
               menus: null
             }
           ]
+        },
+        {
+          menuid: 150,
+          icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
+          menuname: '图表',
+          hasThird: null,
+          url: null,
+          menus: [
+            {
+              menuid: 159,
+              icon: 'icon-provider-manage',
+              menuname: '数据可视化',
+              hasThird: 'N',
+              url: 'charts/statistics',
+              menus: null
+            }
+          ]
         }
       ],
       msg: 'success'

src/main.js

@@ -12,6 +12,11 @@ import store from './vuex/store';
 // 引入icon
 import './assets/icon/iconfont.css'
 // 
+
+// 引入echarts
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
 import axios from 'axios';
 Vue.prototype.$axios = axios;
 

src/router/index.js

@@ -47,6 +47,8 @@ import Config from '@/views/pay/Config';
 // 监控查询
 import druidLogin from '@/views/druid/login';
 
+// 图表界面
+import statistics from '@/views/charts/statistics';
 
 // 启用路由
 Vue.use(Router);
@@ -165,6 +167,13 @@ export default new Router({
             meta: {
                 requireAuth: true
             }
+        }, {
+            path: '/charts/statistics',
+            name: '数据可视化',
+            component: statistics,
+            meta: {
+                requireAuth: true
+            }
         }]
     }]
 })

src/views/charts/statistics.vue

@@ -0,0 +1,565 @@
+/**
+* 图表界面
+*/ 
+<template>
+  <!-- 组件主盒子 -->
+  <div class="stbox">
+    <!-- 面包屑导航 -->
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
+    </el-breadcrumb>
+    <!-- 搜索，切换 -->
+    <el-row :gutter="23">
+      <el-col :span="18">
+        <div class="stbgc">
+          <el-row :gutter="23">
+            <el-col :span="7">
+              <el-input size="small" v-model="machineNo" placeholder="请输入所属公司"></el-input>
+            </el-col>
+            <el-col :span="7">
+              <el-input size="small" v-model="machineNo" placeholder="请输入资产编号"></el-input>
+            </el-col>
+            <el-col :span="7">
+              <el-input size="small" v-model="machineNo" placeholder="请输入"></el-input>
+            </el-col>
+            <el-col :span="3" class="stsearch">
+              <el-button size="small" type="primary">搜索</el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="stbgc">
+          <el-row>
+            <el-col :span="8" class="text-c">
+              <el-radio v-model="type" label="day">日</el-radio>
+            </el-col>
+            <el-col :span="8" class="text-c">
+              <el-radio v-model="type" label="month">月</el-radio>
+            </el-col>
+            <el-col :span="8" class="text-c">
+              <el-radio v-model="type" label="years">年</el-radio>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 统计图 -->
+    <el-row :gutter="23">
+      <el-col :span="8" class="text-c">
+        <div class="st-gbox">
+          <div class="cavasbox" ref="SCEchart"></div>
+        </div>
+      </el-col>
+      <el-col :span="8" class="text-c">
+        <div class="st-gbox">
+          <div class="cavasbox" ref="SUMEchart"></div>
+        </div>
+      </el-col>
+      <el-col :span="8" class="text-c">
+        <div class="st-gbox">
+          <div class="cavasbox" ref="ClickEchart"></div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 统计图 -->
+    <div>
+      <el-row :gutter="23">
+        <el-col :span="12" class="text-c">
+          <div class="paybox">
+            <div class="cavasbox" ref="payEchart"></div>
+          </div>
+        </el-col>
+        <el-col :span="12" class="text-c">
+          <div class="paybox">
+            <div class="cavasbox" ref="payNumEchart"></div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script type="text/ecmascript-6">
+import Chart from 'echarts'
+export default {
+  name: "welcome",
+  data() {
+    return {
+      machineNo: '',
+      type: 'day',
+      //  销售总笔数 
+      SCEoption: {
+        tooltip: {
+          trigger: 'item',
+          formatter: "{a} <br/>{b}月 : {c}"
+        },
+        legend: {
+          data: [{
+            name: '销售总笔数',
+            icon: 'rect'
+          }],
+          top: 1,
+          left: 1,
+          itemGap: 10,
+          itemWidth: 12,
+          itemHeight: 12,
+          textStyle: {
+            fontSize: 12,
+            color: "#323232"
+          }
+        },
+        grid: {
+          left: 50,
+          right: 10,
+          top: 30,
+          bottom: 30,
+          borderWidth: 1
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+          axisLine: {
+            lineStyle: {
+              color: "#999999",
+              width: 1
+            }
+          },
+          axisLabel: {
+            margin: 14,
+            height: 70,
+            interval: 0,
+            textStyle: {
+              fontSize: 10,
+              color: "#999999"
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: "#999999",
+              width: 1
+            }
+          },
+          axisLabel: {
+            margin: 14,
+            textStyle: {
+              fontSize: 10,
+              color: "#999999"
+            }
+          }
+        },
+        series: [{
+          name: '销售总笔数',
+          type: 'bar',
+          barGap: 0,
+          data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
+          barWidth: 10,
+          itemStyle: {
+            normal: {
+              color: new Chart.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: '#83bff6' },
+                  { offset: 0.5, color: '#188df0' },
+                  { offset: 1, color: '#188df0' }
+                ]
+              )
+            },
+            emphasis: {
+              color: new Chart.graphic.LinearGradient(
+                0, 0, 0, 1,
+                [
+                  { offset: 0, color: '#2378f7' },
+                  { offset: 0.7, color: '#2378f7' },
+                  { offset: 1, color: '#83bff6' }
+                ]
+              )
+            }
+          }
+        }]
+      },
+      //  销售总金额 
+      SUMoption: {
+        tooltip: {
+          trigger: 'item',
+          formatter: "{a} <br/>{b}月 : {c}"
+        },
+        legend: {
+          data: [{
+            name: '销售总金额',
+            icon: 'rect'
+          }],
+          top: 1,
+          left: 1,
+          itemGap: 10,
+          itemWidth: 12,
+          itemHeight: 12,
+          textStyle: {
+            fontSize: 12,
+            color: "#323232"
+          }
+        },
+        grid: {
+          left: 50,
+          right: 10,
+          top: 30,
+          bottom: 30,
+          borderWidth: 1
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+          axisLine: {
+            lineStyle: {
+              color: "#999999",
+              width: 1
+            }
+          },
+          axisLabel: {
+            margin: 14,
+            height: 70,
+            interval: 0,
+            textStyle: {
+              fontSize: 10,
+              color: "#999999"
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: "#999999",
+              width: 1
+            }
+          },
+          axisLabel: {
+            margin: 14,
+            textStyle: {
+              fontSize: 10,
+              color: "#999999"
+            }
+          }
+        },
+        series: [{
+          name: '销售总金额',
+          //   type: 'bar',
+          type: 'line',
+          barGap: 0,
+          data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
+          barWidth: 10,
+          itemStyle: {
+            color: "#108ff9"
+          }
+        }]
+      },
+      //  总点击量
+      Clickoption: {
+        tooltip: {
+          trigger: 'item',
+          formatter: "{a} <br/>{b}月 : {c}"
+        },
+        legend: {
+          data: [{
+            name: '总点击量',
+            icon: 'rect'
+          }],
+          top: 1,
+          left: 1,
+          itemGap: 10,
+          itemWidth: 12,
+          itemHeight: 12,
+          textStyle: {
+            fontSize: 12,
+            color: "#323232"
+          }
+        },
+        grid: {
+          left: 50,
+          right: 10,
+          top: 30,
+          bottom: 30,
+          borderWidth: 1
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+          axisLine: {
+            lineStyle: {
+              color: "#999999",
+              width: 1
+            }
+          },
+          axisLabel: {
+            margin: 14,
+            height: 70,
+            interval: 0,
+            textStyle: {
+              fontSize: 10,
+              color: "#999999"
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle: {
+              color: "#999999",
+              width: 1
+            }
+          },
+          axisLabel: {
+            margin: 14,
+            textStyle: {
+              fontSize: 10,
+              color: "#999999"
+            }
+          }
+        },
+        series: [{
+          name: '总点击量',
+          type: 'bar',
+          barGap: 0,
+          data: [50000, 10000, 80000, 30000, 50000, 60000, 40000, 80000, 50000, 20000, 60000, 40000],
+          barWidth: 10,
+          itemStyle: {
+            color: "#48cefd"
+          }
+        }]
+      },
+      //  支付方式统计
+      payoption: {
+        backgroundColor: '#2c343c',
+        title: {
+          text: '支付方式统计(金额)',
+          left: 10,
+          top: 5,
+          textStyle: {
+            fontSize: 12,
+            color: '#ccc'
+          }
+        },
+
+        tooltip: {
+          trigger: 'item',
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+
+        visualMap: {
+          show: false,
+          min: 80,
+          max: 600,
+          inRange: {
+            colorLightness: [0, 1]
+          }
+        },
+        series: [
+          {
+            name: '支付方式统计(金额)',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '50%'],
+            data: [
+              { value: 335, name: '支付宝' },
+              { value: 310, name: '银商二维码' },
+              { value: 274, name: '会员' },
+              { value: 235, name: '微信支付' },
+              { value: 100, name: 'Pos通' }
+            ].sort(function (a, b) { return a.value - b.value; }),
+            roseType: 'radius',
+            label: {
+              normal: {
+                textStyle: {
+                  color: 'rgba(255, 255, 255, 0.3)'
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  color: 'rgba(255, 255, 255, 0.3)'
+                },
+                smooth: 0.2,
+                length: 10,
+                length2: 20
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#c23531',
+                shadowBlur: 200,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+
+            animationType: 'scale',
+            animationEasing: 'elasticOut',
+            animationDelay: function (idx) {
+              return Math.random() * 200;
+            }
+          }
+        ]
+      },
+      payNumoption: {
+        backgroundColor: '#2c343c',
+        title: {
+          text: '支付方式统计(笔数)',
+          left: 10,
+          top: 5,
+          textStyle: {
+            fontSize: 12,
+            color: '#ccc'
+          }
+        },
+
+        tooltip: {
+          trigger: 'item',
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+
+        visualMap: {
+          show: false,
+          min: 80,
+          max: 600,
+          inRange: {
+            colorLightness: [0, 1]
+          }
+        },
+        series: [
+          {
+            name: '支付方式统计(笔数)',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '50%'],
+            data: [
+              { value: 335, name: '支付宝' },
+              { value: 310, name: '银商二维码' },
+              { value: 274, name: '会员' },
+              { value: 235, name: '微信支付' },
+              { value: 100, name: 'Pos通' }
+            ].sort(function (a, b) { return a.value - b.value; }),
+            roseType: 'radius',
+            label: {
+              normal: {
+                textStyle: {
+                  color: 'rgba(255, 255, 255, 0.3)'
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  color: 'rgba(255, 255, 255, 0.3)'
+                },
+                smooth: 0.2,
+                length: 10,
+                length2: 20
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#c23531',
+                shadowBlur: 200,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+
+            animationType: 'scale',
+            animationEasing: 'elasticOut',
+            animationDelay: function (idx) {
+              return Math.random() * 200;
+            }
+          }
+        ]
+      },
+    }
+  },
+  // 导入组件
+  components: {
+    // 点聚合组件
+  },
+  // 创建完毕状态(里面是操作)
+  created() { },
+  // 挂载结束状态(里面是操作)
+  mounted() {
+    this.getSCE()
+    this.getSUM()
+    this.getClick()
+    this.getpay()
+    this.getpayNum()
+  },
+  // 里面的函数只有调用才会执行
+  methods: {
+    // 交易总笔数
+    getSCE() {
+      this.chart = Chart.init(this.$refs.SCEchart)
+      this.chart.setOption(this.SCEoption)
+    },
+    // 交易总金额
+    getSUM() {
+      this.chart = Chart.init(this.$refs.SUMEchart)
+      this.chart.setOption(this.SUMoption)
+    },
+    // 总点击量
+    getClick() {
+      this.chart = Chart.init(this.$refs.ClickEchart)
+      this.chart.setOption(this.Clickoption)
+    },
+    // 支付方式统计
+    getpay() {
+      this.chart = Chart.init(this.$refs.payEchart)
+      this.chart.setOption(this.payoption)
+    },
+    // 支付方式统计
+    getpayNum() {
+      this.chart = Chart.init(this.$refs.payNumEchart)
+      this.chart.setOption(this.payNumoption)
+    }
+
+  }
+};
+</script>
+<style>
+.stbox {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.stbgc {
+  background-color: #fff;
+  height: 60px;
+  line-height: 60px;
+  border-radius: 5px;
+  padding: 0px 16px;
+}
+.stsearch {
+  text-align: center;
+}
+.text-c {
+  text-align: center;
+}
+.st-gbox {
+  background-color: #fff;
+  margin-top: 20px;
+  border-radius: 5px;
+  height: 30vh;
+  box-sizing: border-box;
+  padding: 10px;
+}
+.cavasbox {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+.paybox {
+  width: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+  border-radius: 5px;
+  margin-top: 20px;
+  height: 32vh;
+}
+</style>