echarts地圖

時間 2019-11-12

標籤 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/10380590javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。