当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 地图下钻简单实现

地图下钻简单实现

2019年05月17日  | 移动技术网IT编程  | 我要评论 
今天做地图下钻，没有地图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));
});

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网