1.效果图如下：
首先下载echarts-all.js。
代码如下：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 5 <title>四川地图显示</title> 6 </head> 7 <script type="text/javascript" src="<?=$sRootPath?>js/mapJs/echarts-all.js"></script> 8 <body> 9 <div id="main" style="height: 530px;"></div> 10 <script> 11 mapDisplay(); 12 function mapDisplay() { 13 var myChart = echarts.init(document.getElementById('main')); 14 var option = { 15 title: { 16 text: '四川省区域注册人数统计', 17 //subtext: '-。-' //子标题 18 }, 19 tooltip: { 20 trigger: 'item', 21 formatter: function(a){//鼠标移到某个州市上弹出的提示内容。包括显示样式可以自定义，利用return返回样式即可。 22 return a[1]+":"+a[2];//a[1]:州市名称，a[2]:data中的valuez值。 23 } 24 }, 25 26 legend: { 27 orient: 'vertical', 28 x: 'right', 29 data: ['数据名称'] 30 }, 31 32 dataRange: { 33 min: 0, 34 max: 1000, 35 color: ['orange', '#6EA1F4'], 36 //color: ['orange', 'blue'], 37 boder: 3, 38 text: ['高', '低'], // 文本，默认为数值文本 39 calculable: true 40 }, 41 series: [ 42 { 43 //name: '数据名称', 44 type: 'map', 45 mapType: '四川',//如果是其他省份，也可以改变，例如：上海，北京，天津等地。 46 selectedMode: 'single', 47 itemStyle: { 48 normal: { 49 label: { show: true }, 50 borderWidth: 2,//省份的边框宽度 51 childBorderWidth: 1, 52 childBorderColor: '#6EA1F4' 53 54 }, 55 emphasis: { label: { show: true } } 56 }, 57 data: [ 58 { name: '阿坝藏族羌族自治州', value: 0 }, 59 { name: '巴中市', value: 0 }, 60 { name: '成都市', value: 0 }, 61 { name: '达州市', value: 0 }, 62 { name: '德阳市', value: 0 }, 63 { name: '甘孜藏族自治州', value: 0 }, 64 { name: '广安市', value: 0 }, 65 { name: '广元市', value: 0 }, 66 { name: '乐山市', value: 0 }, 67 { name: '凉山彝族自治州', value: 0 }, 68 { name: '泸州市', value: 0 }, 69 { name: '眉山市', value: 0 }, 70 { name: '绵阳市', value: 0 }, 71 { name: '内江市', value: 0 }, 72 { name: '南充市', value: 0 }, 73 { name: '攀枝花市', value: 0 }, 74 { name: '遂宁市', value: 0 }, 75 { name: '雅安市', value: 0 }, 76 { name: '宜宾市', value: 0 }, 77 { name: '资阳市', value: 0 }, 78 { name: '自贡市', value: 0 } 79 ] 80 } 81 ] 82 }; 83 myChart.setOption(option); 84 } 85 </script> 86 </body> 87 </html>