Echarts，一个效果非常棒的可视化库，可以生产各种图表，动态展示，附上官方网址：http://www.echartsjs.com/index.html
之前带本科实习时有同学用过，狗哥的博客也用这个展示他的旅游足迹，所以在这次山西项目里我也拿来试了一下。类似于echarts这种库，最好的学习方法就是按照官网的demo来做，所以我先找了一个符合我要求的demo将其实现，然后再分别掌握其中的重要属性，最后按照自己的需求进行改动。
一、地图展示
我看的主要是以下两种：都在series里，位置在侧栏标出来了
加2643804531乐乐老师为好友，她会发以往资料给您，及时发课题给您哦
611481448，这是我们的群号，如果您有什么问题可以在群内咨询
二、属性设置
属性是以键值对的形式调用的，大部分都很简单，和样式有关，一看就知道是干什么的，需要重点关注的是以下几个：
tooltip：浮动提示框组件
legend：图例
series：系列列表，每个系列通过type决定自己的图表类型
其中，series里的label和tooltrip中都含有formatter属性，这两个是调整地图所展示的点信息的关键，一定要理清楚formatter属性中的参数含义 ，具体参见官方文档的详细介绍。注意分清 系列名 / 数据名 / 数据值 这三者对应的内容
这是我调整之后的效果：左边是label，右边是tooltip，其他的内容写在代码的注释里了，可以往下看
有不会的一定记得查阅官方文档，里面有不同属性非常详细的介绍
内容我已经上传到github了，欢迎大家查看和下载，觉得不错的话可以关注我~
地址：https://github.com/santana2000/sxWebGIS/tree/master/poi
三、代码实现
varmyChart = echarts.init(document.getElementById('sxmap'));// 注意引入版本// 注意不同版本使用差别vardata = [//元素为对象的数组{name: '长治', value: 41},
{name: '大同', value: 58},
{name: '临汾', value: 47},
{name: '太原', value: 39},
{name: '阳泉', value: 31},
{name: '晋城', value: 70},
{name: '平遥', value: 20},
{name: '吕梁', value: 10},
];vargeoCoordMap = {//对象'阳泉':[113.57,37.85],
'大同':[113.3,40.12],
'长治':[113.08,36.18],
'临汾':[111.5,36.08],
'太原':[112.53,37.87],
'晋城':[112.43,36.87],
'平遥':[112.03,37.37],
'吕梁':[112.53,37.37],
}varconvertData =function (data) {
varres = [];
for(vari = 0; i < data.length; i++) {
vargeoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value) //新值= 坐标+旧值； });
}
}
returnres;// [113.57, 37.85, 31]};
option = {
backgroundColor: '#404a59',
title: {
text: '矿山灾害点危险性展示',
left: 'center',
textStyle: {
color: '#fff',
fontSize:25 }
},
tooltip: { //提示框组件trigger: 'item',
formatter:'{b}
',//{c@[2]}show:false },
legend: { //图例orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['危害性'],
textStyle: {
color: '#fff' }
},
geo: {
map: "china",
label: {
emphasis: {
show: false }
},
roam: true,
center:[112.38,37.67],
zoom:7,
itemStyle: {
normal: {
areaColor: "#323c48",
borderColor: "#000000" },
emphasis: {
areaColor: "#2a333d" }
}
},
series: [{
name: '危险指数：',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
returnb.value - a.value;
}).slice(0, 8)),//选取从 start 到数组结尾的所有元素，该方法并不会修改数组，而是返回一个子数组symbolSize:function (val) {
returnval[2] / 2;//res数组中的第三个元素 },
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke' },
hoverAnimation: true,
label: {
normal: {
formatter: '{b}:{@2}',
position: 'right',
show: false },
emphasis: {
show: true }
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333' }
},
zlevel: 1 }
]
};
myChart.setOption(option);/*a(); 执行一次绘制地图
$(window).resize(function() { 窗口缩放一次
map.resize(); 地图画布缩放一次
a() 地图再绘制一次
*/
最后说两个要注意的点：
1. 看清楚当前的版本，现在更新到了4.x，有一些属性在之前的版本上做了改动
2. 引用时注意版本，可以看到bootcdn里可选的很多，自己测试时建议选完整版的
网友评论