echarts map

<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 (){
         // Use the echarts.init() method to initialize an Echarts instance, and pass in the container dom object of the echarts map in the init method 
        var mapChart5 = echarts.init(document.getElementById('cbar' ));
         / / mapChart config 
        var option5 = {
            title:{
                text: 'Guangdong XX distribution' ,
                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:[ 'high','low' ],
                realtime: false,
                calculable: true,
                in range: {
                    color: ['lightskyblue','yellow', 'orangered']
                }
            },
            series:[
                {
                    name: 'Guangdong cities' ,
                    type: 'map', // type must be declared as map, indicating that the icon is the map type in echarts 
                    map: 'Guangdong', // Special attention is required here. If it is a map of China, the map value is china, if it is a province and city, it is a Chinese 
                    layoutCenter:['50%','50%' ],
                    aspectScale: 1, // Aspect ratio. default: 0.75 
                    zoom: 0 ,
                     // roam: true, 
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data: [
                        {name: 'Guangzhou City', value: 1800 },
                        {name: 'Foshan City', value: 1700 },
                        {name: 'Zhuhai City', value: 1600 },
                        {name: 'Shenzhen', value: 1400 },
                        {name: 'Dongguan City', value: 1200 },
                        {name: 'Zhanjiang City', value: 1000 },
                        {name: 'Jieyang City', value: 800 },
                        {name: 'Qingyuan City', value: 600 },
                        {name: 'Yangjiang City', value: 400 },
                        {name: 'Yunfu City', value: 200 },
                        {name: 'Meizhou', value: 100 },
                        {name: 'Zhaoqing City', value: 300 },
                        {name: 'Jiangmen City', value: 500 },
                        {name: 'Huizhou City', value: 700 },
                        {name: 'Maoming City', value: 900 },
                        {name: 'Shantou City', value: 1100 },
                        {name: 'Shaoguan City', value: 223 },
                        {name: 'Heyuan City', value: 458 },
                        {name: 'Chaozhou City', value: 556 },
                        {name: 'Shanwei City', value: 120 },
                        {name: 'Zhongshan City', value: 875 }

                    ]
                }
            ]
        };
        // Set the configuration item of the chart 
        mapChart5.setOption(option5);

    })


</script>
</body>
</html>
Map JSON and JS: https://download.csdn.net/download/yccmelody/10380590
Guess you like
