add

package.json

@@ -21,6 +21,7 @@
     "jquery": "3.1.1",
     "js-cookie": "2.1.3",
     "jsonlint": "1.6.2",
+    "mockjs": "^1.0.1-beta3",
     "normalize.css": "3.0.2",
     "nprogress": "0.2.0",
     "showdown": "1.6.4",

src/api/article.js

@@ -0,0 +1,29 @@
+import fetch, { tpFetch } from 'utils/fetch';
+import { param } from 'utils';
+
+export function getList(query) {
+  return tpFetch({
+    url: '/article/list',
+    method: 'get'
+  });
+}
+export function upload(data) {
+  return tpFetch({
+    url: 'https://upload.qbox.me',
+    method: 'post',
+    data
+  });
+}
+
+
+/* 外部uri转七牛uri*/
+export function netUpload(token, net_url) {
+  const imgData = {
+    net_url
+  };
+  return fetch({
+    url: '/qiniu/upload/net/async',
+    method: 'post',
+    data: imgData
+  });
+}

src/components/Charts/keyboard.vue

@@ -17,11 +17,11 @@
       props: {
         className: {
           type: String,
-          default: 'bar-percent-chart'
+          default: 'chart'
         },
         id: {
           type: String,
-          default: 'bar-percent-chart'
+          default: 'chart'
         },
         width: {
           type: String,

src/components/Charts/keyboard2.vue

@@ -17,11 +17,11 @@
       props: {
         className: {
           type: String,
-          default: 'bar-percent-chart'
+          default: 'chart'
         },
         id: {
           type: String,
-          default: 'bar-percent-chart'
+          default: 'chart'
         },
         width: {
           type: String,

src/components/Charts/linemarker.vue

@@ -0,0 +1,219 @@
+<template>
+    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+<script>
+    // 引入 ECharts 主模块
+    const echarts = require('echarts/lib/echarts');
+
+    require('echarts/lib/chart/line');
+    // 引入提示框和标题组件
+    require('echarts/lib/component/tooltip');
+    require('echarts/lib/component/title');
+    require('echarts/lib/component/legend');
+    export default {
+      name: 'barPercent',
+      props: {
+        className: {
+          type: String,
+          default: 'chart'
+        },
+        id: {
+          type: String,
+          default: 'chart'
+        },
+        width: {
+          type: String,
+          default: '200px'
+        },
+        height: {
+          type: String,
+          default: '200px'
+        }
+      },
+      data() {
+        return {};
+      },
+      mounted() {
+        this.initChart();
+      },
+      methods: {
+        initChart() {
+          this.chart = echarts.init(document.getElementById(this.id));
+
+          this.chart.setOption({
+            backgroundColor: '#394056',
+            title: {
+              text: '请求数',
+              textStyle: {
+                fontWeight: 'normal',
+                fontSize: 16,
+                color: '#F1F1F3'
+              },
+              left: '6%'
+            },
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                lineStyle: {
+                  color: '#57617B'
+                }
+              }
+            },
+            legend: {
+              icon: 'rect',
+              itemWidth: 14,
+              itemHeight: 5,
+              itemGap: 13,
+              data: ['移动', '电信', '联通'],
+              right: '4%',
+              textStyle: {
+                fontSize: 12,
+                color: '#F1F1F3'
+              }
+            },
+            grid: {
+              left: '3%',
+              right: '4%',
+              bottom: '3%',
+              containLabel: true
+            },
+            xAxis: [{
+              type: 'category',
+              boundaryGap: false,
+              axisLine: {
+                lineStyle: {
+                  color: '#57617B'
+                }
+              },
+              data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
+            }],
+            yAxis: [{
+              type: 'value',
+              name: '单位（%）',
+              axisTick: {
+                show: false
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#57617B'
+                }
+              },
+              axisLabel: {
+                margin: 10,
+                textStyle: {
+                  fontSize: 14
+                }
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#57617B'
+                }
+              }
+            }],
+            series: [{
+              name: '移动',
+              type: 'line',
+              smooth: true,
+              symbol: 'circle',
+              symbolSize: 5,
+              showSymbol: false,
+              lineStyle: {
+                normal: {
+                  width: 1
+                }
+              },
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(137, 189, 27, 0.3)'
+                  }, {
+                    offset: 0.8,
+                    color: 'rgba(137, 189, 27, 0)'
+                  }], false),
+                  shadowColor: 'rgba(0, 0, 0, 0.1)',
+                  shadowBlur: 10
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: 'rgb(137,189,27)',
+                  borderColor: 'rgba(137,189,2,0.27)',
+                  borderWidth: 12
+
+                }
+              },
+              data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+            }, {
+              name: '电信',
+              type: 'line',
+              smooth: true,
+              symbol: 'circle',
+              symbolSize: 5,
+              showSymbol: false,
+              lineStyle: {
+                normal: {
+                  width: 1
+                }
+              },
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(0, 136, 212, 0.3)'
+                  }, {
+                    offset: 0.8,
+                    color: 'rgba(0, 136, 212, 0)'
+                  }], false),
+                  shadowColor: 'rgba(0, 0, 0, 0.1)',
+                  shadowBlur: 10
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: 'rgb(0,136,212)',
+                  borderColor: 'rgba(0,136,212,0.2)',
+                  borderWidth: 12
+
+                }
+              },
+              data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+            }, {
+              name: '联通',
+              type: 'line',
+              smooth: true,
+              symbol: 'circle',
+              symbolSize: 5,
+              showSymbol: false,
+              lineStyle: {
+                normal: {
+                  width: 1
+                }
+              },
+              areaStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(219, 50, 51, 0.3)'
+                  }, {
+                    offset: 0.8,
+                    color: 'rgba(219, 50, 51, 0)'
+                  }], false),
+                  shadowColor: 'rgba(0, 0, 0, 0.1)',
+                  shadowBlur: 10
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: 'rgb(219,50,51)',
+                  borderColor: 'rgba(219,50,51,0.2)',
+                  borderWidth: 12
+                }
+              },
+              data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
+            }]
+          })
+        }
+      }
+    }
+</script>