echarts.js应用之map

最近项目中用到了echarts.js中的map，我画了一个简版的案例，如下所示：
效果图：
主要代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>mapChart</title>
  <script src="../static/js/echarts.min.js"></script>
  <script src="../static/js/china.js"></script>
  <script src="../static/js/jquery-3.2.1.min.js"></script>
</head>
<body style="background-color: black;width: 1000px;height: 1000px;">
<div id="chinaMap" style="width: 1000px;height: 1000px;">

</div>
</body>
</html>
<script type="text/javascript">
    chinaMapChartDraw();
    // 地图数据加载
    function chinaMapChartDraw() {

        var data = new Array();
        data[0] = {
            name: "上海市",
            value_appAverage: 121,
            value_count: 3,
            value_urlAverage: 65
        };
        console.log(data);
        var chinaMap = echarts.init(document.getElementById("chinaMap"));
        var geoCoordMap = {
            '香港特别行政区': [114.16, 22.27],
            '澳门特别行政区': [113.54, 22.19],
            '海南省': [110.34, 20.01],
            '台湾省': [121.5, 25.0],
            '北京市': [116.4, 40],
            '上海市': [121.47, 31.2],
            '天津市': [117.19, 39],
            '重庆市': [106.55, 29.56],
            '黑龙江省': [126.66, 45.74],
            '吉林省': [125.32, 43.89],
            '辽宁省': [123.429, 41.83],
            '内蒙古自治区': [111.747, 40.8],
            '河北省': [116.4, 39],
            '新疆维吾尔自治区': [87.627, 43.79],
            '甘肃省': [103.82, 36.059],
            '青海省': [101.78, 36.62],
            '陕西省': [108.95, 34.26],
            '宁夏回族自治区': [106.258, 38.47],
            '河南省': [113.75, 34.765],
            '山东省': [117.02, 36.668],
            '山西省': [112.56, 37.87],
            '安徽省': [117.28, 31.86],
            '湖南省': [112.98, 28.11],
            '湖北省': [114.34, 30.54],
            '江苏省': [118.76, 32.06],
            '四川省': [104.076, 30.65],
            '贵州省': [106.707, 26.598],
            '云南省': [102.71, 25.046],
            '广西壮族自治区': [108.32, 22.81],
            '西藏自治区': [91.117, 29.64],
            '浙江省': [120.153, 30.26],
            '江西省': [115.91, 28.674],
            '广东省': [113.258, 23.13],
            '福建省': [119.296, 26.0998]
        };

        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_count),
                        value_count: data[i].value_count,
                        value_appAverage: data[i].value_appAverage,
                        value_urlAverage: data[i].value_urlAverage
                    });
                }
            }
            return res;
        };

        var mapOption = {
            title: {
                //text: '设备分布图',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    size: '25px'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    var res =
                        "<table class='tb-province'>" +
                        "<tr><td>城市：</td><td>" + params.name + "</td></tr>" +
                        "<tr><td>感知设备数量：</td><td>" + params.data.value_count + "</td></tr>" +
                        "<tr><td>设备安装应用均值：</td><td>" + params.data.value_appAverage + "</td></tr>" +
                        "<tr><td>设备访问url均值：</td><td>" + params.data.value_urlAverage + "</td></tr>" +
                        "</table>";
                    return res;
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true, // 让地图可缩小放大
                itemStyle: {
                    normal: {
                        areaColor: 'rgb(0,0,0)',
                        borderColor: '#0F99BB',
　　　　　　　　　　　　　　borderWidth: 1 // 设置边框粗细
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [
                {
                    name: 'pm2.5',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function (val) {
                        return 10;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ddb926'
                        }
                    }
                }
            ]
        };

        chinaMap.setOption(mapOption);
        $(".chinaMap").css("background", "rgb(0,0,0)");
    }
</script>
posted on 2017-08-22 11:22 miaoying 阅读(3348) 评论(3) 编辑收藏举报