ECharts中国地图可视化代码 - javascript代码模
2017-09-28 本文已影响0人
teaGod
需要用到的 js 文件:
china.js , echarts.min.js , jquery-*.min.js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<base href="<%=basePath%>">
<title>Funds investment intensity(map)</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<h1>The map presentation</h1>
<div id="main" style="width: 1600px; height: 900px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
option = {
title : {
text : 'Research and development funds investment intensity test',
left : 'center'
},
tooltip : {
trigger : 'item'
},
legend : {
orient : 'vertical',
left : 'left',
data : [ '2012' ]
},
visualMap : {
min : 0,
max : 6,
left : 'left',
top : 'bottom',
text : [ 'high', 'low' ],
calculable : true
},
toolbox : {
show : true,
orient : 'vertical',
left : 'right',
top : 'center',
feature : {
dataView : {
readOnly : false
},
restore : {},
saveAsImage : {}
}
},
series : [ {
name : '2012',
type : 'map',
mapType : 'china',
roam : false,
label : {
normal : {
show : true
},
emphasis : {
show : true
}
},
data : []
}, ]
};
myChart.setOption(option);
var info = {
"opt" : "map"
};
//jquery加载数据
$.post("./GetMapData", function(datas) {
var e = eval(datas);
myChart.setOption({
series : [ {
data : e
} ]
})
});
</script>