地圖下鑽簡單實現

今天做地圖下鑽，沒有地圖json數據，記得做過沒有找到以前的資料，從網上下載還要花錢，
就想給路過的人提供資料，此js實現需要包含區域json的js文件及 echarts4.1.0（低版本的js可以試試），
如果有需要材料的，我在博客上傳了地圖材料的文件，可以下載

/*地圖下鑽*/
var myChart33 = echarts.init(document.getElementById('mapceshi'));
/**
 * 獲取圖表屬性
 * @param name select的名稱
 */
function getChartOptions(name){
    return     {
        geo: { //地圖寫在geo組件上
            map: name, //更換的名稱
            roam: true,
            selectedMode: 'single',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.4)'
                    }
                }
            },
            itemStyle: {
                normal:{
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis:{
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    };
}
//最初的屬性
myChart33.setOption({
    geo: {
        map: '中國', //
        roam: true,
        selectedMode: 'single',
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: 'rgba(0,0,0,0.4)'
                }
            }
        },
        regions: [{ //單例樣式
            name: '河北',
            itemStyle: {
                normal: {
                    areaColor: '#666',
                    color: '#666'
                }
            }
        }],
        itemStyle: {
            normal:{
                borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis:{
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }
});
//通過該事件進行底圖的變換
myChart33.on('click', function (params) {
    myChart33.setOption(getChartOptions(params.name));
});