特点

散点图可以帮助我们推断出不同维度数据之间的相关性, 比如上述例子中,看得出身高和体重是正相关, 身 高越高, 体重越重 ,散点图也经常用在地图的标注上

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../js/echarts.js"></script>
  9. </head>
  11. <body>
  12.     <div style="width: 600px;height:400px"></div>
  13.     <script> var mCharts = echarts.init(document.querySelector("div"))
  14.         var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 },
  15.         { "gender": "female", "height": 167.5, "weight": 59 },
  16.         { "gender": "female", "height": 159.5, "weight": 49.2 },
  17.         { "gender": "female", "height": 157, "weight": 63 },
  18.         { "gender": "female", "height": 155.8, "weight": 53.6 },
  19.         { "gender": "female", "height": 170, "weight": 59 },
  20.         { "gender": "female", "height": 159.1, "weight": 47.6 },
  21.         { "gender": "female", "height": 166, "weight": 69.8 },
  22.         { "gender": "female", "height": 176.2, "weight": 66.8 },
  23.         { "gender": "female", "height": 160.2, "weight": 75.2 },
  24.         { "gender": "female", "height": 172.5, "weight": 55.2 },
  25.         { "gender": "female", "height": 170.9, "weight": 54.2 },
  26.         { "gender": "female", "height": 172.9, "weight": 62.5 },
  27.         { "gender": "female", "height": 153.4, "weight": 42 },
  28.         {
  29.             "gender": "female", "height": 160, "weight": 50
  30.         },
  31.         { "gender": "female", "height": 147.2, "weight": 49.8 }]
  32.         var axisData = []
  33.         for (var i = 0; i < data.length; i++) {
  34.             var height = data[i].height
  35.             var weight = data[i].weight
  36.             var itemArr = [height, weight]
  37.             axisData.push(itemArr)
  38.         }
  39.         console.log(axisData);
  40.         // axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个
  41.         // 代表身高, 一个代表体重
  42.         var option = {
  43.             xAxis: { type: 'value', scale: true },
  44.             yAxis: { type: 'value', scale: true },
  45.             series: [{
  46.                 type: 'scatter',
  47.                 data: axisData,
  48.                 //控制散点大小
  49.                 symbolSize: 25,
  50.                 //控制散点的颜色
  51.                 itemStyle: { color: 'green', }
  52.             }]
  53.         }
  54.         mCharts.setOption(option)
  55.     </script>
  56. </body>
  58. </html>

动态控制散点的大小

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="../js/echarts.js"></script>
  9. </head>
  11. <body>
  12.     <div style="width: 600px;height:400px"></div>
  13.     <script> var mCharts = echarts.init(document.querySelector("div"))
  14.         var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 },
  15.         { "gender": "female", "height": 167.5, "weight": 59 },
  16.         { "gender": "female", "height": 159.5, "weight": 49.2 },
  17.         { "gender": "female", "height": 157, "weight": 63 },
  18.         { "gender": "female", "height": 155.8, "weight": 53.6 },
  19.         { "gender": "female", "height": 170, "weight": 59 },
  20.         { "gender": "female", "height": 159.1, "weight": 47.6 },
  21.         { "gender": "female", "height": 166, "weight": 69.8 },
  22.         { "gender": "female", "height": 176.2, "weight": 66.8 },
  23.         { "gender": "female", "height": 160.2, "weight": 75.2 },
  24.         { "gender": "female", "height": 172.5, "weight": 55.2 },
  25.         { "gender": "female", "height": 170.9, "weight": 54.2 },
  26.         { "gender": "female", "height": 172.9, "weight": 62.5 },
  27.         { "gender": "female", "height": 153.4, "weight": 42 },
  28.         {
  29.             "gender": "female", "height": 160, "weight": 50
  30.         },
  31.         { "gender": "female", "height": 147.2, "weight": 49.8 }]
  32.         var axisData = []
  33.         for (var i = 0; i < data.length; i++) {
  34.             var height = data[i].height
  35.             var weight = data[i].weight
  36.             var itemArr = [height, weight]
  37.             axisData.push(itemArr)
  38.         }
  40.         // axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个
  41.         // 代表身高, 一个代表体重
  42.         var option = {
  43.             xAxis: { type: 'value', scale: true },
  44.             yAxis: { type: 'value', scale: true },
  45.             series: [{
  46.                 type: 'scatter',
  47.                 data: axisData,
  48.                 symbolSize:(arg)=>{
  49.                     console.log(arg);
  50.                     var weight = arg[1]
  51.                     var height = arg[0] / 100
  52.                     // BMI > 28 则代表肥胖, 肥胖的人用大的散点标识, 正常的人用小散点标识 // 
  53.                     //BMI: 体重/ 身高*身高 kg m 
  54.                     var bmi = weight / (height * height)
  55.                     if (bmi > 28) { return 20 } return 5
  56.                 },
  57.                 itemStyle: {
  58.                     color:  (arg)=> {
  59.                         var weight = arg.data[1]
  60.                         var height = arg.data[0] / 100
  61.                         var bmi = weight / (height * height)
  62.                         if (bmi > 28) { return 'red' } return 'green'
  63.                     }
  64.                 }
  65.             }]
  66.         }
  67.         mCharts.setOption(option)
  68.     </script>
  69. </body>
  71. </html>

