#1使用Echarts实现中国地图
*1）参考文章“使用Echarts实现中国地图”，完成中国地图的展示
#2将地图实现写成方法
*1） 原代码：
var option = { backgroundColor: '#FFFFFF', title: { text: '全国地图', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item' }, visualMap: { show : false, x: 'left', y: 'bottom', splitList: [ {start: 500, end:600},{start: 400, end: 500}, {start: 300, end: 400},{start: 200, end: 300}, {start: 100, end: 200},{start: 0, end: 100}, ], color: ['#66CC33', '#00FF00', '#66FF33','#', '#33CC00', '#00CC00'] }, series: [{ name: '随机数据', type: 'map', mapType: 'china', roam: true, label: { normal: { show: false }, emphasis: { show: false } }, data:mydata }] }; var chart = echarts.init(document.getElementById('main')); chart.setOption(option);*2）改写后代码（将代码放到方法里，并将mapType和data作为外部参数）：
function drawMap(darwMapType, data) { var option = { backgroundColor: '#FFFFFF', title: { text: '全国地图', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item' }, visualMap: { show : false, x: 'left', y: 'bottom', splitList: [ {start: 500, end:600},{start: 400, end: 500}, {start: 300, end: 400},{start: 200, end: 300}, {start: 100, end: 200},{start: 0, end: 100}, ], color: ['#16CC33', '#10FF00', '#16FF33','#', '#13CC00', '#10CC00'] }, series: [{ name: '随机数据', type: 'map', mapType: darwMapType, roam: true, label: { normal: { show: false }, emphasis: { show: false } }, data:data }] }; echarts.dispose(document.getElementById('main')); var chart = echarts.init(document.getElementById('main')); chart.setOption(option); } *3）改写方法后在onload进行调用
window.onload = function() { drawMap('china', mydata); }
#3实现地图下钻
*1）使用单击、双击（移动端不支持）或者长按触发实现地图下钻，此处使用双击（暂不作多次下钻和返回函数编写）
chart.on("dblclick", function(param) { drawMap(param.name, guangdongData); });
#4完整代码及实现效果
*1）完整代码
*2）实现效果（双击下钻广东）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/215628.html原文链接：https://javaforall.net
