e-Chart示例之可交互地图

       之前的博文中，我介绍了散点图的使用方式，在今天这篇博文中，再给大家展示一个echart图表的使用方式，就是可交互地图。以下是效果图

       在这个图片中，我们看到，这是一个可以交互的中国地图，当鼠标移至一个省份上时，就能出现这个省份排名前十的药品名称，这个报道在之前的博文中也已经介绍过。

       下面是这个图表的js代码，对于每一个省份的前十药品名称，用java写了一段程序能自动生成相应的格式，在这里为了节省空间就：不把每一个DATA都一一列出来了。

$(document).ready(function() {var DATA = {'福建': ['[999]感冒灵颗粒','[健途]维生素C咀嚼片','[999]感冒清热颗粒','[汇仁]肾宝片','[金毓婷]左炔诺孕酮片','[丹媚]左炔诺孕酮肠溶片','[仁和]益气养血口服液','[健途]甜橙味多种维生素泡腾片','京都念慈菴蜜炼川贝枇杷膏','[仁和]六味地黄丸（浓缩丸）',],'西藏': ['[朗依]硝呋太尔制霉素阴道软胶囊','[达克宁]硝酸咪康唑阴道软胶囊','[同仁堂]加味逍遥丸',],'贵州': ['[汇仁]肾宝片','[金毓婷]左炔诺孕酮片','[999]感冒灵颗粒','[汤臣倍健]液体钙软胶囊','[汤臣倍健]蛋白粉','[汇仁]肾宝合剂','[汤臣倍健]维生素B族片','京都念慈菴蜜炼川贝枇杷膏','[感康]复方氨酚烷胺片','[九芝堂]驴胶补血颗粒',],//这里接下去是每一个省份的前十药品名称};var height = $('#map').parent().height();if(IS_MOBILE){height = $('#map').width();$('#map').css('margin-bottom','20px');}$('#map').height(height);var titleSize = height * 0.0017;var textSize = height * 0.00125;if($('#map').width()>height){titleSize = $('#map').width() * 0.0017;textSize = $('#map').width() * 0.00125;}var getData = function(a0) {if(titleSize<0.8)titleSize = 0.8;if(textSize<0.6)textSize = 0.6;if(DATA[a0] == undefined) {return "<p style='text-align: left;font-size: "+titleSize+"em;'>" + a0 + "</p>" +"<p style='text-align: left;font-size: "+textSize+"em;'>该区域没有数据</p>";}var res = "<p style='text-align: left;font-size: "+titleSize+"em;'>" + a0 + "</p>" +"<table style='text-align: left;font-size: "+textSize+"em;'>";for(var i = 0;i<DATA[a0].length;i++){if(i%2==0){res +="<tr>" +"<td>" + (i+1) + "." + DATA[a0][i] + " </td>";}else{res +="<td>" + (i+1) + "." + DATA[a0][i] + "</td>" +"</tr>";}}if((DATA[a0].length-1)%2==0){res += "</tr>";}res += "</table>";return res;};var myChart = echarts.init(document.getElementById('map'));var option = {backgroundColor: '#FFFFFF00',tooltip: {trigger: 'item',formatter: function(params, ticket, callback) {return getData(params.name);}},series: [{name: 'Title',type: 'map',mapType: 'china',roam: false,showLegendSymbol: false,data:[                {name: '北京',itemStyle:{normal:{areaColor:'#f1e788'}} },                {name: '重庆',itemStyle:{normal:{areaColor:'#b0baf8'}} },                {name: '河北',itemStyle:{normal:{areaColor:'#f1e788'}} },                {name: '河南',itemStyle:{normal:{areaColor:'#4ef1ec'}} },                {name: '黑龙江',itemStyle:{normal:{areaColor:'#4ef1ec'}} },                {name: '湖南',itemStyle:{normal:{areaColor:'#ddc3cc'}} },                {name: '江西',itemStyle:{normal:{areaColor:'#a7cfc6'}} },                {name: '湖北',itemStyle:{normal:{areaColor:'#b0baf8'}} },                {name: '内蒙古',itemStyle:{normal:{areaColor:'#4ef1ec'}} },                {name: '陕西',itemStyle:{normal:{areaColor:'#ddde00'}} },                {name: '西藏',itemStyle:{normal:{areaColor:'#edd4fe'}} },                {name: '四川',itemStyle:{normal:{areaColor:'#b0baf8'}} },                {name: '宁夏',itemStyle:{normal:{areaColor:'#f1e788'}} },                {name: '海南',itemStyle:{normal:{areaColor:'#b0baf8'}} }            ],label: {normal: {show: true,textStyle:{fontWeight:'bold'}},emphasis: {show: true,textStyle:{fontWeight:'bold'}}}}],};if($('#map').width()>height){option.series[0].top = '2%';option.series[0].bottom = '2%';}else{option.series[0].left = '2%';option.series[0].right = '2%';}if(IS_MOBILE){option.series[0].label.normal.textStyle.fontSize = height/49.3;option.series[0].label.emphasis.textStyle.fontSize = height/40;option.series[0].roam = true;option.series[0].scaleLimit = {min:1,max:4};option.tooltip.triggerOn = 'click';option.tooltip.position = ['0%','85%'];}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);});

      虽然说表现形式和之前的散点图有了很大的区别，但是事实上这些API的格式或者数据的格式还是很接近的。