涟漪动画效果

type:effectScatter 将 type 的值从 scatter 设置为 effectScatter 就能够产生涟漪动画的效果 rippleEffect rippleEffect 可以配置涟漪动画的大小

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../js/echarts.js"></script>
  10. </head>
  12. <body>
  13.     <div style="width: 600px;height:400px"></div>
  14.     <script> var mCharts = echarts.init(document.querySelector("div"))
  15.         var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 },
  16.         { "gender": "female", "height": 167.5, "weight": 59 },
  17.         { "gender": "female", "height": 159.5, "weight": 49.2 },
  18.         { "gender": "female", "height": 157, "weight": 63 },
  19.         { "gender": "female", "height": 155.8, "weight": 53.6 },
  20.         { "gender": "female", "height": 170, "weight": 59 },
  21.         { "gender": "female", "height": 159.1, "weight": 47.6 },
  22.         { "gender": "female", "height": 166, "weight": 69.8 },
  23.         { "gender": "female", "height": 176.2, "weight": 66.8 },
  24.         { "gender": "female", "height": 160.2, "weight": 75.2 },
  25.         { "gender": "female", "height": 172.5, "weight": 55.2 },
  26.         { "gender": "female", "height": 170.9, "weight": 54.2 },
  27.         { "gender": "female", "height": 172.9, "weight": 62.5 },
  28.         { "gender": "female", "height": 153.4, "weight": 42 },
  29.         {
  30.             "gender": "female", "height": 160, "weight": 50
  31.         },
  32.         { "gender": "female", "height": 147.2, "weight": 49.8 }]
  33.         var axisData = []
  34.         for (var i = 0; i < data.length; i++) {
  35.             var height = data[i].height
  36.             var weight = data[i].weight
  37.             var itemArr = [height, weight]
  38.             axisData.push(itemArr)
  39.         }
  41.         // axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个
  42.         // 代表身高, 一个代表体重
  43.         var option = {
  44.             xAxis: { type: 'value', scale: true },
  45.             yAxis: { type: 'value', scale: true },
  46.             series: [{
  47.                 type: 'scatter',
  48.                 data: axisData,
  49.                 symbolSize: (arg) => {
  50.                     console.log(arg);
  51.                     var weight = arg[1]
  52.                     var height = arg[0] / 100
  53.                     // BMI > 28 则代表肥胖, 肥胖的人用大的散点标识, 正常的人用小散点标识 // 
  54.                     //BMI: 体重/ 身高*身高 kg m 
  55.                     var bmi = weight / (height * height)
  56.                     if (bmi > 28) { return 20 } return 5
  57.                 },
  58.                 itemStyle: {
  59.                     color: (arg) => {
  60.                         var weight = arg.data[1]
  61.                         var height = arg.data[0] / 100
  62.                         var bmi = weight / (height * height)
  63.                         if (bmi > 28) { return 'red' } return 'green'
  64.                     }
  65.                 }
  66.             },
  67.              //涟漪动画
  68.             { type: 'effectScatter', rippleEffect: { scale: 3 } }
  69.             ]
  70.         }
  71.         mCharts.setOption(option)
  72.     </script>
  73. </body>
  75. </html>

showEffectOn showEffectOn 可以控制涟漪动画在什么时候产生, 它的可选值有两个: render 和 emphasis render 代表界面渲染完成就开始涟漪动画 emphasis 代表鼠标移过某个散点的时候, 该散点开始涟漪动画

  1.     { type: 'effectScatter', showEffectOn: 'emphasis', rippleEffect:{ scale:3 }}

image.png