Echarts 在地图上绘制柱状图
首先需要获取地图JSON数据包,点此下载(Echarts官方地图数据,包含世界、中国,及国内各省数据)。
以青海省地图为例:
代码如下:
// 读取地图数据 $.getJSON('./mapjson/province/qinghai.json', function(qinghai) { // 注册JSON数据地图至echarts echarts.registerMap('qinghai', qinghai); var myChart = echarts.init(document.getElementById('map')); myChart.showLoading( { text: '加载中...', color: '#c23531', fontSize: '28px', textColor: '#000', maskColor: 'rgba(255, 255, 255, 0.2)', zlevel: 0, }); // 字体、柱图缩放倍数 var scale = 1; // 柱状图数据 var xData = { '西宁市': ['热点1', '热点2'], '海东市': ['热点3', '热点4'], '海北藏族自治州': ['热点2', '热点3'], '黄南藏族自治州': ['热点2', '热点4'], '海南藏族自治州': ['热点1', '热点3'], '果洛藏族自治州': ['热点4', '热点2'], '玉树藏族自治州': ['热点4', '热点3'], '海西蒙古族藏族自治州': ['热点2', '热点1'], }; var rawData = { '西宁市': [92, 43], '海东市': [26, 11], '海北藏族自治州': [59, 33], '黄南藏族自治州': [66, 42], '海南藏族自治州': [75, 50], '果洛藏族自治州': [43, 23], '玉树藏族自治州': [10, 7], '海西蒙古族藏族自治州': [98, 81], }; // 柱状图所在坐标,与rawData对应 var coordData = { '西宁市': [101.178916, 38.423178], '海东市': [102.10327, 37.802916], '海北藏族自治州': [99.901059, 39.159435], '黄南藏族自治州': [101.219988, 36.517744], '海南藏族自治州': [99.619542, 37.280353], '果洛藏族自治州': [99.242143, 34.8736], '玉树藏族自治州': [95.008522, 34.704049], '海西蒙古族藏族自治州': [94.770785, 37.874663], }; // 柱状图颜色 var colorList = ['31 ,210, 240', '61, 233, 147']; // 地图配置 var option = { geo: [ { type: 'map', map: 'qinghai', aspectScale: 1, // 地图比例 zoom: 1.25, // 地图缩放倍数 label: { // 地图字体,通常状态 normal: { show: true, color:"#fff", fontSize: 12 * scale, }, // 地图字体,选中状态 emphasis: { show: true, fontSize: 12 * scale, color:"#fff" } }, itemStyle: { // 地图区块样式,通常状态 normal: { areaColor: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#08429F' }, { offset: 1, color: '#061E3D' }, ], }, borderColor: '#215495', borderWidth: 2 * scale, }, // 地图区块样式,选中状态 emphasis: { areaColor: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#084DBC' }, { offset: 1, color: '#092F5E' }, ], }, } }, }, ] }; myChart.hideLoading(); myChart.setOption(option, true); myChart.resize(); // 遍历省内所有地区,分别添加柱状图 echarts.util.each(qinghai.features, function(dataItem, idx) { // 获取当前地区数据 var thisXData = xData[dataItem.properties.name]; var thisData = rawData[dataItem.properties.name]; // 根据coordData中当前地区经纬度计算柱状图在图表内的对应坐标 var coord = myChart.convertToPixel('geo', coordData[dataItem.properties.name]); // 生成柱状图数据 var tmpOption = { xAxis : [], yAxis : [], grid : [], series : [], tooltip : { trigger: 'item', axisPointer: { type: 'none' }, textStyle: { fontSize: 12 * scale, }, formatter: function(params) { var returnStr = ''; if(params.componentSubType == 'bar') { returnStr += params.marker + ' '; returnStr += params.name + ':' + params.value; returnStr += ' 项'; } return returnStr; } } }; // 生成柱状图x轴配置 tmpOption.xAxis.push( { id: idx, gridId: idx, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, data: thisXData, z: 100 }); // 生成柱状图y轴配置 tmpOption.yAxis.push( { id: idx, gridId: idx, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, z: 100 }); // 配置柱状图绘制大小、位置 tmpOption.grid.push( { id: idx, width: 40 * scale, height: 70 * scale, left: coord[0], top: coord[1], z: 100 }); // 生成柱状图数据 tmpOption.series.push( { id: idx, type: 'bar', xAxisId: idx, yAxisId: idx, barGap: 0, barCategoryGap: 0, data: thisData, z: 100, itemStyle: { normal: { label: { show: true, position: 'insideBottom', textStyle: { color: '#fff', fontSize: 8 * scale }, formatter: function(params) { var txtArray = params.name.split(''); var rs = ''; for(var i = 0; i < txtArray.length; i++) { rs += txtArray[i] + "\n"; } return rs; } }, color: function(params) { return new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: 'rgba(' + colorList[params.dataIndex] + ', 1)' }, { offset: 1, color: 'rgba(' + colorList[params.dataIndex] + ', 0.6)' }, ], false); } } } }); myChart.setOption(tmpOption); }); })
欢迎转载,转载时请注明来源。