<div id="container" style="width:980px;height:600px"></div>

<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '34 省切換檢視';
var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
var provincesText = ['上海', '河北', '山西', '內蒙古', '遼寧', '吉林','黑龍江',  '江蘇', '浙江', '安徽', '福建', '江西', '山東','河南', '湖北', '湖南', '廣東', '廣西', '海南', '四川', '貴州', '雲南', '西藏', '陝西', '甘肅', '青海', '寧夏', '新疆', '北京', '天津', '重慶', '香港', '澳門'];

function showProvince() {
    var name = 'guangdong';
    myChart.showLoading();
    $.get('guangdong.asp', function (geoJson) {
        myChart.hideLoading();
        echarts.registerMap(name, geoJson);
        myChart.setOption(option = {         
            title: {
                text: name,
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
             tooltip: {
        trigger: 'item'
    },
    dataRange: {
      orient: 'horizontal',
       x: 'right',
        min: 0,
         max: 1000,
         color: ['orange', 'yellow'],
        text: ['高', '低'], // 文字，預設為數值文字
        calculable: true,
       splitNumber: 0
       },
       toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
              legend: {
            orient: 'vertical'
           // x:'left',
            //data:['資料名稱']
        },
    animation: true,
    animationDurationUpdate: 1000,
    animationEasingUpdate: 'cubicInOut',
     series : [
        {
            name: '資料名稱',
            type: 'map',
            mapType: name,
            mapLocation: {
                x : 'left',
                y : 'top',
                height : 500
            },
            selectedMode: 'multiple',
            itemStyle: {
                normal: {
                    borderWidth:2,
                    borderColor:'lightgreen',
                    color: 'orange',
                    label: {
                        show: false
                    }
                },
                emphasis: {                 // 也是選中樣式
                    borderWidth:2,
                    borderColor:'#fff',
                    color: '#32cd32',
                    label: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            },
            data:[ ],
            markPoint: {//圖形
            symbolSize: 80,
            label: {
                            normal: {
                                show: true,
                                formatter: '{b}\n{c}'
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#C1FFC1',
                                color: ['rgba(127, 255, 0, 0.7)']
                            },
                            emphasis: {
                                color: ['rgb(127, 255, 0)']
                            }
                        },
                        markArea: {
                            itemStyle: {
                                normal: {
                                    color: ['#7FFFD4']
                                }
                            }
                        },
                        data: [
                            {name: '清遠市', value: 10.2, coord: [113.051227,23.685022], symbol: 'pin'}
                           
                        ]
                    }
         
        }
    ]
        });
    });
}
var currentIdx = 0;
showProvince();
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
</script>