echarts-散点图配置

 抽取数据形成二维数组 用于散点图的两个坐标轴

具体配置项：

x轴和y轴都是数值轴

yAxis: {
  type: 'value',
  scale:true, // 轴的起点 不从0开始 (智能匹配)
  name: '体重(kg)'
},
xAxis: {
  type: 'value',
  scale:true,
  name: '身高(cm)'
},

 通过函数形式决定提示框展示内容

tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
  trigger: 'item',
  formatter:function (args) {
    return `
      编号：${args.dataIndex} <br/>
      身高：${args.value[0]}cm <br/>
      体重：${args.value[1]}kg `
  }
}

系列里面的配置 注释写的很详细

series: [
  {
    name: '身高体重散点',
    //type: 'scatter', // scatter 是普通散点图
    type:'effectScatter',// type : 带涟漪动画的散点图
    showEffectOn:'emphasis', // 触发效果 render 自动 emphasis 鼠标经过的触发
    rippleEffect:{
      scale:4 // 激活时的波纹步长
    },
    data:abc, // 上面定义的数据
    symbolSize:function (arg) { // 每个点的大小可以通过回调函数配置
      let hhh = arg[0] / 100
      let www = arg[1]
      // bmi = 体重KG / 身高m*身高m     结果大于28就是超标
      let bmi = www/(hhh*hhh)
      if (bmi > 28){
        return 12
      }
      return 7
      },
    itemStyle:{
      color:function (arg) { // 每个点颜色可以通过回调函数配置
        let hhh = arg.data[0] / 100
        let www = arg.data[1]
        // bmi = 体重KG / 身高m*身高m     结果大于28就是超标
        let bmi = www / (hhh * hhh)
        if (bmi > 28){
          return '#f35'
        }
        return '#107ea4'
      },
    }
  }
]

 完整代码：

let scatterData = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }......] 
 let abc = []
  scatterData.forEach(item =>{
    let hhh = item.height
    let www = item.weight
    let SArr = [hhh,www]
    abc.push(SArr)
  })

  let mCharts = echarts.init(document.querySelector('#main'))
  let options1 = {
    title: {
      text: '散点图'
    },
    yAxis: {
      type: 'value',
      scale:true,
      name: '体重(kg)'
    },
    xAxis: {
      type: 'value',
      scale:true,
      name: '身高(cm)'
    },
    tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
      trigger: 'item',
      //formatter:'身高：{b}<br/>体重：{c}'
      formatter:function (args) {
        //console.log(args)
        return `
          编号：${args.dataIndex} <br/>
          身高：${args.value[0]}cm <br/>
          体重：${args.value[1]}kg `
      }
    },
    series: [
      {
        name: '身高体重散点',
        //type: 'scatter', // scatter 是普通散点图
        type:'effectScatter',// type : 带涟漪动画的散点图
        showEffectOn:'emphasis', // 触发效果 render 自动 emphasis 鼠标经过的触发
        rippleEffect:{
          scale:4 // 激活时的波纹步长
        },
        data:abc, // 上面定义的数据
        symbolSize:function (arg) { // 每个点的大小可以通过回调函数配置
          let hhh = arg[0] / 100
          let www = arg[1]
          // bmi = 体重KG / 身高m*身高m     结果大于28就是超标
          let bmi = www/(hhh*hhh)
          if (bmi > 28){
            return 12
          }
          return 7
          },
        itemStyle:{
          color:function (arg) { // 每个点颜色可以通过回调函数配置
            let hhh = arg.data[0] / 100
            let www = arg.data[1]
            // bmi = 体重KG / 身高m*身高m     结果大于28就是超标
            let bmi = www / (hhh * hhh)
            if (bmi > 28){
              return '#f35'
            }
            return '#107ea4'
          },
        }
      }
    ]
  }
  mCharts.setOption(options1)