1.散点图中找最优记录
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="stylesheet" href="style/style.css"> 8 <script src="js/echarts.common.min.js"></script> 9 </head> 10 <body> 11 <!-- 为ECharts准备一个具备大小（宽高）的Dom --> 12 <div id="main" style=" 620px;height:400px;"></div> 13 <script type="text/javascript"> 14 // 基于准备好的dom，初始化echarts实例 15 var myChart = echarts.init(document.getElementById('main')); 16 var data = [[],[]]; 17 var showVal = [[3, 200099, "顺丰"], [2, 500039, "腾讯"], [5, 188669, "中科"], [4, 900009, "华为"], [3, 333339, "阿里"], [4, 233339, "万达"], [2, 433339, "中信"], [7, 388889, "中科"], [6, 388889, "kkk"], [4, 233359, 'lekd']]; 18 showVal = showVal.sort(function (a, b) { 19 if (a[0] == b[0]) { 20 return a[1]>b[1] 21 } 22 return a[0] < b[0] 23 }); 24 var schema = [ 25 { name: 'money', index: 0, text: '金额' }, 26 { name: 'selUser', index: 1, text: '选择中标人' } 27 ]; 28 for (var i = 0; i < showVal.length; i++) { 29 var a= []; 30 if (showVal[0][1] == showVal[i][1]) { 31 if (showVal[0][0] == showVal[i][0]) { 32 data[0].push(showVal[i]); 33 } else { 34 data[1].push(showVal[i]); 35 } 36 } else { 37 data[1].push(showVal[i]); 38 } 39 } 40 option = { 41 backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{ 42 offset: 0, 43 color: '#fff' 44 }, { 45 offset: 1, 46 color: '#fff' 47 }]), 48 title: { 49 left :'35%', 50 text: '寻找纸板插入物, 纸板供应商', 51 textStyle:{ 52 color: '#354052', 53 fontSize:16 54 } 55 }, 56 //系列标记 57 legend: { 58 y: 'bottom', 59 data: ['投标', '最佳出价'], 60 itemGap:40, 61 }, 62 //提示框的事例 63 tooltip: { 64 padding: 10, 65 backgroundColor: '#222', 66 borderColor: '#777', 67 borderWidth: 1, 68 formatter: function (obj) { 69 var value = obj.value; 70 return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' 71 + value[2] 72 + '</div>' 73 + schema[0].text + '：' + value[1] + '<br>' 74 + '选择中标人<br>' 75 } 76 }, 77 //x坐标的设置 78 xAxis: { 79 name: '供应商评分', 80 nameTextStyle: { 81 color: '#7F8FA4', 82 fontSize: 12 83 }, 84 axisLine: { 85 lineStyle: { 86 color: '#979797' 87 } 88 }, 89 splitLine: { 90 lineStyle: { 91 color: '#D8D8D8', 92 type: 'dashed', 93 } 94 } 95 }, 96 //y坐标的设置 97 yAxis: { 98 name: '投标金额', 99 //坐标轴名称 100 nameTextStyle: { 101 color: '#7F8FA4', 102 fontSize: 12 103 }, 104 //坐标轴的设置 105 axisLine: { 106 lineStyle: { 107 color: '#979797' 108 } 109 }, 110 //坐标轴的分割线 111 splitLine: { 112 lineStyle: { 113 color: '#D8D8D8', 114 type: 'dashed', 115 } 116 }, 117 scale: true 118 }, 119 series: [{ 120 name: '最佳出价', 121 data: data[0], 122 type: 'scatter', 123 symbolSize: function (data) { 124 return Math.sqrt(data[1]) / 5e2 * 10; 125 }, 126 itemStyle: { 127 normal: { 128 shadowBlur: 10, 129 shadowColor: 'rgba(255,128,5,0.5)', 130 shadowOffsetY: 5, 131 color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ 132 offset: 0, 133 color: '#FF8005 ' 134 }, { 135 offset: 1, 136 color: '#FF8005' 137 }]) 138 } 139 }, markLine: { 140 silent: true, 141 lineStyle: { 142 normal: { 143 type: 'solid', 144 } 145 }, 146 data: [{ 147 yAxis: data[1][7][1] 148 }], 149 label: { 150 normal: { 151 formatter:'机会金额' 152 } 153 } 154 155 } 156 }, { 157 name: '投标', 158 data: data[1], 159 type: 'scatter', 160 symbolSize: function (data) { 161 return Math.sqrt(data[1]) / 5e2 * 10; 162 }, 163 itemStyle: { 164 normal: { 165 shadowBlur: 10, 166 shadowColor: 'rgba(55,178,72,0.5)', 167 shadowOffsetY: 5, 168 color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{ 169 offset: 0, 170 color: '#37B248' 171 }, { 172 offset: 1, 173 color: '#37B248' 174 }]) 175 } 176 }, 177 178 }] 179 }; 180 // 使用刚指定的配置项和数据显示图表。 181 myChart.setOption(option); 182 </script> 183 </body> 184 </html>
2地图中的特殊标记
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="stylesheet" href="style/style.css"> 8 <script src="js/echarts.common.min.js"></script> 9 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> 10 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> 11 </head> 12 <body> 13 <!-- 为ECharts准备一个具备大小（宽高）的Dom --> 14 <div id="main" style=" 600px;height:400px;"></div> 15 <script type="text/javascript"> 16 // 基于准备好的dom，初始化echarts实例 17 var myChart = echarts.init(document.getElementById('main')); 18 function randomData() { 19 return Math.round(Math.random() * 1000); 20 } 21 var pricePoint = [[121.15, 31.89], [109.781327, 39.608266], [120.38, 37.35], [122.207216, 29.985295], [123.97, 47.33], [120.13, 33.38], [118.87, 42.28], [102.188043, 38.520089]]; 22 var geoCoordMap = { 23 '海门': [121.15, 31.89], 24 '鄂尔多斯': [109.781327, 39.608266], 25 '招远': [120.38, 37.35], 26 '舟山': [122.207216, 29.985295], 27 '齐齐哈尔': [123.97, 47.33], 28 '盐城': [120.13, 33.38], 29 '赤峰': [118.87, 42.28], 30 "金昌": [102.188043, 38.520089], 31 }; 32 var geoData = [ 33 { name: "海门", value: 9 }, 34 { name: "鄂尔多斯", value: 12 }, 35 { name: "招远", value: 12 }, 36 { name: "舟山", value: 12 }, 37 { name: "齐齐哈尔", value: 14 }, 38 { name: "盐城", value: 15 }, 39 { name: "赤峰", value: 16 }, 40 { name: "金昌", value: 19 } 41 ] 42 //获取唯一识别的值 43 var selName = geoCoordMap.金昌.toString(); 44 var convertData = function (data, geoCoord1) { 45 var res = []; 46 for (var i = 0; i < data.length; i++) { 47 var geoCoord = geoCoord1[data[i].name]; 48 if (geoCoord) { 49 res.push({ 50 name: data[i].name, 51 value: geoCoord.concat(data[i].value) 52 }); 53 } 54 } 55 return res; 56 }; 57 var setTip = function (data) { 58 var res = []; 59 if(data&&data.length>0){ 60 for(var i=0;i<data.length;i++){ 61 res.push({ 62 coord: data[i], 63 label: { 64 normal: { show: false } 65 }, 66 symbol: data[i].toString() != selName ? 'image://image/page.png' : 'image://image/page1.png', 67 }) 68 } 69 } 70 return res 71 } 72 option = { 73 backgroundColor: '#fff', 74 title: { 75 text: '全国主要城市空气质量', 76 x: 'center', 77 textStyle: { 78 color: '#fff' 79 } 80 }, 81 tooltip: { 82 trigger: 'item', 83 formatter: function (params) { 84 return params.name + ' : ' + params.value[2]; 85 } 86 }, 87 geo: { 88 map: 'china', 89 label: { 90 emphasis: { 91 show: false 92 } 93 }, 94 itemStyle: { 95 normal: { 96 areaColor: '#E7E7E7', 97 borderColor: '#fff' 98 }, 99 emphasis: { 100 //鼠标移上去的属性 101 areaColor: '#E7E7E7' 102 } 103 } 104 }, 105 series: [ 106 { 107 name: 'pm2.5', 108 type: 'scatter', 109 coordinateSystem: 'geo', 110 data: convertData(geoData, geoCoordMap), 111 //将默认的显示隐藏掉 112 symbolSize: 0, 113 //自定义标示点 114 markPoint: { 115 data: setTip(pricePoint), 116 //设置图片的偏移 117 // symbolOffset: ['-5%', '-5%'], 118 //设置图片的宽高 119 symbolSize: [15,20], 120 }, 121 } 122 ] 123 } 124 // 使用刚指定的配置项和数据显示图表。 125 myChart.setOption(option); 126 </script> 127 </body> 128 </html>