Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
InJoyU
vue-element-admin
提交
4b4bf494
V
vue-element-admin
项目概览
InJoyU
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
4b4bf494
编写于
6月 30, 2017
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refine echarts demo
上级
b15caf63
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
673 addition
and
669 deletion
+673
-669
src/components/Charts/keyboard.vue
src/components/Charts/keyboard.vue
+104
-104
src/components/Charts/keyboard2.vue
src/components/Charts/keyboard2.vue
+129
-129
src/components/Charts/lineMarker.vue
src/components/Charts/lineMarker.vue
+199
-197
src/components/Charts/mixchart.vue
src/components/Charts/mixchart.vue
+235
-233
src/views/charts/keyboard.vue
src/views/charts/keyboard.vue
+1
-1
src/views/charts/keyboard2.vue
src/views/charts/keyboard2.vue
+1
-1
src/views/charts/line.vue
src/views/charts/line.vue
+1
-1
src/views/charts/mixchart.vue
src/views/charts/mixchart.vue
+3
-3
未找到文件。
src/components/Charts/keyboard.vue
浏览文件 @
4b4bf494
...
...
@@ -2,111 +2,111 @@
<div
:class=
"className"
:id=
"id"
:style=
"
{height:height,width:width}">
</div>
</
template
>
<
script
>
// 引入 ECharts 主模块
const
echarts
=
require
(
'
echarts/lib/echarts
'
);
// 引入柱状图
require
(
'
echarts/lib/chart/bar
'
);
require
(
'
echarts/lib/chart/line
'
);
// 引入提示框和标题组件
require
(
'
echarts/lib/component/tooltip
'
);
require
(
'
echarts/lib/component/title
'
);
import
echarts
from
'
echarts
'
;
require
(
'
echarts/lib/component/visualMap
'
);
export
default
{
name
:
'
barPercent
'
,
props
:
{
className
:
{
type
:
String
,
default
:
'
chart
'
},
id
:
{
type
:
String
,
default
:
'
chart
'
},
width
:
{
type
:
String
,
default
:
'
200px
'
},
height
:
{
type
:
String
,
default
:
'
200px
'
}
},
data
()
{
return
{};
},
mounted
()
{
this
.
initBar
();
},
methods
:
{
initBar
()
{
this
.
chart
=
echarts
.
init
(
document
.
getElementById
(
this
.
id
));
export
default
{
props
:
{
className
:
{
type
:
String
,
default
:
'
chart
'
},
id
:
{
type
:
String
,
default
:
'
chart
'
},
width
:
{
type
:
String
,
default
:
'
200px
'
},
height
:
{
type
:
String
,
default
:
'
200px
'
}
},
data
()
{
return
{
chart
:
null
};
},
mounted
()
{
this
.
initChart
();
},
beforeDestroy
()
{
if
(
!
this
.
chart
)
{
return
}
this
.
chart
.
dispose
();
this
.
chart
=
null
;
},
methods
:
{
initChart
()
{
this
.
chart
=
echarts
.
init
(
document
.
getElementById
(
this
.
id
));
const
xAxisData
=
[];
const
data
=
[];
for
(
let
i
=
0
;
i
<
30
;
i
++
)
{
xAxisData
.
push
(
i
+
'
号
'
);
data
.
push
(
Math
.
round
(
Math
.
random
()
*
2
+
3
))
}
const
xAxisData
=
[];
const
data
=
[];
for
(
let
i
=
0
;
i
<
30
;
i
++
)
{
xAxisData
.
push
(
i
+
'
号
'
);
data
.
push
(
Math
.
round
(
Math
.
random
()
*
2
+
3
))
}
this
.
chart
.
setOption
(
{
backgroundColor
:
'
#08263a
'
,
tooltip
:
{
trigger
:
'
axis
'
},
xAxis
:
{
show
:
false
,
data
:
xAxisData
},
visualMap
:
{
show
:
false
,
min
:
0
,
max
:
50
,
dimension
:
0
,
inRange
:
{
color
:
[
'
#4a657a
'
,
'
#308e92
'
,
'
#b1cfa5
'
,
'
#f5d69f
'
,
'
#f5898b
'
,
'
#ef5055
'
]
}
},
yAxis
:
{
axisLine
:
{
show
:
false
},
axisLabel
:
{
textStyle
:
{
color
:
'
#4a657a
'
}
},
splitLine
:
{
show
:
true
,
lineStyle
:
{
color
:
'
#08263f
'
}
},
axisTick
:
{}
},
series
:
[{
type
:
'
bar
'
,
data
,
name
:
'
撸文数
'
,
itemStyle
:
{
normal
:
{
barBorderRadius
:
5
,
shadowBlur
:
10
,
shadowColor
:
'
#111
'
}
},
animationEasing
:
'
elasticOut
'
,
animationEasingUpdate
:
'
elasticOut
'
,
animationDelay
(
idx
)
{
return
idx
*
20
;
},
animationDelayUpdate
(
idx
)
{
return
idx
*
20
;
}
}]
})
}
}
}
this
.
chart
.
setOption
(
{
backgroundColor
:
'
#08263a
'
,
tooltip
:
{
trigger
:
'
axis
'
},
xAxis
:
{
show
:
false
,
data
:
xAxisData
},
visualMap
:
{
show
:
false
,
min
:
0
,
max
:
50
,
dimension
:
0
,
inRange
:
{
color
:
[
'
#4a657a
'
,
'
#308e92
'
,
'
#b1cfa5
'
,
'
#f5d69f
'
,
'
#f5898b
'
,
'
#ef5055
'
]
}
},
yAxis
:
{
axisLine
:
{
show
:
false
},
axisLabel
:
{
textStyle
:
{
color
:
'
#4a657a
'
}
},
splitLine
:
{
show
:
true
,
lineStyle
:
{
color
:
'
#08263f
'
}
},
axisTick
:
{}
},
series
:
[{
type
:
'
bar
'
,
data
,
name
:
'
撸文数
'
,
itemStyle
:
{
normal
:
{
barBorderRadius
:
5
,
shadowBlur
:
10
,
shadowColor
:
'
#111
'
}
},
animationEasing
:
'
elasticOut
'
,
animationEasingUpdate
:
'
elasticOut
'
,
animationDelay
(
idx
)
{
return
idx
*
20
;
},
animationDelayUpdate
(
idx
)
{
return
idx
*
20
;
}
}]
})
}
}
}
</
script
>
src/components/Charts/keyboard2.vue
浏览文件 @
4b4bf494
...
...
@@ -2,148 +2,148 @@
<div
:class=
"className"
:id=
"id"
:style=
"
{height:height,width:width}">
</div>
</
template
>
<
script
>
// 引入 ECharts 主模块
const
echarts
=
require
(
'
echarts/lib/echarts
'
);
// 引入柱状图
require
(
'
echarts/lib/chart/bar
'
);
require
(
'
echarts/lib/chart/line
'
);
// 引入提示框和标题组件
require
(
'
echarts/lib/component/tooltip
'
);
require
(
'
echarts/lib/component/title
'
);
import
echarts
from
'
echarts
'
;
require
(
'
echarts/lib/component/visualMap
'
);
export
default
{
name
:
'
barPercent
'
,
props
:
{
className
:
{
type
:
String
,
default
:
'
chart
'
},
id
:
{
type
:
String
,
default
:
'
chart
'
},
width
:
{
type
:
String
,
default
:
'
200px
'
},
height
:
{
type
:
String
,
default
:
'
200px
'
}
export
default
{
props
:
{
className
:
{
type
:
String
,
default
:
'
chart
'
},
data
()
{
return
{};
id
:
{
type
:
String
,
default
:
'
chart
'
},
mounted
()
{
this
.
initBar
();
width
:
{
type
:
String
,
default
:
'
200px
'
},
methods
:
{
initBar
()
{
this
.
chart
=
echarts
.
init
(
document
.
getElementById
(
this
.
id
));
height
:
{
type
:
String
,
default
:
'
200px
'
}
},
data
()
{
return
{
chart
:
null
};
},
mounted
()
{
this
.
initChart
();
},
beforeDestroy
()
{
if
(
!
this
.
chart
)
{
return
}
this
.
chart
.
dispose
();
this
.
chart
=
null
;
},
methods
:
{
initChart
()
{
this
.
chart
=
echarts
.
init
(
document
.
getElementById
(
this
.
id
));
const
xAxisData
=
[];
const
data
=
[];
const
data2
=
[];
for
(
let
i
=
0
;
i
<
50
;
i
++
)
{
xAxisData
.
push
(
i
);
data
.
push
((
Math
.
sin
(
i
/
5
)
*
(
i
/
5
-
10
)
+
i
/
6
)
*
5
);
data2
.
push
((
Math
.
sin
(
i
/
5
)
*
(
i
/
5
+
10
)
+
i
/
6
)
*
3
);
}
this
.
chart
.
setOption
(
{
backgroundColor
:
'
#08263a
'
,
xAxis
:
[{
show
:
false
,
data
:
xAxisData
},
{
show
:
false
,
data
:
xAxisData
}],
visualMap
:
{
show
:
false
,
min
:
0
,
max
:
50
,
dimension
:
0
,
inRange
:
{
color
:
[
'
#4a657a
'
,
'
#308e92
'
,
'
#b1cfa5
'
,
'
#f5d69f
'
,
'
#f5898b
'
,
'
#ef5055
'
]
}
const
xAxisData
=
[];
const
data
=
[];
const
data2
=
[];
for
(
let
i
=
0
;
i
<
50
;
i
++
)
{
xAxisData
.
push
(
i
);
data
.
push
((
Math
.
sin
(
i
/
5
)
*
(
i
/
5
-
10
)
+
i
/
6
)
*
5
);
data2
.
push
((
Math
.
sin
(
i
/
5
)
*
(
i
/
5
+
10
)
+
i
/
6
)
*
3
);
}
this
.
chart
.
setOption
(
{
backgroundColor
:
'
#08263a
'
,
xAxis
:
[{
show
:
false
,
data
:
xAxisData
},
{
show
:
false
,
data
:
xAxisData
}],
visualMap
:
{
show
:
false
,
min
:
0
,
max
:
50
,
dimension
:
0
,
inRange
:
{
color
:
[
'
#4a657a
'
,
'
#308e92
'
,
'
#b1cfa5
'
,
'
#f5d69f
'
,
'
#f5898b
'
,
'
#ef5055
'
]
}
},
yAxis
:
{
axisLine
:
{
show
:
false
},
yAxis
:
{
axisLine
:
{
show
:
false
},
axisLabel
:
{
textStyle
:
{
color
:
'
#4a657a
'
}
},
splitLine
:
{
show
:
true
,
lineStyle
:
{
color
:
'
#08263f
'
}
},
axisTick
:
{
show
:
false
axisLabel
:
{
textStyle
:
{
color
:
'
#4a657a
'
}
},
series
:
[{
name
:
'
back
'
,
type
:
'
bar
'
,
data
:
data2
,
z
:
1
,
itemStyle
:
{
normal
:
{
opacity
:
0.4
,
barBorderRadius
:
5
,
shadowBlur
:
3
,
shadowColor
:
'
#111
'
}
}
},
{
name
:
'
Simulate Shadow
'
,
type
:
'
line
'
,
data
,
z
:
2
,
showSymbol
:
false
,
animationDelay
:
0
,
animationEasing
:
'
linear
'
,
animationDuration
:
1200
,
splitLine
:
{
show
:
true
,
lineStyle
:
{
normal
:
{
color
:
'
transparent
'
}
},
areaStyle
:
{
normal
:
{
color
:
'
#08263a
'
,
shadowBlur
:
50
,
shadowColor
:
'
#000
'
}
color
:
'
#08263f
'
}
},
{
name
:
'
front
'
,
type
:
'
bar
'
,
data
,
xAxisIndex
:
1
,
z
:
3
,
itemStyle
:
{
normal
:
{
barBorderRadius
:
5
}
},
axisTick
:
{
show
:
false
}
},
series
:
[{
name
:
'
back
'
,
type
:
'
bar
'
,
data
:
data2
,
z
:
1
,
itemStyle
:
{
normal
:
{
opacity
:
0.4
,
barBorderRadius
:
5
,
shadowBlur
:
3
,
shadowColor
:
'
#111
'
}
}
},
{
name
:
'
Simulate Shadow
'
,
type
:
'
line
'
,
data
,
z
:
2
,
showSymbol
:
false
,
animationDelay
:
0
,
animationEasing
:
'
linear
'
,
animationDuration
:
1200
,
lineStyle
:
{
normal
:
{
color
:
'
transparent
'
}
}],
animationEasing
:
'
elasticOut
'
,
animationEasingUpdate
:
'
elasticOut
'
,
animationDelay
(
idx
)
{
return
idx
*
20
;
},
animationDelayUpdate
(
idx
)
{
return
idx
*
20
;
areaStyle
:
{
normal
:
{
color
:
'
#08263a
'
,
shadowBlur
:
50
,
shadowColor
:
'
#000
'
}
}
})
}
},
{
name
:
'
front
'
,
type
:
'
bar
'
,
data
,
xAxisIndex
:
1
,
z
:
3
,
itemStyle
:
{
normal
:
{
barBorderRadius
:
5
}
}
}],
animationEasing
:
'
elasticOut
'
,
animationEasingUpdate
:
'
elasticOut
'
,
animationDelay
(
idx
)
{
return
idx
*
20
;
},
animationDelayUpdate
(
idx
)
{
return
idx
*
20
;
}
})
}
}
}
</
script
>
src/components/Charts/lineMarker.vue
浏览文件 @
4b4bf494
...
...
@@ -2,218 +2,220 @@
<div
:class=
"className"
:id=
"id"
:style=
"
{height:height,width:width}">
</div>
</
template
>
<
script
>
// 引入 ECharts 主模块
const
echarts
=
require
(
'
echarts/lib/echarts
'
);
import
echarts
from
'
echarts
'
;
require
(
'
echarts/lib/chart/line
'
);
// 引入提示框和标题组件
require
(
'
echarts/lib/component/tooltip
'
);
require
(
'
echarts/lib/component/title
'
);
require
(
'
echarts/lib/component/legend
'
);
export
default
{
name
:
'
barPercent
'
,
props
:
{
className
:
{
type
:
String
,
default
:
'
chart
'
},
id
:
{
type
:
String
,
default
:
'
chart
'
},
width
:
{
type
:
String
,
default
:
'
200px
'
},
height
:
{
type
:
String
,
default
:
'
200px
'
}
export
default
{
props
:
{
className
:
{
type
:
String
,
default
:
'
chart
'
},
data
()
{
return
{};
id
:
{
type
:
String
,
default
:
'
chart
'
},
mounted
()
{
this
.
initChart
();
width
:
{
type
:
String
,
default
:
'
200px
'
},
methods
:
{
initChart
()
{
this
.
chart
=
echarts
.
init
(
document
.
getElementById
(
this
.
id
));
height
:
{
type
:
String
,
default
:
'
200px
'
}
},
data
()
{
return
{
chart
:
null
};
},
mounted
()
{
this
.
initChart
();
},
beforeDestroy
()
{
if
(
!
this
.
chart
)
{
return
}
this
.
chart
.
dispose
();
this
.
chart
=
null
;
},
methods
:
{
initChart
()
{
this
.
chart
=
echarts
.
init
(
document
.
getElementById
(
this
.
id
));
this
.
chart
.
setOption
({
backgroundColor
:
'
#394056
'
,
title
:
{
text
:
'
请求数
'
,
textStyle
:
{
fontWeight
:
'
normal
'
,
fontSize
:
16
,
color
:
'
#F1F1F3
'
},
left
:
'
6%
'
this
.
chart
.
setOption
({
backgroundColor
:
'
#394056
'
,
title
:
{
text
:
'
请求数
'
,
textStyle
:
{
fontWeight
:
'
normal
'
,
fontSize
:
16
,
color
:
'
#F1F1F3
'
},
left
:
'
6%
'
},
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
lineStyle
:
{
color
:
'
#57617B
'
}
}
},
legend
:
{
icon
:
'
rect
'
,
itemWidth
:
14
,
itemHeight
:
5
,
itemGap
:
13
,
data
:
[
'
移动
'
,
'
电信
'
,
'
联通
'
],
right
:
'
4%
'
,
textStyle
:
{
fontSize
:
12
,
color
:
'
#F1F1F3
'
}
},
grid
:
{
left
:
'
3%
'
,
right
:
'
4%
'
,
bottom
:
'
3%
'
,
containLabel
:
true
},
xAxis
:
[{
type
:
'
category
'
,
boundaryGap
:
false
,
axisLine
:
{
lineStyle
:
{
color
:
'
#57617B
'
}
},
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
lineStyle
:
{
color
:
'
#57617B
'
}
data
:
[
'
13:00
'
,
'
13:05
'
,
'
13:10
'
,
'
13:15
'
,
'
13:20
'
,
'
13:25
'
,
'
13:30
'
,
'
13:35
'
,
'
13:40
'
,
'
13:45
'
,
'
13:50
'
,
'
13:55
'
]
}],
yAxis
:
[{
type
:
'
value
'
,
name
:
'
单位(%)
'
,
axisTick
:
{
show
:
false
},
axisLine
:
{
lineStyle
:
{
color
:
'
#57617B
'
}
},
legend
:
{
icon
:
'
rect
'
,
itemWidth
:
14
,
itemHeight
:
5
,
itemGap
:
13
,
data
:
[
'
移动
'
,
'
电信
'
,
'
联通
'
],
right
:
'
4%
'
,
axisLabel
:
{
margin
:
10
,
textStyle
:
{
fontSize
:
12
,
color
:
'
#F1F1F3
'
fontSize
:
14
}
},
grid
:
{
left
:
'
3%
'
,
right
:
'
4%
'
,
bottom
:
'
3%
'
,
containLabel
:
true
splitLine
:
{
lineStyle
:
{
color
:
'
#57617B
'
}
}
}],
series
:
[{
name
:
'
移动
'
,
type
:
'
line
'
,
smooth
:
true
,
symbol
:
'
circle
'
,
symbolSize
:
5
,
showSymbol
:
false
,
lineStyle
:
{
normal
:
{
width
:
1
}
},
xAxis
:
[{
type
:
'
category
'
,
boundaryGap
:
false
,
axisLine
:
{
lineStyle
:
{
color
:
'
#57617B
'
}
},
data
:
[
'
13:00
'
,
'
13:05
'
,
'
13:10
'
,
'
13:15
'
,
'
13:20
'
,
'
13:25
'
,
'
13:30
'
,
'
13:35
'
,
'
13:40
'
,
'
13:45
'
,
'
13:50
'
,
'
13:55
'
]
}],
yAxis
:
[{
type
:
'
value
'
,
name
:
'
单位(%)
'
,
axisTick
:
{
show
:
false
},
axisLine
:
{
lineStyle
:
{
color
:
'
#57617B
'
}
},
axisLabel
:
{
margin
:
10
,
textStyle
:
{
fontSize
:
14
}
},
splitLine
:
{
lineStyle
:
{
color
:
'
#57617B
'
}
areaStyle
:
{
normal
:
{
color
:
new
echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[{
offset
:
0
,
color
:
'
rgba(137, 189, 27, 0.3)
'
},
{
offset
:
0.8
,
color
:
'
rgba(137, 189, 27, 0)
'
}],
false
),
shadowColor
:
'
rgba(0, 0, 0, 0.1)
'
,
shadowBlur
:
10
}
}],
series
:
[{
name
:
'
移动
'
,
type
:
'
line
'
,
smooth
:
true
,
symbol
:
'
circle
'
,
symbolSize
:
5
,
showSymbol
:
false
,
lineStyle
:
{
normal
:
{
width
:
1
}
},
areaStyle
:
{
normal
:
{
color
:
new
echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[{
offset
:
0
,
color
:
'
rgba(137, 189, 27, 0.3)
'
},
{
offset
:
0.8
,
color
:
'
rgba(137, 189, 27, 0)
'
}],
false
),
shadowColor
:
'
rgba(0, 0, 0, 0.1)
'
,
shadowBlur
:
10
}
},
itemStyle
:
{
normal
:
{
color
:
'
rgb(137,189,27)
'
,
borderColor
:
'
rgba(137,189,2,0.27)
'
,
borderWidth
:
12
},
itemStyle
:
{
normal
:
{
color
:
'
rgb(137,189,27)
'
,
borderColor
:
'
rgba(137,189,2,0.27)
'
,
borderWidth
:
12
}
},
data
:
[
220
,
182
,
191
,
134
,
150
,
120
,
110
,
125
,
145
,
122
,
165
,
122
]
},
{
name
:
'
电信
'
,
type
:
'
line
'
,
smooth
:
true
,
symbol
:
'
circle
'
,
symbolSize
:
5
,
showSymbol
:
false
,
lineStyle
:
{
normal
:
{
width
:
1
}
},
areaStyle
:
{
normal
:
{
color
:
new
echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[{
offset
:
0
,
color
:
'
rgba(0, 136, 212, 0.3)
'
},
{
offset
:
0.8
,
color
:
'
rgba(0, 136, 212, 0)
'
}],
false
),
shadowColor
:
'
rgba(0, 0, 0, 0.1)
'
,
shadowBlur
:
10
}
},
itemStyle
:
{
normal
:
{
color
:
'
rgb(0,136,212)
'
,
borderColor
:
'
rgba(0,136,212,0.2)
'
,
borderWidth
:
12
}
},
data
:
[
220
,
182
,
191
,
134
,
150
,
120
,
110
,
125
,
145
,
122
,
165
,
122
]
},
{
name
:
'
电信
'
,
type
:
'
line
'
,
smooth
:
true
,
symbol
:
'
circle
'
,
symbolSize
:
5
,
showSymbol
:
false
,
lineStyle
:
{
normal
:
{
width
:
1
}
},
areaStyle
:
{
normal
:
{
color
:
new
echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[{
offset
:
0
,
color
:
'
rgba(0, 136, 212, 0.3)
'
},
{
offset
:
0.8
,
color
:
'
rgba(0, 136, 212, 0)
'
}],
false
),
shadowColor
:
'
rgba(0, 0, 0, 0.1)
'
,
shadowBlur
:
10
}
},
itemStyle
:
{
normal
:
{
color
:
'
rgb(0,136,212)
'
,
borderColor
:
'
rgba(0,136,212,0.2)
'
,
borderWidth
:
12
}
},
data
:
[
120
,
110
,
125
,
145
,
122
,
165
,
122
,
220
,
182
,
191
,
134
,
150
]
},
{
name
:
'
联通
'
,
type
:
'
line
'
,
smooth
:
true
,
symbol
:
'
circle
'
,
symbolSize
:
5
,
showSymbol
:
false
,
lineStyle
:
{
normal
:
{
width
:
1
}
},
areaStyle
:
{
normal
:
{
color
:
new
echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[{
offset
:
0
,
color
:
'
rgba(219, 50, 51, 0.3)
'
},
{
offset
:
0.8
,
color
:
'
rgba(219, 50, 51, 0)
'
}],
false
),
shadowColor
:
'
rgba(0, 0, 0, 0.1)
'
,
shadowBlur
:
10
}
},
itemStyle
:
{
normal
:
{
color
:
'
rgb(219,50,51)
'
,
borderColor
:
'
rgba(219,50,51,0.2)
'
,
borderWidth
:
12
}
},
data
:
[
220
,
182
,
125
,
145
,
122
,
191
,
134
,
150
,
120
,
110
,
165
,
122
]
}]
})
}
}
},
data
:
[
120
,
110
,
125
,
145
,
122
,
165
,
122
,
220
,
182
,
191
,
134
,
150
]
},
{
name
:
'
联通
'
,
type
:
'
line
'
,
smooth
:
true
,
symbol
:
'
circle
'
,
symbolSize
:
5
,
showSymbol
:
false
,
lineStyle
:
{
normal
:
{
width
:
1
}
},
areaStyle
:
{
normal
:
{
color
:
new
echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[{
offset
:
0
,
color
:
'
rgba(219, 50, 51, 0.3)
'
},
{
offset
:
0.8
,
color
:
'
rgba(219, 50, 51, 0)
'
}],
false
),
shadowColor
:
'
rgba(0, 0, 0, 0.1)
'
,
shadowBlur
:
10
}
},
itemStyle
:
{
normal
:
{
color
:
'
rgb(219,50,51)
'
,
borderColor
:
'
rgba(219,50,51,0.2)
'
,
borderWidth
:
12
}
},
data
:
[
220
,
182
,
125
,
145
,
122
,
191
,
134
,
150
,
120
,
110
,
165
,
122
]
}]
})
}
}
}
</
script
>
src/components/Charts/mixchart.vue
浏览文件 @
4b4bf494
...
...
@@ -2,264 +2,266 @@
<div
:class=
"className"
:id=
"id"
:style=
"
{height:height,width:width}">
</div>
</
template
>
<
script
>
// 引入 ECharts 主模块
const
echarts
=
require
(
'
echarts/lib/echarts
'
);
require
(
'
echarts/lib/chart/bar
'
);
require
(
'
echarts/lib/chart/line
'
);
// 引入提示框和标题组件
require
(
'
echarts/lib/component/tooltip
'
);
require
(
'
echarts/lib/component/title
'
);
require
(
'
echarts/lib/component/legend
'
);
require
(
'
echarts/lib/component/dataZoom
'
);
export
default
{
name
:
'
barPercent
'
,
props
:
{
className
:
{
type
:
String
,
default
:
'
chart
'
},
id
:
{
type
:
String
,
default
:
'
chart
'
},
width
:
{
type
:
String
,
default
:
'
200px
'
},
height
:
{
type
:
String
,
default
:
'
200px
'
}
import
echarts
from
'
echarts
'
;
export
default
{
props
:
{
className
:
{
type
:
String
,
default
:
'
chart
'
},
data
()
{
return
{};
id
:
{
type
:
String
,
default
:
'
chart
'
},
mounted
()
{
this
.
initChart
();
width
:
{
type
:
String
,
default
:
'
200px
'
},
methods
:
{
initChart
()
{
this
.
chart
=
echarts
.
init
(
document
.
getElementById
(
this
.
id
));
const
xData
=
(
function
()
{
const
data
=
[];
for
(
let
i
=
1
;
i
<
13
;
i
++
)
{
data
.
push
(
i
+
'
月份
'
);
height
:
{
type
:
String
,
default
:
'
200px
'
}
},
data
()
{
return
{
chart
:
null
};
},
mounted
()
{
this
.
initChart
();
this
.
chart
=
null
;
},
beforeDestroy
()
{
if
(
!
this
.
chart
)
{
return
}
this
.
chart
.
dispose
();
this
.
chart
=
null
;
},
methods
:
{
initChart
()
{
this
.
chart
=
echarts
.
init
(
document
.
getElementById
(
this
.
id
));
const
xData
=
(
function
()
{
const
data
=
[];
for
(
let
i
=
1
;
i
<
13
;
i
++
)
{
data
.
push
(
i
+
'
月份
'
);
}
return
data
;
}());
this
.
chart
.
setOption
({
backgroundColor
:
'
#344b58
'
,
title
:
{
text
:
'
统计
'
,
x
:
'
4%
'
,
textStyle
:
{
color
:
'
#fff
'
,
fontSize
:
'
22
'
},
subtextStyle
:
{
color
:
'
#90979c
'
,
fontSize
:
'
16
'
}
return
data
;
}());
this
.
chart
.
setOption
({
backgroundColor
:
'
#344b58
'
,
title
:
{
text
:
'
统计
'
,
x
:
'
4%
'
,
},
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
textStyle
:
{
color
:
'
#fff
'
,
fontSize
:
'
22
'
},
subtextStyle
:
{
color
:
'
#90979c
'
,
fontSize
:
'
16
'
color
:
'
#fff
'
}
}
},
grid
:
{
borderWidth
:
0
,
top
:
110
,
bottom
:
95
,
textStyle
:
{
color
:
'
#fff
'
}
},
legend
:
{
x
:
'
15%
'
,
top
:
'
10%
'
,
textStyle
:
{
color
:
'
#90979c
'
},
tooltip
:
{
trigger
:
'
axis
'
,
axisPointer
:
{
textStyle
:
{
color
:
'
#fff
'
}
data
:
[
'
女
'
,
'
男
'
,
'
平均
'
]
},
calculable
:
true
,
xAxis
:
[{
type
:
'
category
'
,
axisLine
:
{
lineStyle
:
{
color
:
'
#90979c
'
}
},
grid
:
{
borderWidth
:
0
,
top
:
110
,
bottom
:
95
,
textStyle
:
{
color
:
'
#fff
'
}
splitLine
:
{
show
:
false
},
legend
:
{
x
:
'
15%
'
,
top
:
'
10%
'
,
textStyle
:
{
color
:
'
#90979c
'
},
data
:
[
'
女
'
,
'
男
'
,
'
平均
'
]
axisTick
:
{
show
:
false
},
calculable
:
true
,
xAxis
:
[{
type
:
'
category
'
,
axisLine
:
{
lineStyle
:
{
color
:
'
#90979c
'
}
},
splitLine
:
{
show
:
false
},
axisTick
:
{
show
:
false
},
splitArea
:
{
show
:
false
},
axisLabel
:
{
interval
:
0
splitArea
:
{
show
:
false
},
axisLabel
:
{
interval
:
0
},
data
:
xData
}],
yAxis
:
[{
type
:
'
value
'
,
splitLine
:
{
show
:
false
},
axisLine
:
{
lineStyle
:
{
color
:
'
#90979c
'
}
},
axisTick
:
{
show
:
false
},
axisLabel
:
{
interval
:
0
},
splitArea
:
{
show
:
false
},
data
:
xData
}],
yAxis
:
[{
type
:
'
value
'
,
splitLine
:
{
show
:
false
},
axisLine
:
{
lineStyle
:
{
color
:
'
#90979c
'
}
}],
dataZoom
:
[{
show
:
true
,
height
:
30
,
xAxisIndex
:
[
0
],
bottom
:
30
,
start
:
10
,
end
:
80
,
handleIcon
:
'
path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z
'
,
handleSize
:
'
110%
'
,
handleStyle
:
{
color
:
'
#d3dee5
'
},
axisTick
:
{
show
:
false
},
axisLabel
:
{
interval
:
0
},
splitArea
:
{
show
:
false
}
}],
dataZoom
:
[{
show
:
true
,
height
:
30
,
xAxisIndex
:
[
0
],
bottom
:
30
,
start
:
10
,
end
:
80
,
handleIcon
:
'
path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z
'
,
handleSize
:
'
110%
'
,
handleStyle
:
{
color
:
'
#d3dee5
'
},
textStyle
:
{
color
:
'
#fff
'
},
borderColor
:
'
#90979c
'
},
textStyle
:
{
color
:
'
#fff
'
},
borderColor
:
'
#90979c
'
},
{
type
:
'
inside
'
,
show
:
true
,
height
:
15
,
start
:
1
,
end
:
35
}],
series
:
[{
name
:
'
女
'
,
type
:
'
bar
'
,
stack
:
'
总量
'
,
barMaxWidth
:
35
,
barGap
:
'
10%
'
,
itemStyle
:
{
normal
:
{
color
:
'
rgba(255,144,128,1)
'
,
label
:
{
show
:
true
,
textStyle
:
{
color
:
'
#fff
'
},
position
:
'
insideTop
'
,
formatter
(
p
)
{
return
p
.
value
>
0
?
p
.
value
:
''
;
}
},
{
type
:
'
inside
'
,
show
:
true
,
height
:
15
,
start
:
1
,
end
:
35
}],
series
:
[{
name
:
'
女
'
,
type
:
'
bar
'
,
stack
:
'
总量
'
,
barMaxWidth
:
35
,
barGap
:
'
10%
'
,
itemStyle
:
{
normal
:
{
color
:
'
rgba(255,144,128,1)
'
,
label
:
{
show
:
true
,
textStyle
:
{
color
:
'
#fff
'
},
position
:
'
insideTop
'
,
formatter
(
p
)
{
return
p
.
value
>
0
?
p
.
value
:
''
;
}
}
},
data
:
[
709
,
1917
,
2455
,
2610
,
1719
,
1433
,
1544
,
3285
,
5208
,
3372
,
2484
,
4078
]
}
},
data
:
[
709
,
1917
,
2455
,
2610
,
1719
,
1433
,
1544
,
3285
,
5208
,
3372
,
2484
,
4078
]
},
{
name
:
'
男
'
,
type
:
'
bar
'
,
stack
:
'
总量
'
,
itemStyle
:
{
normal
:
{
color
:
'
rgba(0,191,183,1)
'
,
barBorderRadius
:
0
,
label
:
{
show
:
true
,
position
:
'
top
'
,
formatter
(
p
)
{
return
p
.
value
>
0
?
p
.
value
:
''
;
}
{
name
:
'
男
'
,
type
:
'
bar
'
,
stack
:
'
总量
'
,
itemStyle
:
{
normal
:
{
color
:
'
rgba(0,191,183,1)
'
,
barBorderRadius
:
0
,
label
:
{
show
:
true
,
position
:
'
top
'
,
formatter
(
p
)
{
return
p
.
value
>
0
?
p
.
value
:
''
;
}
}
}
,
data
:
[
327
,
1776
,
507
,
1200
,
8
00
,
482
,
204
,
1390
,
1001
,
95
1
,
38
1
,
220
]
},
{
name
:
'
平均
'
,
type
:
'
line
'
,
stack
:
'
总量
'
,
symbolSize
:
10
,
symbol
:
'
circle
'
,
itemStyle
:
{
normal
:
{
color
:
'
rgba(252,230,48,1)
'
,
barBorderRadius
:
0
,
label
:
{
show
:
true
,
position
:
'
top
'
,
formatter
(
p
)
{
return
p
.
value
>
0
?
p
.
value
:
''
;
}
}
},
data
:
[
327
,
1776
,
507
,
12
00
,
800
,
482
,
204
,
1390
,
100
1
,
95
1
,
381
,
220
]
},
{
name
:
'
平均
'
,
type
:
'
line
'
,
stack
:
'
总量
'
,
symbolSize
:
10
,
symbol
:
'
circle
'
,
itemStyle
:
{
normal
:
{
color
:
'
rgba(252,230,48,1)
'
,
barBorderRadius
:
0
,
label
:
{
show
:
true
,
position
:
'
top
'
,
formatter
(
p
)
{
return
p
.
value
>
0
?
p
.
value
:
''
;
}
}
},
data
:
[
1036
,
3693
,
2962
,
3810
,
2519
,
1915
,
1748
,
4675
,
6209
,
4323
,
2865
,
4298
]
}
}
},
data
:
[
1036
,
3693
,
2962
,
3810
,
2519
,
1915
,
1748
,
4675
,
6209
,
4323
,
2865
,
4298
]
})
}
}
]
})
}
}
}
</
script
>
src/views/charts/keyboard.vue
浏览文件 @
4b4bf494
<
template
>
<div
class=
"components-container"
style=
'height:100vh'
>
<div
class=
'chart-container'
>
<keyboard
Chart
height=
'100%'
width=
'100%'
/
>
<keyboard
-chart
height=
'100%'
width=
'100%'
></keyboard-chart
>
</div>
</div>
</
template
>
...
...
src/views/charts/keyboard2.vue
浏览文件 @
4b4bf494
<
template
>
<div
class=
"components-container"
style=
'height:100vh'
>
<div
class=
'chart-container'
>
<keyboard
Chart2
id=
'apple'
height=
'100%'
width=
'100%'
/
>
<keyboard
-chart2
id=
'apple'
height=
'100%'
width=
'100%'
></keyboard-chart2
>
</div>
</div>
</
template
>
...
...
src/views/charts/line.vue
浏览文件 @
4b4bf494
<
template
>
<div
class=
"components-container"
style=
'height:100vh'
>
<div
class=
'chart-container'
>
<line
Marker
height=
'100%'
width=
'100%'
/
>
<line
-marker
height=
'100%'
width=
'100%'
></line-marker
>
</div>
</div>
</
template
>
...
...
src/views/charts/mixchart.vue
浏览文件 @
4b4bf494
<
template
>
<div
class=
"components-container"
style=
'height:100vh'
>
<div
class=
'chart-container'
>
<mix
chart
id=
'apple'
height=
'100%'
width=
'100%'
/
>
<mix
-chart
id=
'apple'
height=
'100%'
width=
'100%'
></mix-chart
>
</div>
</div>
</
template
>
<
script
>
import
mix
chart
from
'
components/Charts/mixc
hart
'
;
import
mix
Chart
from
'
components/Charts/mixC
hart
'
;
export
default
{
components
:
{
mix
c
hart
}
components
:
{
mix
C
hart
}
};
</
script
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录