Echarts, 一个效果非常棒的可视化库, 可以生产各种图表, 动态展示, 附上官方网址: http://www.echartsjs.com/index.html
之前带本科实习时有同学用过, 狗哥的博客也用这个展示他的旅游足迹, 所以在这次山西项目里我也拿来试了一下. 类似于 echarts 这种库, 最好的学习方法就是按照官网的 demo 来做, 所以我先找了一个符合我要求的 demo 将其实现, 然后再分别掌握其中的重要属性, 最后按照自己的需求进行改动.
一, 地图展示
我看的主要是以下两种: 都在 series 里, 位置在侧栏标出来了
二, 属性设置
属性是以键值对的形式调用的, 大部分都很简单, 和样式有关, 一看就知道是干什么的, 需要重点关注的是以下几个:
tooltip: 浮动提示框组件
legend: 图例
series: 系列列表, 每个系列通过 type 决定自己的图表类型
其中, series 里的 label 和 tooltrip 中都含有 formatter 属性, 这两个是调整地图所展示的点信息的关键, 一定要理清楚 formatter 属性中的参数含义 , 具体参见官方文档的详细介绍. 注意分清 系列名 / 数据名 / 数据值 这三者对应的内容
这是我调整之后的效果: 左边是 label, 右边是 tooltip, 其他的内容写在代码的注释里了, 可以往下看
有不会的一定记得查阅官方文档, 里面有不同属性非常详细的介绍
内容我已经上传到 GitHub 了, 欢迎大家查看和下载, 觉得不错的话可以关注我~
地址: https://github.com/santana2000/sxwebGIS/tree/master/poi
三, 代码实现
- var myChart = echarts.init(document.getElementById('sxmap'));
- // 注意引入版本
- // 注意不同版本使用差别
- var data = [ // 元素为对象的数组
- {name: '长治', value: 41},
- {name: '大同', value: 58},
- {name: '临汾', value: 47},
- {name: '太原', value: 39},
- {name: '阳泉', value: 31},
- {name: '晋城', value: 70},
- {name: '平遥', value: 20},
- {name: '吕梁', value: 10},
- ];
- var geoCoordMap = { // 对象
- '阳泉':[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],
- }
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i <data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value) // 新值 = 坐标 + 旧值;
- });
- }
- }
- return res; // [113.57, 37.85, 31]
- };
- option = {
- backgroundColor: '#404a59',
- title: {
- text: '矿山灾害点危险性展示',
- left: 'center',
- textStyle: {
- color: '#fff',
- fontSize:25
- }
- },
- tooltip: { // 提示框组件
- trigger: 'item',
- formatter:'{b} <br/>', //{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) {
- return b.value - a.value;
- }).slice(0, 8)), // 选取从 start 到数组结尾的所有元素, 该方法并不会修改数组, 而是返回一个子数组
- symbolSize: function (val) {
- return val[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(); 执行一次绘制地图
- $(Windows).resize(function() { 窗口缩放一次
- map.resize(); 地图画布缩放一次
- a() 地图再绘制一次
- */
最后说两个要注意的点:
1. 看清楚当前的版本, 现在更新到了 4.x, 有一些属性在之前的版本上做了改动
2. 引用时注意版本, 可以看到 bootcdn 里可选的很多, 自己测试时建议选完整版的
来源: https://www.cnblogs.com/sleeping-dog/p/10060487.html