java开发报表下钻,地图下钻简单实现

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

});