Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e3ec0be

Browse files
author
高晨辉
committed
add echarts view
1 parent ea35020 commit e3ec0be

File tree

6 files changed

+328
-2
lines changed

6 files changed

+328
-2
lines changed

‎src/router/index.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,27 @@ export const asyncRoutes = [
175175
}
176176
]
177177
},
178+
{
179+
path: '/echarts',
180+
component: Layout,
181+
name: 'Echarts',
182+
redirect: '/echarts/slide-chart',
183+
meta: { icon: 'el-icon-s-marketing', title: 'Echarts' },
184+
children: [
185+
{
186+
path: 'slide-chart',
187+
name: 'Sldie-chart',
188+
component: () => import('@/views/echarts/slide-chart'),
189+
meta: { title: '滑动charts' }
190+
},
191+
{
192+
path: 'dynamic-chart',
193+
name: 'Dynamic-chart',
194+
component: () => import('@/views/echarts/dynamic-chart'),
195+
meta: { title: '切换charts' }
196+
}
197+
]
198+
},
178199
{
179200
path: '/excel',
180201
component: Layout,

‎src/style/index.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,9 @@ body {
7171
.mtop30 {
7272
margin-top: $px30;
7373
}
74+
.fontBold {
75+
font-weight: bold;
76+
}
7477
.mtrt20 {
7578
margin-right: $px20;
7679
}
@@ -115,6 +118,9 @@ body {
115118
border: 1px solid #eaeefb;
116119
border-radius: 4px;
117120
}
121+
span {
122+
font-size: 12px;
123+
}
118124
i {
119125
margin-right: 5px;
120126
color: #ffc107;

‎src/views/components/pushImg.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
<p class="pTitle">
88
<i class="el-icon-s-opportunity"></i>
99
点击上传用户图像
10+
<span
11+
>(支持image/jpg,image/jpeg,image/png,image/gif格式图片
12+
且大小不能超过2MB)</span
13+
>
1014
</p>
1115
<upload-com></upload-com>
1216
</el-card>

‎src/views/components/slide-yz.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@
99
点击按钮调出滑动验证模块,相关配置如下:
1010
</p>
1111
<el-button type="primary" @click="showSlide = true">验证</el-button>
12-
<p class="pTitle" style="margin-top: 50px;">参数说明:</p>
12+
<p class="pTitle fontBold" style="margin-top: 50px;">参数说明:</p>
1313
<el-table :data="dataTab1" border stripe style="width: 100%">
1414
<el-table-column prop="params" label="参数"></el-table-column>
1515
<el-table-column prop="type" label="类型"></el-table-column>
1616
<el-table-column prop="default" label="默认值"></el-table-column>
1717
<el-table-column prop="info" label="说明"></el-table-column>
1818
</el-table>
19-
<p class="pTitle" style="margin-top: 20px;">回调函数:</p>
19+
<p class="pTitle fontBold" style="margin-top: 20px;">回调函数:</p>
2020
<el-table :data="dataTab2" border stripe style="width: 100%">
2121
<el-table-column prop="funcName" label="事件名"></el-table-column>
2222
<el-table-column prop="type" label="类型"></el-table-column>

‎src/views/echarts/dynamic-chart.vue

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<template>
2+
<div class="slideCharts">
3+
<div class="chartBox">
4+
<el-button @click="setChartData(10)">10天</el-button>
5+
<el-button @click="setChartData(30)">30天</el-button>
6+
<el-button @click="setChartData(60)">60天</el-button>
7+
<el-button @click="setChartData(180)">180天</el-button>
8+
<div ref="myCharts" class="chartBox_d"></div>
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import echarts from 'echarts'
15+
import resize from '@/mixins/resize'
16+
require('echarts/theme/macarons')
17+
export default {
18+
mixins: [resize],
19+
data() {
20+
return {
21+
mycharts: null,
22+
date: [],
23+
price: [],
24+
chartData: {
25+
date: [],
26+
price: []
27+
}
28+
}
29+
},
30+
mounted() {
31+
this.mockData()
32+
this.$nextTick().then(() => {
33+
this.initEcharts()
34+
})
35+
},
36+
methods: {
37+
// mock data
38+
mockData() {
39+
let base = +new Date('2019年1月1日')
40+
let oneDay = 24 * 3600 * 1000
41+
let date = []
42+
let data = []
43+
let len = Math.ceil((+new Date() - base) / oneDay)
44+
for (let i = 0; i < len; i++) {
45+
let item = new Date(base)
46+
base += oneDay
47+
date.push(
48+
item.getFullYear() +
49+
'/' +
50+
(item.getMonth() + 1) +
51+
'/' +
52+
item.getDate()
53+
)
54+
data.push(Math.floor(Math.random() * (1000 - 500 + 1) + 500))
55+
}
56+
this.date = date
57+
this.price = data
58+
// this.chartData.date = date
59+
// this.chartData.price = data
60+
},
61+
setChartData(num) {
62+
let len = this.date.length
63+
this.chartData.date = this.date.slice(len - num)
64+
this.chartData.price = this.price.slice(len - num)
65+
this._setOption(this.chartData)
66+
},
67+
initEcharts() {
68+
this.mycharts = echarts.init(this.$refs.myCharts, 'macarons')
69+
this.setChartData(10)
70+
// this._setOption(this.chartData)
71+
},
72+
_setOption(chartData) {
73+
this.mycharts.setOption({
74+
title: {
75+
text: '商品价格变动图',
76+
left: '16'
77+
},
78+
tooltip: {
79+
trigger: 'axis',
80+
axisPointer: {
81+
type: 'cross',
82+
label: {
83+
background: '#6a7985'
84+
}
85+
}
86+
},
87+
grid: {
88+
left: '20',
89+
right: '20',
90+
bottom: '3',
91+
containLabel: true
92+
},
93+
xAxis: [
94+
{
95+
type: 'category',
96+
boundaryGap: false,
97+
data: chartData.date
98+
}
99+
],
100+
yAxis: [
101+
{
102+
type: 'value',
103+
boundaryGap: [0, '100%']
104+
}
105+
],
106+
series: [
107+
{
108+
name: '商品价格',
109+
type: 'line',
110+
areaStyle: {
111+
color: '#55a8fd',
112+
opacity: 0.3
113+
},
114+
itemStyle: {
115+
color: '#55a8fd'
116+
},
117+
lineStyle: {
118+
color: '#55a8fd'
119+
},
120+
smooth: true,
121+
data: chartData.price,
122+
animationDuration: 2800,
123+
animationEasing: 'quadraticOut'
124+
}
125+
]
126+
})
127+
}
128+
}
129+
}
130+
</script>
131+
<style lang="scss" scoped>
132+
.slideCharts {
133+
height: calc(100% - 72px);
134+
}
135+
.chartBox {
136+
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
137+
background: #fff;
138+
height: 100%;
139+
.chartBox_d {
140+
height: 80%;
141+
box-sizing: border-box;
142+
padding: 30px 20px 30px 20px;
143+
}
144+
}
145+
</style>

‎src/views/echarts/slide-chart.vue

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<template>
2+
<div class="slideCharts">
3+
<div class="chartBox">
4+
<div ref="myCharts" class="chartBox_d"></div>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
import echarts from 'echarts'
11+
import resize from '@/mixins/resize'
12+
require('echarts/theme/macarons')
13+
export default {
14+
mixins: [resize],
15+
data() {
16+
return {
17+
mycharts: null,
18+
chartData: {
19+
date: [],
20+
price: []
21+
}
22+
}
23+
},
24+
mounted() {
25+
this.mockData()
26+
this.$nextTick().then(() => {
27+
this.initEcharts()
28+
})
29+
},
30+
methods: {
31+
// mock data
32+
mockData() {
33+
let base = +new Date('2018年1月1日')
34+
let oneDay = 24 * 3600 * 1000
35+
let date = []
36+
let data = []
37+
let len = Math.ceil((+new Date() - base) / oneDay)
38+
for (let i = 0; i < len; i++) {
39+
let item = new Date(base)
40+
base += oneDay
41+
date.push(
42+
item.getFullYear() +
43+
'/' +
44+
(item.getMonth() + 1) +
45+
'/' +
46+
item.getDate()
47+
)
48+
data.push(Math.floor(Math.random() * (1000 - 500 + 1) + 500))
49+
}
50+
this.chartData.date = date
51+
this.chartData.price = data
52+
},
53+
initEcharts() {
54+
this.mycharts = echarts.init(this.$refs.myCharts, 'macarons')
55+
this._setOption(this.chartData)
56+
},
57+
_setOption(chartData) {
58+
this.mycharts.setOption({
59+
title: {
60+
text: '商品价格变动图',
61+
left: '16'
62+
},
63+
tooltip: {
64+
trigger: 'axis',
65+
axisPointer: {
66+
type: 'cross',
67+
label: {
68+
background: '#6a7985'
69+
}
70+
}
71+
},
72+
grid: {
73+
left: '20',
74+
right: '20',
75+
bottom: '30',
76+
containLabel: true
77+
},
78+
xAxis: [
79+
{
80+
type: 'category',
81+
boundaryGap: false,
82+
data: chartData.date
83+
}
84+
],
85+
yAxis: [
86+
{
87+
type: 'value',
88+
boundaryGap: [0, '100%']
89+
}
90+
],
91+
dataZoom: [
92+
{
93+
type: 'inside',
94+
start: 0,
95+
end: 10
96+
},
97+
{
98+
start: 0,
99+
end: 10,
100+
handleSize: '80%',
101+
handleStyle: {
102+
color: '#fff',
103+
shadowBlur: 3,
104+
shadowColor: 'rgba(0, 0, 0, 0.6)',
105+
shadowOffsetX: 2,
106+
shadowOffsetY: 2
107+
},
108+
bottom: 0
109+
}
110+
],
111+
series: [
112+
{
113+
name: '商品价格',
114+
type: 'line',
115+
areaStyle: {
116+
color: '#55a8fd',
117+
opacity: 0.3
118+
},
119+
itemStyle: {
120+
color: '#55a8fd'
121+
},
122+
lineStyle: {
123+
color: '#55a8fd'
124+
},
125+
smooth: true,
126+
data: chartData.price,
127+
animationDuration: 2800,
128+
animationEasing: 'quadraticOut'
129+
}
130+
]
131+
})
132+
}
133+
}
134+
}
135+
</script>
136+
<style lang="scss" scoped>
137+
.slideCharts {
138+
height: calc(100% - 72px);
139+
}
140+
.chartBox {
141+
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
142+
background: #fff;
143+
height: 100%;
144+
.chartBox_d {
145+
height: 100%;
146+
box-sizing: border-box;
147+
padding: 30px 20px 30px 20px;
148+
}
149+
}
150+
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /