echarts散点图使用（转：http://www.suchso.com/UIweb/echarts-sandiantu.html）

本文主要是介绍echarts散点图使用（转：http://www.suchso.com/UIweb/echarts-sandiantu.html），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.散点图中找最优记录

IT分享

 <!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地图中的特殊标记

IT分享

 <!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> 