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'
      },
    }
  }
]

 完整代码：

1.  
   let scatterData = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }......]
2.  
   let abc = []
3.  
   scatterData.forEach(item =>{
4.  
   let hhh = item.height
5.  
   let www = item.weight
6.  
   let SArr = [hhh,www]
7.  
   abc.push(SArr)
8.  
   })
9.  
    
10.  
    let mCharts = echarts.init(document.querySelector('#main'))
11.  
    let options1 = {
12.  
    title: {
13.  
    text: '散点图'
14.  
    },
15.  
    yAxis: {
16.  
    type: 'value',
17.  
    scale:true,
18.  
    name: '体重(kg)'
19.  
    },
20.  
    xAxis: {
21.  
    type: 'value',
22.  
    scale:true,
23.  
    name: '身高(cm)'
24.  
    },
25.  
    tooltip: {// 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
26.  
    trigger: 'item',
27.  
    //formatter:'身高：{b}<br/>体重：{c}'
28.  
    formatter:function (args) {
29.  
    //console.log(args)
30.  
    return `
31.  
    编号：${args.dataIndex} <br/>
32.  
    身高：${args.value[0]}cm <br/>
33.  
    体重：${args.value[1]}kg `
34.  
    }
35.  
    },
36.  
    series: [
37.  
    {
38.  
    name: '身高体重散点',
39.  
    //type: 'scatter', // scatter 是普通散点图
40.  
    type:'effectScatter',// type : 带涟漪动画的散点图
41.  
    showEffectOn:'emphasis', // 触发效果 render 自动 emphasis 鼠标经过的触发
42.  
    rippleEffect:{
43.  
    scale:4 // 激活时的波纹步长
44.  
    },
45.  
    data:abc, // 上面定义的数据
46.  
    symbolSize:function (arg) { // 每个点的大小可以通过回调函数配置
47.  
    let hhh = arg[0] / 100
48.  
    let www = arg[1]
49.  
    // bmi = 体重KG / 身高m*身高m 结果大于28就是超标
50.  
    let bmi = www/(hhh*hhh)
51.  
    if (bmi > 28){
52.  
    return 12
53.  
    }
54.  
    return 7
55.  
    },
56.  
    itemStyle:{
57.  
    color:function (arg) { // 每个点颜色可以通过回调函数配置
58.  
    let hhh = arg.data[0] / 100
59.  
    let www = arg.data[1]
60.  
    // bmi = 体重KG / 身高m*身高m 结果大于28就是超标
61.  
    let bmi = www / (hhh * hhh)
62.  
    if (bmi > 28){
63.  
    return '#f35'
64.  
    }
65.  
    return '#107ea4'
66.  
    },
67.  
    }
68.  
    }
69.  
    ]
70.  
    }
71.  
    mCharts.setOption(options1)

这篇好文章是转载于：学新通技术网