Echarts在线免费图表

 
            let option = {
        title: {
          text: '体脂率BMI',
          left: '2%',
          textStyle:{
            color: '#009BFF',
            fontSize:15
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line', // 设置竖线样式
            lineStyle: {
              type: 'dotted', // 设置竖线为虚线
              width: 4, // 设置虚线宽度
              color: '#DED4D4FF', // 设置虚线颜色
              interval: 80 // 设置竖线点的间隔
            },
            symbol: 'circle', // 设置符号为圆点
            symbolSize: 8 // 设置符号大小
          }
        },
        legend: {},
        toolbox: {
          show: false,
        },
        xAxis: {
          type: 'category',
          show: false ,
          boundaryGap: false,
          axisLine: {
            show: false // 不显示纵坐标的刻度线
          },
          data: ['张三', '李斯', '文工', '天逸', '王二小', '禾溪', '禾流']
        },
        yAxis: {
          type: 'value',
          show: false ,
          min: 10,
          max: 40,
          splitLine: { show: false },
          textStyle:{
            color: '#009BFF',
            fontSize:5
          },
          axisLine: {
            show: false // 不显示纵坐标的刻度线
          }
        },
        series: [
          {
            type: 'scatter',
            data: [
              {value: 20, itemStyle: {color: 'gray'}}, // 默认灰色
              {value: 15, itemStyle: {color: 'gray'}}, // 默认灰色
              {value: 30, itemStyle: {color: 'gray'}}, // 默认灰色
              {value: 34, itemStyle: {color: 'gray'}}, // 默认灰色
              {value: 27, itemStyle: {color: 'gray'}}, // 默认灰色
              {value: 19, itemStyle: {color: 'gray'}}, // 默认灰色
              {value: 25, itemStyle: {color: 'gray'}} // 默认灰色
            ].map(point => {
              if (point.value >= 18.5 && point.value <= 24.9) {
                point.itemStyle.color = '#32d50c'; // 大于18.5小于等于25的点设为蓝色
              } else if (point.value > 25 && point.value <= 29.9) {
                point.itemStyle.color = '#f6b718'; // 大于25小于等于30的点设为黄色
              } else if (point.value > 30) {
                point.itemStyle.color = '#f10707'; // 大于30的点设为红色
              }else{
                point.itemStyle.color = '#009BFF'; // 大于30的点设为红色
              }
              return point;
            }),
            markLine: {
              symbol: 'none', // 设置标记点为圆形
              lineStyle: {
                type: 'dotted', // 改成点点的虚线
                width: 2
              },
              label: {
                show: true, // 显示标签
                formatter: function(params) {
                  return params.yAxis; // 显示标签值
                },
                offset: [10, 0] // 将标签向右移动10像素
              },
              data: [
                { yAxis: 18.5, lineStyle: { color: '#009BFF',type:'dotted'},tooltip: { show: true }}, // 蓝色警戒线
                { yAxis: 25, lineStyle: { color: '#f6b718',type:'dotted'},tooltip: { show: true }}, // 绿色警戒线
                { yAxis: 30, lineStyle: { color: '#f10707' ,type:'dotted'},tooltip: { show: true }} // 红色警戒线
              ]
            }
          }
        ]
      };