echarts地图

<html>
<body>
<div id="cbar" style="width: 100%; height: 360px"></div>

<script src="${ctxStatic}/echarts3/echarts.min.js"></script>
<script src="${ctxStatic}/mapjs/guangdong.js"></script>
<script type="text/javascript">

$(function(){
        //使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象
        var mapChart5 = echarts.init(document.getElementById('cbar'));
        // mapChart的配置
        var option5 = {
            title:{
                text: '广东XX分布',
                left:'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (个)'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            visualMap: {
                min: 0,
                max: 2000,
                text:['高','低'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue','yellow', 'orangered']
                }
            },
            series:[
                {
                    name: '广东各市',
                    type: 'map',//type必须声明为 map 说明该图标为echarts 中map类型
                    map: '广东', //这里需要特别注意。如果是中国地图，map值为china，如果为各省市则为中文
                    layoutCenter:['50%','50%'],
                    aspectScale: 1, //长宽比. default: 0.75
                    zoom: 0,
                    //roam: true,
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data: [
                        {name:'广州市', value: 1800},
                        {name:'佛山市', value: 1700},
                        {name:'珠海市', value: 1600},
                        {name:'深圳市', value: 1400},
                        {name:'东莞市', value: 1200},
                        {name:'湛江市', value: 1000},
                        {name:'揭阳市', value: 800},
                        {name:'清远市', value: 600},
                        {name:'阳江市', value: 400},
                        {name:'云浮市', value: 200},
                        {name:'梅州市', value: 100},
                        {name:'肇庆市', value: 300},
                        {name:'江门市', value: 500},
                        {name:'惠州市', value: 700},
                        {name:'茂名市', value: 900},
                        {name:'汕头市', value: 1100},
                        {name:'韶关市', value: 223},
                        {name:'河源市', value: 458},
                        {name:'潮州市', value: 556},
                        {name:'汕尾市', value: 120},
                        {name:'中山市', value: 875}

                    ]
                }
            ]
        };
        //设置图表的配置项
        mapChart5.setOption(option5);

    })


</script>
</body>
</html>
地图JSON和JS : https://download.csdn.net/download/yccmelody/10380590
猜你喜欢
