Web 插件 之 ECharts 实现中国地图数据的简单展示实现
目录
Web 插件 之 ECharts 实现中国地图数据的简单展示实现
一、简单介绍
Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。
本节介绍，Web 开发 中 ECharts 进行数据动态排序柱状图可视化图表使用方法，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
ECharts 官网：Apache ECharts
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
ECharts 遵循 Apache-2.0 开源协议，免费商用。
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。
二、实现原理
1、下载需要的 ECharts.js 和 china.js
Echarts github 地址：https://github.com/apache/echarts
ECharts.js 各个版本下载地址：echarts/dist at master · apache/echarts · GitHub
china.js 下载地址：https://github.com/apache/echarts/tree/master/test/data/map/js
2、根据步骤引入 js，设置 Dom、option 、echarts.init 和 myChart.setOption
具体可参考：Web 插件 之 ECharts 可视化图表库简单介绍和使用_仙魁XAN-CSDN博客
三、注意事项
1、一些参数的简单说明
tooltip：定制信息提示框的内容，其中params参数表示数据
visualMap：图注样式定制，其中包括color范围，文字提示
geo:定义地图为china，其中可能大概率要用的一个配置zoom: 视角缩放比例，roam：是否开启缩放和平移
itemStyle：地图外观定制，其中normal表示正常显示的样式，emphasis表示鼠标悬浮下样式
series：整体配置 其中type很关键 表示该例是地图，data:图表所用数据，实际项目中大家可以通过http获取数据，再赋值给data
2、数据格式
为了演示效果，随机给定的value值，randomValue为我自己定义的一个获取随机数函数
3、自定义事件
myChart.on('click', function (params) {
alert(params.name+':'+params.seriesName+':'+params.value);
});四、预览效果
五、实现步骤
1、Eclipse 新建一个 web 工程，工程引入 echarts.js 和 china.js
2、添加一个 html ，添加对应数据和事件，实现地图绘制
3、运行服务器，输入对应网址，地图效果如下
六、关键代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts Test China Data</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script type="text/javascript" src="./js/echarts.js"></script>
<!-- 引入刚刚下载的 china 文件 -->
<script type="text/javascript" src="./js/china.js"></script>
<!-- 设置样式 -->
<style>
*{margin:0;padding:0}
html,body{
width:100%;
height:100%;
}
#main{
width:600px;
height:450px;
margin: 150px auto;
border:1px solid #ddd;
}
</style>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" ></div>
<script type="text/javascript">
var dataList=[
{name:"南海诸岛",value:0},
{name: '北京', value: randomValue()},
{name: '天津', value: randomValue()},
{name: '上海', value: randomValue()},
{name: '重庆', value: randomValue()},
{name: '河北', value: randomValue()},
{name: '河南', value: randomValue()},
{name: '云南', value: randomValue()},
{name: '辽宁', value: randomValue()},
{name: '黑龙江', value: randomValue()},
{name: '湖南', value: randomValue()},
{name: '安徽', value: randomValue()},
{name: '山东', value: randomValue()},
{name: '新疆', value: randomValue()},
{name: '江苏', value: randomValue()},
{name: '浙江', value: randomValue()},
{name: '江西', value: randomValue()},
{name: '湖北', value: randomValue()},
{name: '广西', value: randomValue()},
{name: '甘肃', value: randomValue()},
{name: '山西', value: randomValue()},
{name: '内蒙古', value: randomValue()},
{name: '陕西', value: randomValue()},
{name: '吉林', value: randomValue()},
{name: '福建', value: randomValue()},
{name: '贵州', value: randomValue()},
{name: '广东', value: randomValue()},
{name: '青海', value: randomValue()},
{name: '西藏', value: randomValue()},
{name: '四川', value: randomValue()},
{name: '宁夏', value: randomValue()},
{name: '海南', value: randomValue()},
{name: '台湾', value: randomValue()},
{name: '香港', value: randomValue()},
{name: '澳门', value: randomValue()}
]
// 随机函数
function randomValue() {
return Math.round(Math.random()*1000);
}
var option = {
tooltip: {
formatter:function(params,ticket, callback){
return params.seriesName+'<br />'+params.name+'：'+params.value
}//数据格式化
},
visualMap: {
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
text: ['高','低'],//取值范围的文字
inRange: {
color: ['#e0ff00', '#006e00']//取值范围的颜色
},
show:true//图注
},
geo: {
map: 'china',
roam: false,//不开启缩放和平移
zoom:1.23,//视角缩放比例
label: {
normal: {
show: true,
fontSize:'10',
color: 'rgba(0,0,0,0.7)'
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis:{
areaColor: '#F3B329',//鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
name: '信息量',
type: 'map',
geoIndex: 0,
data:dataList
}
]
};
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 点击事件
myChart.on('click', function (params) {
alert(params.name+':'+params.seriesName+':'+params.value);
});
</script>
</body>
</html>