您现在的位置是:网站首页> 内容页

Echarts地图展示及属性分析

  • 辉煌第一站137官方网站
  • 2019-03-07
  • 203人已阅读
简介Echarts,一个效果非常棒的可视化库,可以生产各种图表,动态展示,附上官方网址:http://www.echartsjs.com/index.html之前带本科实习时有同学用过,狗

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(); 执行一次绘制地图$(window).resize(function() { 窗口缩放一次 map.resize(); 地图画布缩放一次 a() 地图再绘制一次 */

 

最后说两个要注意的点:

 1. 看清楚当前的版本,现在更新到了4.x,有一些属性在之前的版本上做了改动

 2. 引用时注意版本,可以看到bootcdn里可选的很多,自己测试时建议选完整版的

 

文章评论

Top