应用场景:可视化报表统计
1、引入echart.js(可以去官方下载)
2、js代码写入
category 代表分类(日期)以数组的形式传入
price 代表价格 以数组的形式传入
num 代表单量 数组的形式传入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
// 基于准备好的dom,初始化echarts图表
function
chart(category,price,num){
var
myChart = echarts.init(document.getElementById(
'main'
));
var
option = {
title : {
text:
'交易数据'
,
},
tooltip : {
trigger:
'axis'
,
},
legend: {
data:[
'价格'
,
'单量'
]
},
toolbox: {
show :
true
,
feature : {
magicType : {show:
true
, type: [
'line'
,
'bar'
]},
dataView : {show:
true
, readOnly:
false
},
restore : {show:
true
},
saveAsImage : {show:
true
},
}
},
calculable :
false
,
xAxis : [
{
type :
'category'
,
data : category,
splitLine:{show:
false
}
}
],
yAxis : [
{
type :
'value'
}
],
series : [
{
name:
'价格'
,
type:
'bar'
,
itemStyle: {
normal: {
color:
'#b294d2'
,
barBorderRadius:[5, 5, 0, 0]
}
},
data:price,
},
{
name:
'单量'
,
type:
'bar'
,
itemStyle: {
normal: {
color:
'#7ac9ea'
,
barBorderRadius:[5, 5, 0, 0]
}
},
data:num,
}
]
};
myChart.setOption(option);
}
|
3、如果分类的数据比较多的话建议加横向滚动条
1
2
3
4
5
6
7
8
9
10
|
dataZoom: {
orient:
"horizontal"
,
//水平显示
show:
true
,
//显示滚动条
start:0,
//起始值为0%
end:100 ,
//结束值为40%
height:30,
backgroundColor:
'rgba(188,188,188,0.3)'
,
dataBackgroundColor:
'rgba(0,138,205,0.5)'
,
fillerColor:
'rgba(94,135,176,0.5)'
,
},
|
4、效果展示:
本文转自 xinsir999 51CTO博客,原文链接:http://blog.51cto.com/xinsir/1930581,如需转载请自行联系原作者