Echarts地图展示及属性分析

时间：2024-01-22 08:54:09

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里可选的很多，自己测试时建议选完整版的

 

相关文章