echarts折线图demo

Author: labnize

.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
     "import/no-unresolved": 0,
     "import/extensions": 0,
     "import/no-dynamic-require": 0,
-    "import/no-duplicates": 0
+    "import/no-duplicates": 0,
+    "vue/max-attributes-per-line": 0
   }
 };

package.json

@@ -27,7 +27,8 @@
     "babel-preset-env": "^1.6.1",
     "clean-webpack-plugin": "^0.1.17",
     "css-loader": "^0.28.5",
-    "element-ui": "^2.0.8",
+    "echarts": "^3.8.5",
+    "element-ui": "^2.0.9",
     "eslint": "^4.13.1",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-plugin-html": "^4.0.1",

src/components/layout1.vue

@@ -2,7 +2,7 @@
   <div class="layout">
     <el-container style="min-height: 100vh">
       <el-header>
-        <div width="200px" class="logo"></div>
+        <div width="200px" class="logo"/>
       </el-header>
       <el-container>
         <el-aside width="200px">
@@ -22,7 +22,7 @@
                     <template v-if="item.sub">
                       <el-submenu :index="item.key" :key="item.key">
                         <template slot="title">
-                          <i class="el-icon-location"></i>
+                          <i class="el-icon-location"/>
                           <span>{{ item.name }}</span>
                         </template>
                         <el-menu-item v-for="subItem in item.sub" :index="subItem.key" :key="subItem.key">
@@ -32,7 +32,7 @@
                     </template>
                     <template v-else>
                       <el-menu-item :index="item.key" :key="item.key">
-                        <i class="el-icon-menu"></i>
+                        <i class="el-icon-menu"/>
                         <span slot="title">{{ item.name }}</span>
                       </el-menu-item>
                     </template>
@@ -44,7 +44,7 @@
         </el-aside>
         <el-container>
           <el-main>
-            <slot name="content"></slot>
+            <slot name="content"/>
           </el-main>
           <el-footer>July Design ©2017 Created by July</el-footer>
         </el-container>
@@ -54,48 +54,48 @@
 </template>
 
 <script>
-  const operateUrl = 'claa/menulist';
+const operateUrl = 'claa/menulist';
 
