echarts散点图使用
生活随笔
收集整理的這篇文章主要介紹了
echarts散点图使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.散點圖中找最優記錄
| <!DOCTYPE?html> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/> ????<title></title> ????<meta?charset="utf-8"?/> ????<link?rel="stylesheet"?href="style/style.css"> ????<script?src="js/echarts.common.min.js"></script> </head> <body> ????<!--?為ECharts準備一個具備大小（寬高）的Dom?--> ????<div?id="main"?style="width:?620px;height:400px;"></div> ????<script?type="text/javascript"> ????????//?基于準備好的dom，初始化echarts實例 ????????var?myChart?=?echarts.init(document.getElementById('main')); ????????var?data?=?[[],[]]; ????????var?showVal?=?[[3,?200099,?"中天博日"],?[2,?500039,?"騰訊"],?[5,?188669,?"中科"],?[4,?900009,?"華為"],?[3,?333339,?"阿里"],?[4,?233339,?"萬達"],?[2,?433339,?"中信"],?[7,?388889,?"中科"],?[6,?388889,?"kkk"],?[4,?233359,?'lekd']]; ????????showVal?=?showVal.sort(function?(a,?b)?{ ????????????if?(a[0]?==?b[0])?{ ????????????????return?a[1]>b[1] ????????????} ????????????return?a[0]?<?b[0] ????????}); ????????var?schema?=?[ ????????????{?name:?'money',?index:?0,?text:?'金額'?}, ????????????{?name:?'selUser',?index:?1,?text:?'選擇中標人'?} ????????]; ????????for?(var?i?=?0;?i?<?showVal.length;?i++)?{ ????????????var?a=?[]; ????????????if?(showVal[0][1]?==?showVal[i][1])?{ ????????????????if?(showVal[0][0]?==?showVal[i][0])?{ ????????????????????data[0].push(showVal[i]); ????????????????}?else?{ ????????????????????data[1].push(showVal[i]); ????????????????} ????????????}?else?{? ????????????????data[1].push(showVal[i]); ????????????} ????????} ????????option?=?{ ????????????backgroundColor:?new?echarts.graphic.RadialGradient(0.3,?0.3,?0.8,?[{ ????????????????offset:?0, ????????????????color:?'#fff' ????????????},?{ ????????????????offset:?1, ????????????????color:?'#fff' ????????????}]), ????????????title:?{ ????????????????left?:'35%', ????????????????text:?'尋找紙板插入物,?紙板供應商', ????????????????textStyle:{ ????????????????????color:?'#354052', ????????????????????fontSize:16 ????????????????????} ????????????}, ????????????//系列標記 ????????????legend:?{ ????????????????y:?'bottom', ????????????????data:?['投標',?'最佳出價'], ????????????????itemGap:40, ????????????}, ????????????//提示框的事例 ????????????tooltip:?{ ????????????????padding:?10, ????????????????backgroundColor:?'#222', ????????????????borderColor:?'#777', ????????????????borderWidth:?1, ????????????????formatter:?function?(obj)?{ ????????????????????var?value?=?obj.value; ????????????????????return?'<div?style="border-bottom:?1px?solid?rgba(255,255,255,.3);?font-size:?18px;padding-bottom:?7px;margin-bottom:?7px">' ????????????????????????+?value[2] ????????????????????????+?'</div>' ????????????????????????+?schema[0].text?+?'：'?+?value[1]?+?'<br>' ????????????????????????+?'選擇中標人<br>' ????????????????} ????????????}, ????????????//x坐標的設置 ????????????xAxis:?{ ????????????????name:?'供應商評分', ????????????????nameTextStyle:?{ ????????????????????color:?'#7F8FA4', ????????????????????fontSize:?12 ????????????????}, ????????????????axisLine:?{ ????????????????????lineStyle:?{ ????????????????????????color:?'#979797' ????????????????????} ????????????????}, ????????????????splitLine:?{ ????????????????????lineStyle:?{ ????????????????????????color:?'#D8D8D8', ????????????????????????type:?'dashed', ????????????????????} ????????????????} ????????????}, ????????????//y坐標的設置 ????????????yAxis:?{ ????????????????name:?'投標金額', ????????????????//坐標軸名稱 ????????????????nameTextStyle:?{ ????????????????????color:?'#7F8FA4', ????????????????????fontSize:?12 ????????????????}, ???????????????//坐標軸的設置 ????????????????axisLine:?{ ????????????????????lineStyle:?{ ????????????????????????color:?'#979797' ????????????????????} ????????????????}, ????????????????//坐標軸的分割線 ????????????????splitLine:?{ ????????????????????lineStyle:?{ ????????????????????????color:?'#D8D8D8', ????????????????????????type:?'dashed', ????????????????????} ????????????????}, ????????????????scale:?true ????????????}, ????????????series:?[{ ????????????????name:?'最佳出價', ????????????????data:?data[0], ????????????????type:?'scatter', ????????????????symbolSize:?function?(data)?{ ????????????????????return?Math.sqrt(data[1])?/?5e2?*?10; ????????????????}, ????????????????itemStyle:?{ ????????????????????normal:?{ ????????????????????????shadowBlur:?10, ????????????????????????shadowColor:?'rgba(255,128,5,0.5)', ????????????????????????shadowOffsetY:?5, ????????????????????????color:?new?echarts.graphic.RadialGradient(0.4,?0.3,?1,?[{ ????????????????????????????offset:?0, ????????????????????????????color:?'#FF8005?' ????????????????????????},?{ ????????????????????????????offset:?1, ????????????????????????????color:?'#FF8005' ????????????????????????}]) ????????????????????} ????????????????},?markLine:?{ ????????????????????silent:?true, ????????????????????lineStyle:?{ ????????????????????????normal:?{ ????????????????????????????type:?'solid', ????????????????????????} ????????????????????}, ????????????????????data:?[{ ????????????????????????yAxis:?data[1][7][1] ????????????????????}], ????????????????????label:?{ ????????????????????????normal:?{ ????????????????????????????formatter:'機會金額' ????????????????????????} ????????????????????} ????????????????????????? ????????????????} ????????????},?{ ????????????????name:?'投標', ????????????????data:?data[1], ????????????????type:?'scatter', ????????????????symbolSize:?function?(data)?{ ????????????????????return?Math.sqrt(data[1])?/?5e2?*?10; ????????????????}, ????????????????itemStyle:?{ ????????????????????normal:?{ ????????????????????????shadowBlur:?10, ????????????????????????shadowColor:?'rgba(55,178,72,0.5)', ????????????????????????shadowOffsetY:?5, ????????????????????????color:?new?echarts.graphic.RadialGradient(0.4,?0.3,?1,?[{ ????????????????????????????offset:?0, ????????????????????????????color:?'#37B248' ????????????????????????},?{ ????????????????????????????offset:?1, ????????????????????????????color:?'#37B248' ????????????????????????}]) ????????????????????} ????????????????}, ????????????????? ????????????}] ????????}; ????????//?使用剛指定的配置項和數據顯示圖表。 ????????myChart.setOption(option); ????</script> </body> </html> |
2地圖中的特殊標記
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | <!DOCTYPE?html> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/> ????<title></title> ????<meta?charset="utf-8"?/> ????<link?rel="stylesheet"?href="style/style.css"> ????<script?src="js/echarts.common.min.js"></script>??? ????<script?type="text/javascript"?src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> ????<script?type="text/javascript"?src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> </head> <body> ????<!--?為ECharts準備一個具備大小（寬高）的Dom?--> ????<div?id="main"?style="width:?600px;height:400px;"></div> ????<script?type="text/javascript"> ????????//?基于準備好的dom，初始化echarts實例 ????????var?myChart?=?echarts.init(document.getElementById('main')); ????????function?randomData()?{ ????????????return?Math.round(Math.random()?*?1000); ????????} ????????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]]; ????????var?geoCoordMap?=?{ ????????????'海門':?[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], ????????}; ????????var?geoData?=?[ ????????????{?name:?"海門",?value:?9?}, ????????????{?name:?"鄂爾多斯",?value:?12?}, ????????????{?name:?"招遠",?value:?12?}, ????????????{?name:?"舟山",?value:?12?}, ????????????{?name:?"齊齊哈爾",?value:?14?}, ????????????{?name:?"鹽城",?value:?15?}, ????????????{?name:?"赤峰",?value:?16?}, ????????????{?name:?"金昌",?value:?19?} ????????] ????????//獲取唯一識別的值 ????????var?selName?=?geoCoordMap.金昌.toString(); ????????var?convertData?=?function?(data,?geoCoord1)?{ ????????????var?res?=?[]; ????????????for?(var?i?=?0;?i?<?data.length;?i++)?{ ????????????????var?geoCoord?=?geoCoord1[data[i].name]; ????????????????if?(geoCoord)?{ ????????????????????res.push({ ????????????????????????name:?data[i].name, ????????????????????????value:?geoCoord.concat(data[i].value) ????????????????????}); ????????????????} ????????????} ????????????return?res; ????????}; ????????var?setTip?=?function?(data)?{ ????????????var?res?=?[]; ????????????if(data&&data.length>0){ ????????????????for(var?i=0;i<data.length;i++){ ????????????????????res.push({ ????????????????????????coord:?data[i], ????????????????????????label:?{ ????????????????????????????normal:?{?show:?false?} ????????????????????????}, ????????????????????????symbol:?data[i].toString()?!=?selName???'image://image/page.png'?:?'image://image/page1.png', ????????????????????}) ????????????????} ????????????} ????????????return?res ????????} ????????option?=?{ ????????????backgroundColor:?'#fff', ????????????title:?{ ????????????????text:?'全國主要城市空氣質量', ????????????????x:?'center', ????????????????textStyle:?{ ????????????????????color:?'#fff' ????????????????} ????????????}, ????????????tooltip:?{ ????????????????trigger:?'item', ????????????????formatter:?function?(params)?{ ????????????????????return?params.name?+?'?:?'?+?params.value[2]; ????????????????} ????????????}, ????????????geo:?{ ????????????????map:?'china', ????????????????label:?{ ????????????????????emphasis:?{ ????????????????????????show:?false ????????????????????} ????????????????}, ????????????????itemStyle:?{ ????????????????????normal:?{ ????????????????????????areaColor:?'#E7E7E7', ????????????????????????borderColor:?'#fff' ????????????????????}, ????????????????????emphasis:?{ ????????????????????????//鼠標移上去的屬性 ????????????????????????areaColor:?'#E7E7E7' ????????????????????} ????????????????} ????????????}, ????????????series:?[ ????????????????{ ????????????????????name:?'pm2.5', ????????????????????type:?'scatter', ????????????????????coordinateSystem:?'geo', ????????????????????data:?convertData(geoData,?geoCoordMap), ????????????????????//將默認的顯示隱藏掉 ????????????????????symbolSize:?0, ????????????????????//自定義標示點 ????????????????????markPoint:?{ ????????????????????????data:?setTip(pricePoint), ????????????????????????//設置圖片的偏移 ???????????????????????//?symbolOffset:?['-5%',?'-5%'], ????????????????????????//設置圖片的寬高 ????????????????????????symbolSize:?[15,20], ????????????????????}, ????????????????} ????????????] ????????} ????????//?使用剛指定的配置項和數據顯示圖表。 ????????myChart.setOption(option); ????</script> </body> </html> |
from:?http://blog.csdn.net/tototuzuoquan/article/details/70353939
總結
以上是生活随笔為你收集整理的echarts散点图使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hibernate开发中常见错误总结
- 下一篇： Java中Object.equals与S