Skip to content

Commit 03f67de

Browse files
lin-xinlin-xin
authored
Merge pull request lin-xin#218 from lin-xin/dev
更新图表组件
2 parents 838a030 + 5173cac commit 03f67de

File tree

12 files changed

+568
-409
lines changed

12 files changed

+568
-409
lines changed

‎LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2016 vue-manage-system
3+
Copyright (c) 2016-2019 vue-manage-system
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,11 @@
1212
<a href="https://github.com/lin-xin/vue-manage-system/releases">
1313
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
1414
</a>
15-
<a href="http://blog.gdfengshuo.com/example/work/#/donate">
15+
<a href="https://lin-xin.gitee.io/example/work/#/donate">
1616
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
1717
</a>
1818

19-
基于 Vue.js + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)
20-
21-
本项目基于 vue-cli3 构建，如果是 vue-cli2 的请下载[旧版本 V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0)
19+
基于 Vue + Element UI 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/)
2220

2321
> React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
2422
@@ -42,7 +40,7 @@
4240

4341
请作者喝杯咖啡吧！(微信号：linxin_20)
4442

45-
![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg)
43+
![微信扫一扫](https://lin-xin.gitee.io/images/weixin.jpg)
4644

4745
## 前言
4846

@@ -94,26 +92,35 @@ vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://gi
9492
```html
9593
<template>
9694
<div>
97-
<schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
95+
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
9896
</div>
9997
</template>
10098

10199
<script>
102100
import Schart from 'vue-schart'; // 导入Schart组件
103101
export default {
104-
data: function() {
102+
data() {
105103
return {
106-
canvasId: 'myCanvas', // canvas的id
107-
type: 'bar', // 图表类型
108-
data: [
109-
{ name: '2014', value: 1342 },
110-
{ name: '2015', value: 2123 },
111-
{ name: '2016', value: 1654 },
112-
{ name: '2017', value: 1795 }
113-
],
114104
options: {
115-
// 图表可选参数
116-
title: 'Total sales of stores in recent years'
105+
type: 'bar',
106+
title: {
107+
text: '最近一周各品类销售图'
108+
},
109+
labels: ['周一', '周二', '周三', '周四', '周五'],
110+
datasets: [
111+
{
112+
label: '家电',
113+
data: [234, 278, 270, 190, 230]
114+
},
115+
{
116+
label: '百货',
117+
data: [164, 178, 190, 135, 160]
118+
},
119+
{
120+
label: '食品',
121+
data: [144, 198, 150, 235, 120]
122+
}
123+
]
117124
}
118125
};
119126
},

‎README_EN.md

Lines changed: 105 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,139 @@
1-
# vue-manage-system #
2-
The web management system solution based on Vue2 and Element-UI。[live demo](http://blog.gdfengshuo.com/example/work/)
1+
# vue-manage-system
2+
3+
<a href="https://github.com/vuejs/vue">
4+
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
5+
</a>
6+
<a href="https://github.com/ElemeFE/element">
7+
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui">
8+
</a>
9+
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
10+
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
11+
</a>
12+
<a href="https://github.com/lin-xin/vue-manage-system/releases">
13+
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
14+
</a>
15+
<a href="https://lin-xin.gitee.io/example/work/#/donate">
16+
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
17+
</a>
18+
19+
The web management system solution based on Vue2 and Element-UI。[live demo](https://lin-xin.gitee.io/example/work/)
320

421
## Donation
5-
![WeChat](http://blog.gdfengshuo.com/images/weixin.jpg)
622

7-
## Preface ##
23+
![WeChat](https://lin-xin.gitee.io/images/weixin.jpg)
24+
25+
## Preface
26+
827
The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue2 and Element-UI. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
928

10-
## Function ##
11-
- [x] Element-UI
12-
- [x] Login/Logout
13-
- [x] Dashboard
14-
- [x] Table
15-
- [x] Tabs
16-
- [x] From
17-
- [x] Chart :bar_chart:
18-
- [x] Editor
19-
- [x] Markdown
20-
- [x] Upload pictures by clipping or dragging
21-
- [x] Support manual switch themes :sparkles:
22-
- [x] List drag sort
23-
- [x] Permission
24-
- [x] 404 / 403
25-
- [x] Three level menu
26-
- [x] Custom icon
29+
## Function
2730

31+
- [x] Element-UI
32+
- [x] Login/Logout
33+
- [x] Dashboard
34+
- [x] Table
35+
- [x] Tabs
36+
- [x] From
37+
- [x] Chart :bar_chart:
38+
- [x] Editor
39+
- [x] Markdown
40+
- [x] Upload pictures by clipping or dragging
41+
- [x] Support manual switch themes :sparkles:
42+
- [x] List drag sort
43+
- [x] Permission
44+
- [x] 404 / 403
45+
- [x] Three level menu
46+
- [x] Custom icon
2847

29-
## Installation steps ##
48+
## Installation steps
3049

31-
git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
32-
cd vue-manage-system // Enter template directory
33-
npm install // Installation dependency
50+
git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
51+
cd vue-manage-system // Enter template directory
52+
npm install // Installation dependency
3453

35-
## Local development ##
54+
## Local development
3655

37-
// Open server and access http://localhost:8080 in browser
38-
npm run serve
56+
// Open server and access http://localhost:8080 in browser
57+
npm run serve
3958

40-
## Constructing production ##
59+
## Constructing production
4160

42-
// Constructing project
43-
npm run build
61+
// Constructing project
62+
npm run build
4463

45-
## Component description and presentation ##
64+
## Component description and presentation
65+
66+
### vue-schart
4667

47-
### vue-schart ###
4868
Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart)
4969

50-
```JavaScript
70+
```html
5171
<template>
5272
<div>
53-
<schart :canvasId="canvasId"
54-
:type="type"
55-
:width="width"
56-
:height="height"
57-
:data="data"
58-
:options="options"
59-
></schart>
73+
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
6074
</div>
6175
</template>
62-
76+
6377
<script>
64-
import Schart from 'vue-schart';
78+
import Schart from 'vue-schart'; // 导入Schart组件
6579
export default {
66-
data: function(){
80+
data() {
6781
return {
68-
canvasId: 'myCanvas',
69-
type: 'bar',
70-
width: 500,
71-
height: 400,
72-
data: [
73-
{name: '2014', value: 1342},
74-
{name: '2015', value: 2123},
75-
{name: '2016', value: 1654},
76-
{name: '2017', value: 1795},
77-
],
7882
options: {
79-
title: 'Total sales of stores in recent years'
83+
type: 'bar',
84+
title: {
85+
text: '最近一周各品类销售图'
86+
},
87+
labels: ['周一', '周二', '周三', '周四', '周五'],
88+
datasets: [
89+
{
90+
label: '家电',
91+
data: [234, 278, 270, 190, 230]
92+
},
93+
{
94+
label: '百货',
95+
data: [164, 178, 190, 135, 160]
96+
},
97+
{
98+
label: '食品',
99+
data: [144, 198, 150, 235, 120]
100+
}
101+
]
80102
}
81-
}
103+
};
82104
},
83105
components: {
84106
Schart
85107
}
86-
}
108+
};
87109
</script>
110+
<style>
111+
.wrapper {
112+
width: 7rem;
113+
height: 5rem;
114+
}
115+
</style>
88116
```
89117

90-
### element-ui ###
118+
### element-ui
119+
91120
A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
92121

93-
### Vue-Quill-Editor ###
122+
### Vue-Quill-Editor
123+
94124
Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
95125

96-
### mavonEditor ###
126+
### mavonEditor
127+
97128
A markdown editor based on Vue that supports a variety of personalized features. Github: [mavonEditor](https://github.com/hinesboy/mavonEditor)
98129

99-
### vue-cropperjs ###
130+
### vue-cropperjs
131+
100132
A Vue wrapper component for cropperjs. Github: [vue-cropperjs](https://github.com/Agontuk/vue-cropperjs)
101133

134+
## Notice
102135

103-
## Notice ##
104-
### 一、If I don't want to use some components, how can I delete it? ###
136+
### 一、If I don't want to use some components, how can I delete it?
105137

106138
For example, I don't want to use the Vue-Quill-Editor component, I need to take four steps.
107139

@@ -110,14 +142,14 @@ The first step to remove the component of the routing. Enter 'src/router/index.j
110142
```JavaScript
111143
{
112144
path: '/editor',
113-
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
145+
component: resolve => require(['../components/page/VueEditor.vue'], resolve)
114146
},
115147
```
116148

117149
Second,delete the component files. Enter 'src/components/page/' and delete 'VueEditor.vue' file.
118150

119151
The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue' and delete the code below.
120-
152+
121153
```js
122154
{
123155
index: 'editor',
@@ -126,17 +158,16 @@ The third step is to delete the entry. Enter 'src/components/common/Sidebar.vue'
126158
```
127159

128160
Finally, uninstall this component.
129-
130-
npm un vue-quill-editor -S
161+
npm un vue-quill-editor -S
131162

132163
Complete!
133164

134-
### 二、How to switch themes? ###
165+
### 二、How to switch themes?
135166

136167
The first step to enter 'src/main.js' and change into green theme.
137168

138169
```javascript
139-
import 'element-ui/lib/theme-default/index.css'; // default theme
170+
import 'element-ui/lib/theme-default/index.css'; // default theme
140171
// import '../static/css/theme-green/index.css'; // green theme
141172
```
142173

@@ -150,15 +181,16 @@ The second step to enter 'src/App.vue' and change into green theme.
150181

151182
Finally,enter 'src/components/common/Sidebar.vue' and find el-menu Tags,delete 'background-color/text-color/active-text-color'。
152183

153-
## Screenshot ##
154-
### Default theme ###
184+
## Screenshot
185+
186+
### Default theme
155187

156188
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
157189

158-
### Green theme ###
190+
### Green theme
159191

160192
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
161193

162194
## License
163195

164-
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
196+
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-manage-system",
3-
"version": "4.1.0",
3+
"version": "4.2.0",
44
"private": true,
55
"scripts": {
66
"dev": "npm run serve",
@@ -17,7 +17,7 @@
1717
"vue-i18n": "^8.10.0",
1818
"vue-quill-editor": "^3.0.6",
1919
"vue-router": "^3.0.3",
20-
"vue-schart": "^1.0.0",
20+
"vue-schart": "^2.0.0",
2121
"vuedraggable": "^2.17.0"
2222
},
2323
"devDependencies": {

0 commit comments

Comments
 (0)