先上图
引用外部json数据
{
"lane": [
"左车道(六合)",
"右车道(六合)",
"左车道(栖霞)",
"右车道(栖霞)"
],
"timeline": [
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31,
32,
33,
34,
35,
36
],
"series": [
[
[
17.3,
72.5,
351011,
"左车道(六合)",
21
],
[
15.3,
92.5,
35101,
"右车道(六合)",
21
],
[
5.3,
72.5,
785101,
"左车道(栖霞)",
21
],
[
15.3,
79.5,
45101,
"右车道(栖霞)",
21
]
],
[
[
22.3,
78.5,
135101,
"左车道(六合)",
22
],
[
11.3,
117.5,
345101,
"右车道(六合)",
22
],
[
21.3,
69.5,
78511,
"左车道(栖霞)",
22
],
[
25.3,
104.5,
415101,
"右车道(栖霞)",
22
]
],
[
[
17.3,
92.5,
351010,
"左车道(六合)",
23
],
[
25.3,
79.5,
45101,
"右车道(六合)",
23
],
[
11.3,
103.5,
775101,
"左车道(栖霞)",
23
],
[
11.3,
82.5,
45701,
"右车道(栖霞)",
23
]
],
[
[
7.3,
62.5,
351010,
"左车道(六合)",
24
],
[
75.3,
92.5,
345101,
"右车道(六合)",
24
],
[
7.3,
102.5,
7875101,
"左车道(栖霞)",
24
],
[
75.3,
62.5,
451010,
"右车道(栖霞)",
24
]
],
[
[
17.3,
72.5,
351011,
"左车道(六合)",
25
],
[
15.3,
92.5,
35101,
"右车道(六合)",
25
],
[
5.3,
72.5,
785101,
"左车道(栖霞)",
25
],
[
15.3,
79.5,
45101,
"右车道(栖霞)",
25
]
],
[
[
22.3,
78.5,
135101,
"左车道(六合)",
26
],
[
11.3,
117.5,
345101,
"右车道(六合)",
26
],
[
21.3,
69.5,
78511,
"左车道(栖霞)",
26
],
[
25.3,
104.5,
415101,
"右车道(栖霞)",
26
]
],
[
[
17.3,
92.5,
351010,
"左车道(六合)",
27
],
[
25.3,
79.5,
45101,
"右车道(六合)",
27
],
[
11.3,
103.5,
775101,
"左车道(栖霞)",
27
],
[
11.3,
82.5,
45701,
"右车道(栖霞)",
27
]
],
[
[
7.3,
62.5,
351010,
"左车道(六合)",
28
],
[
75.3,
92.5,
345101,
"右车道(六合)",
28
],
[
7.3,
102.5,
7875101,
"左车道(栖霞)",
28
],
[
75.3,
62.5,
451010,
"右车道(栖霞)",
28
]
],
[
[
17.3,
72.5,
351011,
"左车道(六合)",
29
],
[
15.3,
92.5,
35101,
"右车道(六合)",
29
],
[
5.3,
72.5,
785101,
"左车道(栖霞)",
29
],
[
15.3,
79.5,
45101,
"右车道(栖霞)",
29
]
],
[
[
22.3,
78.5,
135101,
"左车道(六合)",
30
],
[
11.3,
117.5,
345101,
"右车道(六合)",
30
],
[
21.3,
69.5,
78511,
"左车道(栖霞)",
30
],
[
25.3,
104.5,
415101,
"右车道(栖霞)",
30
]
],
[
[
17.3,
92.5,
351010,
"左车道(六合)",
31
],
[
25.3,
79.5,
45101,
"右车道(六合)",
31
],
[
11.3,
103.5,
775101,
"左车道(栖霞)",
31
],
[
11.3,
82.5,
45701,
"右车道(栖霞)",
31
]
],
[
[
7.3,
62.5,
351010,
"左车道(六合)",
32
],
[
75.3,
92.5,
345101,
"右车道(六合)",
32
],
[
7.3,
102.5,
7875101,
"左车道(栖霞)",
32
],
[
75.3,
62.5,
451010,
"右车道(栖霞)",
32
]
], [
[
17.3,
72.5,
351011,
"左车道(六合)",
33
],
[
15.3,
92.5,
35101,
"右车道(六合)",
33
],
[
5.3,
72.5,
785101,
"左车道(栖霞)",
33
],
[
15.3,
79.5,
45101,
"右车道(栖霞)",
33
]
],
[
[
22.3,
78.5,
135101,
"左车道(六合)",
34
],
[
11.3,
117.5,
345101,
"右车道(六合)",
34
],
[
21.3,
69.5,
78511,
"左车道(栖霞)",
34
],
[
25.3,
104.5,
415101,
"右车道(栖霞)",
34
]
],
[
[
17.3,
92.5,
351010,
"左车道(六合)",
35
],
[
25.3,
79.5,
45101,
"右车道(六合)",
35
],
[
121.3,
103.5,
775101,
"左车道(栖霞)",
35
],
[
111.3,
82.5,
45701,
"右车道(栖霞)",
35
]
],
[
[
17.3,
162.5,
351010,
"左车道(六合)",
36
],
[
75.3,
192.5,
345101,
"右车道(六合)",
36
],
[
17.3,
102.5,
7875101,
"左车道(栖霞)",
36
],
[
75.3,
62.5,
451010,
"右车道(栖霞)",
36
]
]
]
}echarts的散点图配置
<!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="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/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="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
$.get( './data.json', function (data) {
myChart.hideLoading();
var itemStyle = {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgb(240, 248, 255)'
}
};
var sizeFunction = function (x) {
var y = Math.sqrt(x / 5e5) + 0.1;
return y * 80;
};
var itemStyle = {
normal: {
opacity: 0.9,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
};
var sizeFunction = function(x) {
var y = Math.sqrt(x / 5e5) + 0.1;
return y * 80;
};
// Schema:
var schema = [
{ name: "speed", index: 0, text: "平均车重", unit: "t" },
{ name: "load", index: 1, text: " 平均车速", unit: " km/h" },
{ name: "car", index: 2, text: "车辆数目", unit: "" },
{ name: "lane", index: 3, text: "车道", unit: "" }
];
option = {
baseOption: {
timeline: {
axisType: "category",
orient: "vertical",
autoPlay: true,
inverse: true,
playInterval: 1000,
left: null,
right: 0,
top: 20,
bottom: 20,
width: 55,
height: null,
label: {
normal: {
textStyle: {
color: "#999"
}
},
emphasis: {
textStyle: {
color: "#fff"
}
}
},
symbol: "none",
lineStyle: {
color: "#555"
},
checkpointStyle: {
color: "#bbb",
borderColor: "#777",
borderWidth: 2
},
controlStyle: {
showNextBtn: false,
showPrevBtn: false,
normal: {
color: "#666",
borderColor: "#666"
},
emphasis: {
color: "#aaa",
borderColor: "#aaa"
}
},
data: []
},
backgroundColor: "#404a59",
title: [
{
text: data.timeline[0],
textAlign: "center",
left: "63%",
top: "55%",
textStyle: {
fontSize: 100,
color: "rgba(255, 255, 255, 0.7)"
}
},
{
text: "各车道平均车速与平均车重发展历程",
left: "center",
top: 10,
textStyle: {
color: "#aaa",
fontWeight: "normal",
fontSize: 20
}
}
],
tooltip: {
padding: 5,
backgroundColor: "#222",
borderColor: "#777",
borderWidth: 1,
formatter: function(obj) {
var value = obj.value;
return (
schema[3].text +
"：" +
value[3] +
"<br>" +
schema[1].text +
"：" +
value[1] +
schema[1].unit +
"<br>" +
schema[0].text +
"：" +
value[0] +
schema[0].unit +
"<br>" +
schema[2].text +
"：" +
value[2] +
"<br>"
);
}
},
grid: {
top: 100,
containLabel: true,
left: 30,
right: "110"
},
backgroundColor:"rgba(240, 248, 255, 1)",
xAxis: {
type: "log",
name: "平均车重",
max: 120,
// min: 0,
nameGap: 25,
nameLocation: "middle",
nameTextStyle: {
fontSize: 18
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: "#ccc"
}
},
axisLabel: {
formatter: "{value} t"
}
},
yAxis: {
type: "value",
name: "平均车速",
max: 150,
nameTextStyle: {
color: "#ccc",
fontSize: 18
},
axisLine: {
lineStyle: {
color: "#ccc"
}
},
splitLine: {
show: false
},
axisLabel: {
formatter: "{value} km/h"
}
},
// color:['cyan','red','yellow','pink'],
visualMap: [
{
show: false,
dimension: 3,
categories: data.lane,
calculable: true,
precision: 0.1,
textGap: 30,
textStyle: {
color: "#rgba(240, 248, 255, 1)"
},
inRange: {
color: (function() {
var colors = [
"#9c27b0",
"#3f51b5",
"#8bc34a",
"#f44336",
"#00bcd4",
"#ffeb3b",
"#795548",
"#2196f3"
];
return colors.concat(colors);
})()
}
}
],
series: [
{
type: "scatter",
itemStyle: itemStyle,
data: data.series[0],
symbolSize: function(val) {
return sizeFunction(val[2]);
}
}
],
animationDurationUpdate: 1000,
animationEasingUpdate: "quinticInOut"
},
options: []
};
for (var n = 0; n < data.timeline.length; n++) {
option.baseOption.timeline.data.push(data.timeline[n]);
option.options.push({
title: {
show: true,
text: data.timeline[n] + ""
},
series: {
name: data.timeline[n],
type: "scatter",
itemStyle: itemStyle,
data: data.series[n],
symbolSize: function(val) {
return sizeFunction(val[2]);
}
}
});
}
myChart.setOption(option);
},"json");;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>