地图下钻简单实现

2019-05-16 23:55:54来源：博客园阅读 ()

今天做地图下钻，没有地图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));
});