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
| const rankChart = echarts.init(document.getElementById("rankChart"), "shine");
const rankChartOpt = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter: function(params) {
const param = params[0];
const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#e6b600;"></span>';
const suffix = '<span style="margin-left:5px;font-size:12px;">亿元</span>';
return param.name + "<br />" +
marker + "排名：" + (param.dataIndex+1) + "<br />" +
marker + "市价总值：" + param.value + suffix;
}
},
grid: {
top: 10,
bottom: 10,
left: 60
},
xAxis: {
show: false,
type: "value"
},
yAxis: {
type: "category",
inverse: true,
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {
fontSize: 12,
color: "#b0c2f9"
}
},
series: [{
name: "市价总值排行",
type: "bar",
barCategoryGap: "60%",
label: {
show: true,
position: "right",
fontSize: 12,
color: "#188df0",
emphasis: {
color: "#e6b600"
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 1, 1, 1,
[
{offset: 0, color: '#b0c2f9'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#185bff'}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 1, 1, 1,
[
{offset: 0, color: '#b0c2f9'},
{offset: 0.7, color: '#e6b600'},
{offset: 1, color: '#ceac09'}
]
)
}
}
}]
};
rankChart.setOption(rankChartOpt);
$.ajax({
url: "data/ranking-list.json",
dataType: "json"
}).done(function() {
$("#rankChart").addClass("chart-done");
}).done(function(data) {
const xData = [];
const yData = [];
for(let i in data) {
xData.push(data[i].market_capitalization);
yData.push(data[i].stock_name);
}
rankChart.setOption({
yAxis: {
data: yData
},
series: [{
name: "市价总值排行",
data: xData
}]
});
}).fail(function(jqXHR) {
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
});
|
微信
