-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path箱线图2.html
142 lines (135 loc) · 5.32 KB
/
箱线图2.html
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom,null, {renderer: 'svg'});
var color = ['#2f4554','#c23531','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#4d638c','#e9bba9','#7abed1','#b86c99','‘#ffc300']
var app = {};
option = null;
var fontSize = 20
var title = {
text: '原创微博分布情况', //名字
left: 'center', //居中
// top:150,
textStyle: {
fontSize: fontSize
}
}
// 数据：list of list, 每一个list是一组数据
var data = echarts.dataTool.prepareBoxplotData([
[438067, 131641, 6000000, 78814, 53138, 1308337, 73154, 251524, 860447, 37718, 12905, 938832, 229, 500, 71452, 30952, 1343320, 350178, 564853, 112623, 6325, 1654956, 733224, 139605],
[192, 384206, 59345, 675978],
[137167, 232868, 453825, 44584, 154774, 37218, 1042844, 6000000],
[3183499, 21748, 4303791, 3183499, 643576, 152557, 295620, 203909, 238303, 508639, 1120, 1031300]
]);
option = {
toolbox: {
feature: {
saveAsImage: {}
}
},
// title: title,
textStyle: {
fontSize: fontSize
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: data.axisData,
boundaryGap: true,
nameGap: 30,
splitArea: {
show: false
},
axisLabel: {
fontSize: fontSize,
// rotate:40,
// margin:17,
formatter: function (value, index) {
// 格式化成月/日，只在第一个刻度显示年份
if(index === 0){
return '时序类别一'
}
if(index === 1){
return '时序类别二'
}
if(index === 2){
return '时序类别三'
}
if(index === 3){
return '时序类别四'
}
} //自定义X轴坐标format
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
name: '粉丝数', //y轴标签
splitArea: {
show: true
},
axisLabel: {
fontSize: fontSize,
},
},
series: [
{
name: 'boxplot',
type: 'boxplot',
data: data.boxData,
// itemStyle:{
// borderColor: "#000" //箱线图颜色
// },
tooltip: {
formatter: function (param) { //tooltip 格式
return [
'Experiment ' + param.name + ': ',
'upper: ' + param.data[5],
'Q3: ' + param.data[4],
'median: ' + param.data[3],
'Q1: ' + param.data[2],
'lower: ' + param.data[1]
].join('<br/>');
}
}
},
{
name: 'outlier',
type: 'scatter',
data: data.outliers
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>