Skip to content

Commit 0a17d0f

Browse files
lin-xinlin-xin
committed
Use vue-schart replace vue-echarts
1 parent 96f79bc commit 0a17d0f

File tree

4 files changed

+260
-176
lines changed

4 files changed

+260
-176
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "manage-system",
3-
"version": "2.0.0",
3+
"version": "2.1.0",
44
"description": "基于Vue.js 2.x系列 + element-ui 内容管理系统解决方案",
55
"author": "lin-xin <2981207131@qq.com>",
66
"private": true,
@@ -16,7 +16,7 @@
1616
"vue": "^2.3.2",
1717
"vue-core-image-upload": "2.1.11",
1818
"vue-datasource": "1.0.9",
19-
"vue-echarts-v3": "1.0.3",
19+
"vue-schart": "^0.1.2",
2020
"vue-quill-editor": "2.1.6",
2121
"vue-router": "^2.3.1",
2222
"vue-simplemde": "0.3.8"

‎src/components/page/BaseCharts.vue

Lines changed: 41 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -7,190 +7,61 @@
77
</el-breadcrumb>
88
</div>
99
<div class="plugins-tips">
10-
vue-echarts-v3：基于vue2和eCharts.js3的图表组件。
11-
访问地址：<a href="https://github.com/xlsdg/vue-echarts-v3" target="_blank">vue-echarts-v3</a>
12-
</div>
13-
<div class="content-title">基础图表</div>
14-
<div class="echarts">
15-
<IEcharts :option="line" ></IEcharts>
16-
</div>
17-
<div class="echarts">
18-
<IEcharts :option="bar" ></IEcharts>
19-
</div>
20-
<div class="echarts">
21-
<IEcharts :option="pie" ></IEcharts>
22-
</div>
23-
<div class="echarts">
24-
<IEcharts :option="pie_radius" ></IEcharts>
25-
</div>
26-
<div class="content-title">混合图表</div>
27-
<div class="mix-echarts">
28-
<IEcharts :option="mix" ></IEcharts>
10+
vue-schart：vue.js封装sChart.js的图表组件。
11+
访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
2912
</div>
13+
<div class="content-title">柱状图</div>
14+
<schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
15+
<div class="content-title">折线图</div>
16+
<schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
17+
<div class="content-title">饼状图</div>
18+
<schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
19+
<div class="content-title">环形图</div>
20+
<schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
3021
</div>
3122
</template>
3223

