eChart地图的使用

之前用地图都是参考别人的例子改动，然后把自己搞懵逼了，原来地图这么简单。

ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

话不多说，直接上例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
    <script src="js/hz.js"></script>
    <style>
        h2:nth-child(n+2){
            margin-top: 30px;
        }
        .demo{
            height: 300px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>

<h2>简单的地图</h2>
<div class="demo" id="demo"></div>
<script>
    var myChart = echarts.init(document.getElementById('demo'));
    var option = {
        series: [{
            type: 'map',
            map: "china"
        }]
    };
    myChart.setOption(option);
</script>

<h2>部分地图</h2>
<div class="demo" id="demo1"></div>
<script>
    var myChart = echarts.init(document.getElementById('demo1'));
    var option = {
        series: [{
            type: 'map',
            map: "hz"
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

这里引入了以下文件

echart.js
china.js
hz.js

echart.js和china.js通过npm install echarts之后都有。
hz.js我是通过http://datav.aliyun.com/tools/atlas/
这个网址获取到的，然后参考china.js修改以下。（也可以不修改，头部两句官网的方式）

ajax引入json方式

$.getJSON('hz_geo.json', function (geoJson) {

    echarts.registerMap('HZ', geoJson);

    var myChart = echarts.init(document.getElementById('demo1'));
    var option = {
        tooltip: {
            show: true
        },
        visualMap: [
            {
                type: 'piecewise',
                // text: ['企业注册量'],
                pieces: [
                    {min: 0, max: 1000, color: '#41abe3'},
                    {min: 1000, max: 2000, color: '#1990d2'},
                    {min: 2000, max: 3000, color: '#176cbc'},
                    {min: 3000, max: 4000, color: '#155998'},
                    {min: 4000, max: 5000, color: '#093c65'}
                ],
                inverse: true,
                show: false,
                right: 0,
                padding: 10,
                backgroundColor: 'rgba(1,23,75,0.5)'
            }
        ],
        series: [
            {
                name: 'hz',
                type: 'map',
                mapType: 'HZ', // 自定义扩展图表类型
                zoom: 1,
                itemStyle: {
                    borderColor: '#01e8fd',
                    borderWidth: 1
                },
                aspectScale: 1,
                data: [
                    {name: "上城区", value: 1000},
                    {name: "下城区", value: 2000},
                    {name: "江干区", value: 1000},
                    {name: "拱墅区", value: 2000},
                    {name: "西湖区", value: 3000},
                    {name: "滨江区", value: 4000},
                    {name: "萧山区", value: 1000},
                    {name: "余杭区", value: 2000},
                    {name: "桐庐县", value: 3000},
                    {name: "淳安县", value: 5000},
                    {name: "建德市", value: 5000},
                    {name: "富阳区", value: 5000},
                    {name: "临安市", value: 5000}
                ]
            }
        ]
    };
    myChart.setOption(option);
    
});

这个hz_geo.json的内容就是直接复制刚刚给的网址拷贝出来的内容

eChart地图的使用

推荐阅读更多精彩内容