这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本。
ECharts 2需要require加载模块。html中只需要用script引入echarts.js即可。
具体代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts.js插件实现中国地图省份选择效果</title> <style> *{margin:0;padding:0;} </style> </head> <body> <div id="main" style="height:500px"></div> <script src="dist/echarts.js"></script> <script> // 路径配置 require.config({ paths: { echarts: 'dist' } }); // 使用 require(['echarts','echarts/chart/map'],function (ch) { // 基于准备好的dom，初始化echarts图表 var myChart = ch.init(document.getElementById('main')); option = { tooltip : { trigger: 'item', formatter: '{b}' }, series : [{ name: '中国', type: 'map', mapType: 'china', selectedMode : 'single',//multiple多选 itemStyle:{ normal:{ label:{ show:true, textStyle: { color: "#231816" } }, areaStyle:{color:'#B1D0EC'}, color:'#B1D0EC', borderColor:'#dadfde'//区块的边框颜色 }, emphasis:{//鼠标hover样式 label:{ show:true, textStyle:{ color:'#fa4f04' } } } }, data:[ {name:'四川',selected:true} ] }] }; var ecConfig = require('echarts/config'); myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){ var selected = param.selected; var urlArr = ['http://www.baidu.com','http://http://www.cnblogs.com/sapho']; for (var p in selected) { if (selected[p]) { switch(p){ case '河南': location.href = urlArr[0]; break; case '重庆': location.href = urlArr[1]; break; default: break; } } } }); // 为echarts对象加载数据 myChart.setOption(option); }); </script> </body> </html>
文件结构如下:
效果如下：
点击四川或重庆,就会跳转到指定链接。
区块背景的颜色控制：itemStyle-->normal-->color。
区块里面的字体颜色控制：itemStyle-->normal-->label-->textStyle-->color。