fix:修复bug和更新图表组件

xqy212 · Nov 1, 2019 · c5c018a · c5c018a
1 parent 3cfc703
commit c5c018a
Show file tree

Hide file tree

Showing 10 changed files with 432 additions and 312 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 vue-manage-system
+Copyright (c) 2016-2019 vue-manage-system
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -16,9 +16,8 @@
     <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
   </a>
 
-基于 Vue.js + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.github.io/example/work/)
+基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.github.io/example/work/)
 
-本项目基于 vue-cli3 构建，如果是 vue-cli2 的请下载[旧版本 V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0)
 
 > React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-manage-system",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "private": true,
   "scripts": {
     "dev": "npm run serve",
@@ -17,7 +17,7 @@
     "vue-i18n": "^8.10.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.3",
-    "vue-schart": "^1.0.0",
+    "vue-schart": "^2.0.0",
     "vuedraggable": "^2.17.0"
   },
   "devDependencies": {

diff --git a/public/table.json b/public/table.json
@@ -0,0 +1,40 @@
+{
+    "list": [{
+            "id": 1,
+            "name": "张三",
+            "money": 123,
+            "address": "广东省东莞市长安镇",
+            "state": "成功",
+            "date": "2019-11-1",
+            "thumb": "https://lin-xin.gitee.io/images/post/wms.png"
+        },
+        {
+            "id": 2,
+            "name": "李四",
+            "money": 456,
+            "address": "广东省广州市白云区",
+            "state": "成功",
+            "date": "2019-10-11",
+            "thumb": "https://lin-xin.gitee.io/images/post/node3.png"
+        },
+        {
+            "id": 3,
+            "name": "王五",
+            "money": 789,
+            "address": "湖南省长沙市",
+            "state": "失败",
+            "date": "2019-11-11",
+            "thumb": "https://lin-xin.gitee.io/images/post/parcel.png"
+        },
+        {
+            "id": 4,
+            "name": "赵六",
+            "money": 1011,
+            "address": "福建省厦门市鼓浪屿",
+            "state": "成功",
+            "date": "2019-10-20",
+            "thumb": "https://lin-xin.gitee.io/images/post/notice.png"
+        }
+    ],
+    "pageTotal": 4
+}
diff --git a/src/api/index.js b/src/api/index.js
@@ -1,9 +1,9 @@
 import request from '../utils/request';
 
-export const fetchData = (query) => {
+export const fetchData = query => {
     return request({
-        url: '/ms/table/list',
-        method: 'post',
-        data: query
-    })
-}
+        url: './table.json',
+        method: 'get',
+        params: query
+    });
+};
diff --git a/src/components/page/BaseCharts.vue b/src/components/page/BaseCharts.vue
@@ -2,108 +2,148 @@
     <div>
         <div class="crumbs">
             <el-breadcrumb separator="/">
-                <el-breadcrumb-item><i class="el-icon-pie-chart"></i> schart图表</el-breadcrumb-item>
+                <el-breadcrumb-item>
+                    <i class="el-icon-pie-chart"></i> schart图表
+                </el-breadcrumb-item>
             </el-breadcrumb>
         </div>
         <div class="container">
             <div class="plugins-tips">
                 vue-schart：vue.js封装sChart.js的图表组件。
-                访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
+                访问地址：
+                <a
+                    href="https://github.com/lin-xin/vue-schart"
+                    target="_blank"
+                >vue-schart</a>
             </div>
             <div class="schart-box">
                 <div class="content-title">柱状图</div>
-                <schart class="schart" canvasId="bar" :data="data1" type="bar" :options="options1"></schart>
+                <schart class="schart" canvasId="bar" :options="options1"></schart>
             </div>
             <div class="schart-box">
-            <div class="content-title">折线图</div>
-            <schart class="schart" canvasId="line" :data="data1" type="line" :options="options2"></schart>
+                <div class="content-title">折线图</div>
+                <schart class="schart" canvasId="line" :options="options2"></schart>
             </div>
             <div class="schart-box">
-            <div class="content-title">饼状图</div>
-            <schart class="schart" canvasId="pie" :data="data2" type="pie" :options="options3"></schart>
+                <div class="content-title">饼状图</div>
+                <schart class="schart" canvasId="pie" :options="options3"></schart>
             </div>
             <div class="schart-box">
