<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> <script src="../js/echarts/china.js" charset="utf-8"></script> <div id="china_chart" style="width: 1000px;height:600px"></div> <script> // 初始化echarts示例mapChart var mapChart = echarts.init(document.getElementById('china_chart')); //myData可以从后台获取 // $(document).ready(function(){ // getData(); // }); // var myData =[]; // function getData(){ // $.ajax({ // type:"POST", // url : "/list", // contentType: "application/json", //必须这样写 // dataType:"json", // success:function(json){ // myData = json // }, // }) // } var yData = []; var myData = [ {name: '海门', value: [121.15, 31.89,90]}, {name: '鄂尔多斯', value: [109.781327, 39.608266,120]}, {name: '招远', value: [120.38, 37.35,142]}, {name: '舟山', value: [122.207216, 29.985295,123]} ] var data = [ {name: '海门', value: 90}, {name: '鄂尔多斯', value: 120}, {name: '招远', value: 142}, {name: '舟山', value: 123}]; function NumDescSort(a,b){ return a.value-b.value; } data.sort(NumDescSort) for (var i = 0; i < data.length; i++) { yData.push(i + data[i].name); } // mapChart的配置 var option = { title: [{ show: true, text: '排名情况', textStyle: { color: '#2D3E53', fontSize: 16 }, right: "26%", top: 150 }], tooltip: { show: true, formatter: function(params) { return params.name + ':' + params.data['value'] }, }, //条条的长度 grid: { right: -30, top: 400, width: '30%' }, xAxis: { show: false }, yAxis: { type: 'category', inverse: true, nameGap: 14, axisLine: { show: false, lineStyle: { color: '#ddd' } }, axisTick: { show: false, lineStyle: { color: '#ddd' } }, //排名前面的长条 axisLabel: { interval: 0, margin: 95, textStyle: { color: '#455A74', align: 'left', fontSize: 8 }, rich: { //前三个 a: { color: '#fff', backgroundColor: '#FAAA39', width: 10, height: 10, align: 'center', borderRadius: 2 }, //3个之后 b: { color: '#fff', backgroundColor: '#4197FD', width: 10, height: 10, align: 'center', borderRadius: 2 } }, //前三颜色不同 formatter: function(params) { if (parseInt(params.slice(0, 1)) < 3) { return [ '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + ' ' + params.slice(1) ].join('\n') } else { return [ '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + ' ' + params.slice(1) ].join('\n') } } }, data:yData }, geo: { map: 'china', left: 'left', itemStyle: { // 定义样式 normal: { // 普通状态下的样式 areaColor: '#DEE1E6', borderColor: '#5F6368' }, emphasis: { // 高亮状态下的样式 areaColor: '#ccc' } } }, backgroundColor: '', // 图表背景色 series: [ { name: '数量', // series名称 type: 'scatter', // series图表类型 coordinateSystem: 'geo' ,// series坐标系类型 data: myData ,// series数据内容 label: { normal: { formatter: '{b}:{@2}', position: 'right', show: false, color:'#6F1616', fontWeight:"800" }, emphasis: { show: true }, }, }, { name: 'barSer', type: 'bar', roam: false, visualMap: false, zlevel: 2, barMaxWidth: 8, barGap: 0, itemStyle: { normal: { color: function(params) { // build a color map as your need. var colorList = [{ colorStops: [{ offset: 0, color: '#FFD119' // 0% 处的颜色 }, { offset: 1, color: '#FFAC4C' // 100% 处的颜色 }] }, { colorStops: [{ offset: 0, color: '#00C0FA' // 0% 处的颜色 }, { offset: 1, color: '#2F95FA' // 100% 处的颜色 }] } ]; if (params.dataIndex < 3) { return colorList[0] } else { return colorList[1] } }, barBorderRadius: 15 } }, data: data } ], visualMap: { type: 'continuous', orient: 'horizontal', itemWidth: 20, itemHeight: 160, text: ['高', '低'], showLabel: true, seriesIndex: [0], min: 0, max: 150, inRange: { color: ['#6FCF6A', '#FFFD64', '#FF5000'] }, textStyle: { color: '#7B93A7' }, bottom: 30, left: 'left', } }; mapChart.setOption(option); </script> </body> </html>
地图demo
最新推荐文章于 2024-04-22 16:47:54 发布
该博客展示了如何利用Echarts库创建一个中国地图,显示各地区的数值数据,并进行排序。通过JavaScript代码,实现了地图上各区域的值并用不同颜色表示,以及自定义的提示框显示详细数值。
摘要由CSDN通过智能技术生成