以前做得中国地图展示各省相应指标数据，效果如图：
核心文件两个Echarts.js是肯定需要的，还有一个echarts.china.js，gittub上有，大家可以去下载。
内有相应的数据格式，根据大家的实际用途自己修改吧。
据图详解都已注释形式写在下面的代码里了，需要大家引入相关的文件哦。其实没什么难的，看看文档和配置手册就差不多可以上手了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html,body,.EchartsBox{ width: 100%; height: 100%; margin: 0; padding: 0px; background-color: black } </style> </head> <body> <div class="EchartsBox" id="map"></div> </body> <script src="../echarts.js"></script> <script src="./echarts.china.js"></script> <script src="../../jquery.min.js"></script> <script> $(function(){ //数据 var resultData=[{city: "山东", deal: 24583, count: 303, price: 54.22}, {city: "福建", deal: 461, count: 45, price: 58.85}, {city: "山东", deal: 24583, count: 303, price: 54.22}, {city: "福建", deal: 461, count: 45, price: 58.85}, {city: "河北", deal: 55977, count: 217, price: 30.88}, {city: "河南", deal: 45923, count: 158, price: 43.35}, {city: "重庆", deal: 124, count: 30, price: 45.86}, {city: "湖北", deal: 181, count: 38, price: 39.97}, {city: "湖南", deal: 475, count: 25, price: 85.32}, {city: "江西", deal: 3, count: 12, price: 53.49}, {city: "海南", deal: 1, count: 2, price: 23.35}, {city: "黑龙江", deal: 46, count: 17, price: 55.42}, {city: "天津", deal: 12, count: 7, price: 29.21}, {city: "贵州", deal: 63, count: 14, price: 36.13}, {city: "陕西", deal: 14328, count: 182, price: 41.89}, {city: "新疆", deal: 28160, count: 128, price: 94.03}, {city: "江苏", deal: 4997, count: 78, price: 48.02}, {city: "安徽", deal: 5704, count: 153, price: 42.75}, {city: "西藏", deal: 0, count: 0, price: 0}, {city: "吉林", deal: 200, count: 30, price: 37.87}, {city: "上海", deal: 635, count: 81, price: 62.96}, {city: "山西", deal: 3810, count: 123, price: 66.14}, {city: "甘肃", deal: 52, count: 32, price: 110.17}, {city: "宁夏", deal: 0, count: 0, price: 0}, {city: "四川", deal: 8308, count: 134, price: 42.89}, {city: "浙江", deal: 365, count: 85, price: 57.07}, {city: "广西", deal: 627, count: 49, price: 42.8}, {city: "云南", deal: 250, count: 33, price: 41.58}, {city: "内蒙古", deal: 0, count: 1, price: 6.5}, {city: "辽宁", deal: 749, count: 178, price: 61.65}, {city: "广东", deal: 860, count: 93, price: 61.85}, {city: "青海", deal: 0, count: 0, price: 0}, {city: "北京", deal: 330, count: 46, price: 56.85}]; var seriesData = []; // 指定 visualMapContinuous 组件的允许的最大值 var max = 12000; for(var i=0;i<resultData.length;i++){ seriesData.push({ name:resultData[i].city , value: +(resultData[i].deal), price: (+resultData[i].price).toFixed(2), amount: +(resultData[i].count) }) } var option = { tooltip: {//鼠标一上去的信息框 trigger: 'item' }, visualMap: {//visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。 show: true,//是否显示组件 max: max,//指定 visualMapContinuous 组件的允许的最大值 left: '5%', top: 'bottom', bottom:'5%', text: ['高', '低'],//两端的文本，如 ['High', 'Low'] calculable: true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。 inRange: {//定义 在选中范围中 的视觉元素。 color: [ '#416cbb' ,'#00b4ff', '#00deff' ,'#00ffe4', '#79fff1', '#fff17b', '#ffd200'],//图元的颜色。 }, textStyle: {//设置文字颜色（Demo左下组件） color: '#eee' } }, // 地图配置 geo: { map: 'china',//地图类型 zoom: 1.24,//当前视角的缩放比例。(理解为地图放大缩小) roam: false,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 label: {//文本设置（Echarts其他图表都有这样的设置，值得多看） normal: {//文字颜色 show: true,//是否显示文字 color: '#eee' }, emphasis: {//hover各省时的文字颜色 show: false, color: '#eee' } }, itemStyle: { normal: { areaColor: '#416cbb',//地图区域的颜色。 borderColor: '#fff',//图形的描边颜色。支持的颜色格式同 color，不支持回调函数。 shadowColor: '#41587f',//阴影颜色。 shadowBlur: 10,//图形阴影的模糊大小。 opacity: 0.75//图形透明度 }, emphasis: { areaColor: '#fdd145' } } }, series: [ { name: '苹果', type: 'map', mapType: 'china', geoIndex: 0,//理解就是多个组件都能用option里配置的geo地图，类似于坐标轴里的yAxisIndex:numder,也就是说你可以配置多个geo，也可以多个组件共用geo label: { normal: { show: true }, emphasis: { show: true } }, data: seriesData, tooltip: { // 利用formatter来自定义tooltip展示的数据 formatter: function (params,ticket,callback) { if (params.value) { return params.name+'<br/>成交量：' + params.value + '单<br/>' + '平均标签价格：' + params.data.price + '元<br/>' + '商品数量：' + params.data.amount+'家' } else { callback() } } } } ] }; var myChart = echarts.init(document.getElementById('map'), 'dark'); myChart.setOption(option); }); </script> </html>