-            <div class="content-title">环形图</div>
-            <schart class="schart" canvasId="ring" :data="data2" type="ring" :options="options4"></schart>
+                <div class="content-title">环形图</div>
+                <schart class="schart" canvasId="ring" :options="options4"></schart>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-    import Schart from 'vue-schart';
-    export default {
-        name: 'basecharts',
-        components: {
-            Schart
-        },
-        data: () => ({
-            data1:[
-                {name:'2012',value:1141},
-                {name:'2013',value:1499},
-                {name:'2014',value:2260},
-                {name:'2015',value:1170},
-                {name:'2016',value:970},
-                {name:'2017',value:1450}
-            ],
-            data2 : [
-                {name:'短袖',value:1200},
-                {name:'休闲裤',value:1222},
-                {name:'连衣裙',value:1283},
-                {name:'外套',value:1314},
-                {name:'羽绒服',value:2314}
-            ],
+import Schart from 'vue-schart';
+export default {
+    name: 'basecharts',
+    components: {
+        Schart
+    },
+    data() {
+        return {
             options1: {
-                title: '某商店近年营业总额',
-                autoWidth: true,   // 设置宽高自适应
-                showValue: false,
-                bgColor: '#F9EFCC',
-                fillColor: '#00887C',
-                contentColor: 'rgba(46,199,201,0.3)',
-                yEqual: 7
+                type: 'bar',
+                title: {
+                    text: '最近一周各品类销售图'
+                },
+                bgColor: '#fbfbfb',
+                labels: ['周一', '周二', '周三', '周四', '周五'],
+                datasets: [
+                    {
+                        label: '家电',
+                        fillColor: 'rgba(241, 49, 74, 0.5)',
+                        data: [234, 278, 270, 190, 230]
+                    },
+                    {
+                        label: '百货',
+                        data: [164, 178, 190, 135, 160]
+                    },
+                    {
+                        label: '食品',
+                        data: [144, 198, 150, 235, 120]
+                    }
+                ]
             },
             options2: {
-                title: '某商店近年营业总额',
-                bgColor: '#D5E4EB',
-                titleColor: '#00887C',
-                fillColor: 'red',
-                contentColor: 'rgba(46,199,201,0.3)'
+                type: 'line',
+                title: {
+                    text: '最近几个月各品类销售趋势图'
+                },
+                bgColor: '#fbfbfb',
+                labels: ['6月', '7月', '8月', '9月', '10月'],
+                datasets: [
+                    {
+                        label: '家电',
+                        data: [234, 278, 270, 190, 230]
+                    },
+                    {
+                        label: '百货',
+                        data: [164, 178, 150, 135, 160]
+                    },
+                    {
+                        label: '食品',
+                        data: [114, 138, 200, 235, 190]
+                    }
+                ]
             },
             options3: {
-                title: '某商店各商品年度销量',
-                bgColor: '#829dca',
-                titleColor: '#ffffff',
-                legendColor: '#ffffff',
-                radius: 120
+                type: 'pie',
+                title: {
+                    text: '服装品类销售饼状图'
+                },
+                legend: {
+                    position: 'left'
+                },
+                bgColor: '#fbfbfb',
+                labels: ['T恤', '牛仔裤', '连衣裙', '毛衣', '七分裤', '短裙', '羽绒服'],
+                datasets: [
+                    {
+                        data: [334, 278, 190, 235, 260, 200, 141]
+                    }
+                ]
             },
             options4: {
-                title: '某商店各商品年度销量',
-                bgColor: '#829daa',
-                titleColor: '#ffffff',
-                legendColor: '#ffffff',
-                radius: 120,
-                innerRadius:80
+                type: 'ring',
+                title: {
+                    text: '环形三等分'
+                },
+                showValue: false,
+                legend: {
+                    position: 'bottom',
+                    bottom: 40
+                },
+                bgColor: '#fbfbfb',
+                labels: ['vue', 'react', 'angular'],
+                datasets: [
+                    {
+                        data: [500, 500, 500]
+                    }
+                ]
             }
-        })
+        };
     }
+};
 </script>
 
 <style scoped>
-.schart-box{
+.schart-box {
     display: inline-block;
     margin: 20px;
 }
-    .schart{
-        width: 500px;
-        height: 400px;
-    }
-    .content-title{
-        clear: both;
-        font-weight: 400;
-        line-height: 50px;
-        margin: 10px 0;
-        font-size: 22px;
-        color: #1f2f3d;
-    }
-    
+.schart {
+    width: 600px;
+    height: 400px;
+}
+.content-title {
+    clear: both;
+    font-weight: 400;
+    line-height: 50px;
+    margin: 10px 0;
+    font-size: 22px;
+    color: #1f2f3d;
+}
 </style>
diff --git a/src/components/page/BaseTable.vue b/src/components/page/BaseTable.vue
@@ -130,6 +130,7 @@ export default {
         // 获取 easy-mock 的模拟数据
         getData() {
             fetchData(this.query).then(res => {
+                console.log(res);
                 this.tableData = res.list;
                 this.pageTotal = res.pageTotal || 50;
             });