首先我的代码是:
<body>
<!--文件引入 -->
<script type="text/javascript"src="${pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>/*原来引入jar
<script type="text/javascript"src="${pageContext.request.contextPath }/js/china.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath }/js/echarts.js"></script>*/后来引用网上jar(需有网)
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
//地图显示区域
<div id="main" style="width: 500px;height:500px;"></div>
//官网demo:http://echarts.baidu.com/blog/2016/04/28/echarts-map-tutorial.html
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var chart = echarts.init(document.getElementById('main'));
option = {
tooltip : {
trigger : "item",
formatter : "{b}"
},
series : [ {
name : "中国",
type : "map",
mapType : "china",
selectedMode : "multiple",
label : {
normal : {
show : true
},
emphasis : {
show : true
}
},
data : [ {
name : '广东',
selected : true
} ]
} ]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
</script>
</body>
主要原因是因为js文件的问题,只要引用echarts.min.js文件就可以了。