-  export default {
-    name: 'layout',
-    data() {
-      return {
-        defaultActive: 'item1'
-      };
-    },
+export default {
+  name: 'Layout',
+  data() {
+    return {
+      defaultActive: 'item1'
+    };
+  },
 
-    created() {
-      this.defaultActive = this.$route.path.split('/')[1] ? this.$route.path.split('/')[1] : 'item1';
-    },
-    mounted() {
-      this.doQuery();
-    },
+  created() {
+    this.defaultActive = this.$route.path.split('/')[1] ? this.$route.path.split('/')[1] : 'item1';
+  },
+  mounted() {
+    this.doQuery();
+  },
 
-    computed: {
-      menu() {
-        return this.$store.state.menu.menuList;
-      }
+  computed: {
+    menu() {
+      return this.$store.state.menu.menuList;
+    }
+  },
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
     },
-    methods: {
-      handleOpen(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      handleClose(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      doQuery() {
-        const param = {
-          loadingFlag: true,
-          url: operateUrl,
-          method: 'POST',
-          data: {
-            type: 'on'
-          }
-        };
-        this.$store.dispatch('fetch', param);
-      }
+    doQuery() {
+      const param = {
+        loadingFlag: true,
+        url: operateUrl,
+        method: 'POST',
+        data: {
+          type: 'on'
+        }
+      };
+      this.$store.dispatch('fetch', param);
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>

src/pages/item1/item1.vue

@@ -1,27 +1,31 @@
 <template>
   <Layout>
-    <div slot="content" class="item1">
+    <div
+      slot="content"
+      class="item1">
       <div class="text">
-        <el-button type="primary" @click="handleOpen">全部打开</el-button>
+        <el-button
+          type="primary"
+          @click="handleOpen">全部打开</el-button>
       </div>
     </div>
   </Layout>
 </template>
 
 <script>
-  import Layout from 'components/layout1';
-  import Modal from 'components/modal';
+import Layout from 'components/layout1';
+import Modal from 'components/modal';
 
-  export default {
-    components: {
-      Layout
-    },
-    methods: {
-      handleOpen() {
-        Modal.confirmModal('确定打开所有设备吗?');
-      }
+export default {
+  components: {
+    Layout
+  },
+  methods: {
+    handleOpen() {
+      Modal.confirmModal('确定打开所有设备吗?');
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>

src/pages/item3/echarts/line.vue

@@ -0,0 +1,120 @@
+<template>
+  <div id="lineChart" style="width: 100%; height: 100%" />
+</template>
+
+<script>
+import echarts from 'echarts';
+
+let LineChart = echarts;
+export default {
+  name: 'Lines',
+  props: {
+    param: {
+      type: Array,
+      required: true
+    }
+  },
+  watch: {
+    param() {
+      if (this.param && this.param.length) {
+        this.initLines();
+      }
+    }
+  },
+  mounted() {
+    LineChart = echarts.init(document.getElementById('lineChart'));
+    if (this.param && this.param.length) {
+      this.initLines();
+    }
+  },
+  methods: {
+    initLines() {
+      const successrate = [];
+      const maxsuccessimagerate = [];
+      const maxsuccessregionrate = [];
+      const maxfailimagerate = [];
+      const maxfailregionrate = [];
+      const counttime = [];
+      this.param.forEach((value) => {
+        successrate.push(value.successrate);
+        maxsuccessimagerate.push(value.maxsuccessimagerate);
+        maxsuccessregionrate.push(value.maxsuccessregionrate);
+        maxfailimagerate.push(value.maxfailimagerate);
+        maxfailregionrate.push(value.maxfailregionrate);
+        counttime.push(value.counttime);
+      });
+
+      const option = {
+        title: {
+          text: '堆叠区域图',
+          x: 'center'
+        },
+        color: ['#dd5820', '#007ac2', '#81c267', '#facc41'],
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          top: '30',
+          data: ['测试一', '测试二', '测试三', '测试四', '测试五']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          right: 60,
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: counttime
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              textStyle: {
+                color: '#5a6c77',
+                fontSize: '12',
+                extraCssText: 'line-height:30px'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '测试一',
+            type: 'line',
+            data: successrate
+          }, {
+            name: '测试二',
+            type: 'line',
+            data: maxsuccessimagerate
+          }, {
+            name: '测试三',
+            type: 'line',
+            data: maxsuccessregionrate
+          }, {
+            name: '测试四',
+            type: 'line',
+            data: maxfailimagerate
+          }, {
+            name: '测试五',
+            type: 'line',
+            data: maxfailregionrate
+          }
+        ]
+      };
+
+      LineChart.setOption(option);
+    }
+  }
+};
+</script>

src/pages/item3/option1.vue

@@ -1,17 +1,64 @@
 <template>
   <layout>
     <div slot="content">
-      option1
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="用户管理" name="first">
+          <div class="tabLine">
+            <Lines :param="lineData" />
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </el-tabs>
     </div>
   </layout>
 </template>
 
 <script>
-  import Layout from 'components/layout'
+import Layout from 'components/layout';
+import Axios from 'util/axios';
+import Lines from './echarts/line';
 
-  export default {
-    components: {
-      Layout
+const urlLine = 'claa/linelist';
+export default {
+  components: {
+    Layout,
+    Lines
+  },
+  data() {
+    return {
+      activeName: 'first',
+      lineData: []
+    };
+  },
+  mounted() {
+    this.doQueryLine();
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    doQueryLine() {
+      const that = this;
+      const param = {
+        loadingFlag: true,
+        url: urlLine,
+        method: 'GET',
+        data: {},
+        successFn(data) {
+          that.lineData = data.list;
+        }
+      };
+      Axios.fetch(param);
     }
   }
-</script>
+};
+</script>
+
+<style lang="scss" scoped>
+  .tabLine{
+    height:400px;
+    margin-top: 20px;
+  }
+</style>