3324
<script>
34-
// import IEcharts from 'vue-echarts-v3';
35-
import IEcharts from 'vue-echarts-v3/src/lite.vue';
36-
37-
import 'echarts/lib/chart/bar';
38-
import 'echarts/lib/chart/line';
39-
import 'echarts/lib/chart/pie';
40-
import 'echarts/lib/component/legend';
41-
import 'echarts/lib/component/tooltip';
42-
import 'echarts/lib/component/title';
25+
import Schart from 'vue-schart';
4326
export default {
4427
components: {
45-
IEcharts
28+
Schart
4629
},
4730
data: () => ({
48-
line: {
49-
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
50-
title: {
51-
text: '曲线图'
52-
},
53-
xAxis: {
54-
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
55-
},
56-
yAxis:{},
57-
series: [
58-
{
59-
name: "销量",
60-
type: "line",
61-
data: [5, 20, 36, 10, 10, 20]
62-
}
63-
]
31+
data1:[
32+
{name:'2012',value:1141},
33+
{name:'2013',value:1499},
34+
{name:'2014',value:2260},
35+
{name:'2015',value:1170},
36+
{name:'2016',value:970},
37+
{name:'2017',value:1450}
38+
],
39+
data2 : [
40+
{name:'短袖',value:1200},
41+
{name:'休闲裤',value:1222},
42+
{name:'连衣裙',value:1283},
43+
{name:'外套',value:1314},
44+
{name:'羽绒服',value:2314}
45+
],
46+
options1: {
47+
title: '某商店近年营业总额',
48+
bgColor: '#829dda',
49+
titleColor: '#ffffff',
50+
fillColor: '#72f6ff',
51+
axisColor: '#eeeeee',
52+
contentColor: '#bbbbbb'
6453
},
65-
bar: {
66-
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949"],
67-
title: {
68-
text: '柱状图'
69-
},
70-
xAxis: {
71-
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
72-
},
73-
yAxis:{},
74-
series: [
75-
{
76-
name: "销量",
77-
type: "bar",
78-
data: [5, 20, 36, 10, 10, 20]
79-
}
80-
]
81-
},
82-
pie: {
83-
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
84-
title : {
85-
text: '饼状图',
86-
x:'center'
87-
},
88-
tooltip : {
89-
trigger: 'item',
90-
formatter: "{a} <br/>{b} : {c} ({d}%)"
91-
},
92-
legend: {
93-
orient: 'vertical',
94-
left: 'left',
95-
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"]
96-
},
97-
series : [
98-
{
99-
name: '销量',
100-
type: 'pie',
101-
radius : '55%',
102-
center: ['50%', '50%'],
103-
data:[
104-
{value:335, name:'衬衫'},
105-
{value:310, name:'羊毛衫'},
106-
{value:234, name:'雪纺衫'},
107-
{value:135, name:'裤子'},
108-
{value:548, name:'高跟鞋'}
109-
],
110-
itemStyle: {
111-
emphasis: {
112-
shadowBlur: 10,
113-
shadowOffsetX: 0,
114-
shadowColor: 'rgba(0, 0, 0, 0.5)'
115-
}
116-
}
117-
}
118-
]
119-
},
120-
pie_radius:{
121-
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
122-
title : {
123-
text: '环形图',
124-
x:'center'
125-
},
126-
tooltip : {
127-
trigger: 'item',
128-
formatter: "{a} <br/>{b} : {c} ({d}%)"
129-
},
130-
legend: {
131-
orient: 'vertical',
132-
left: 'left',
133-
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"]
134-
},
135-
series : [
136-
{
137-
name: '销量',
138-
type: 'pie',
139-
radius : ['40%','60%'],
140-
data:[
141-
{value:335, name:'衬衫'},
142-
{value:310, name:'羊毛衫'},
143-
{value:234, name:'雪纺衫'},
144-
{value:135, name:'裤子'},
145-
{value:548, name:'高跟鞋'}
146-
],
147-
itemStyle: {
148-
emphasis: {
149-
shadowBlur: 10,
150-
shadowOffsetX: 0,
151-
shadowColor: 'rgba(0, 0, 0, 0.5)'
152-
}
153-
}
154-
}
155-
]
156-
},
157-
mix:{
158-
color:["#20a0ff","#13CE66","#F7BA2A","#FF4949","#61a0a8"],
159-
legend: {
160-
data:['步步高','小天才','imoo']
161-
},
162-
xAxis: {
163-
data: ['周一','周二','周三','周四','周五','周末']
164-
},
165-
yAxis:{},
166-
series: [
167-
{
168-
name: "步步高",
169-
type: "line",
170-
data: [15, 20, 26, 30, 40, 27]
171-
},
172-
{
173-
name: "小天才",
174-
type: "bar",
175-
data: [5, 30, 36, 10, 34, 20]
176-
},
177-
{
178-
name: "imoo",
179-
type: "bar",
180-
data: [35, 40, 30, 50, 60, 40]
181-
}
182-
]
183-
}
54+
options2: {
55+
title: '某商店各商品年度销量',
56+
bgColor: '#829dca',
57+
titleColor: '#ffffff',
58+
legendColor: '#ffffff'
59+
}
18460
})
18561
}
18662
</script>
18763

18864
<style scoped>
189-
.echarts {
190-
float: left;
191-
width: 500px;
192-
height: 400px;
193-
}
19465
.content-title{
19566
clear: both;
19667
font-weight: 400;
@@ -199,8 +70,5 @@
19970
font-size: 22px;
20071
color: #1f2f3d;
20172
}
202-
.mix-echarts{
203-
width:900px;
204-
height:600px;
205-
}
73+
20674
</style>

0 commit comments

Comments
 (0)