import * as echarts from '../../ec-canvas/echarts';
Component({


  properties: {
    healthInfo:{
      type:Array,
      value:[]
    }
  },
  observers:{
    "healthInfo":function(val){
     
      if(val){
        this.initChart(val)
      }
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    },
  },
  lifetimes:{
    attached: function() {
      // 在组件实例进入页面节点树时执行
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    initChart(initData) {
      // console.log('散点图',initData);
      this.selectComponent("#mychart-dom-dot").init((canvas, width, height) => {
        // 初始化图表
        const systemInfo = wx.getSystemInfoSync()
        const pixelRatio = systemInfo.pixelRatio || 0
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: pixelRatio
        });
        const data = [
          [80, 90, '身体差绩效佳'],
          [70, 80, '身体差绩效佳'],
          [60, 70, '身体差绩效佳'],
          [50, 60, '身体差绩效佳'],
          [40, 50, '身体差绩效佳'],
          [30, 40, '身体差绩效佳'],
          [20, 30, '身体差绩效佳'],
          [10, 20, '身体差绩效佳'],
          [0, 10, '身体差绩效佳'],
          [90, 80, '身体差绩效差'],
          [80, 70, '身体差绩效差'],
          [70, 60, '身体差绩效差'],
          [60, 50, '身体差绩效差'],
          [50, 40, '身体差绩效差'],
          [40, 30, '身体差绩效差'],
          [30, 20, '身体差绩效差'],
          [20, 10, '身体差绩效差'],
          [10, 20, '身体差绩效差']
        ];
        const options = {
          xAxis: {
            type: 'value',
            name: '健康度指数',
            nameGap: 5, // 减小此值使名称更靠近轴线
            min:0,
            max:100,
            splitNumber:1,
            axisLabel: {
              formatter: function(value) {
                // 只在0和100处显示刻度标签
                return value === 0 || value === 100 ? value : '';
              }
            },
            axisLine: { // 隐藏轴线
              // show: false
          },
            axisTick: {
              alignWithLabel: true, // 让刻度线与标签对齐
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed' // 分割线样式
              }
            },
            nameLocation: 'middle', // 将标题放置在轴的中间
          },
          yAxis: {
            type: 'value',
            name: '绩效分析',
            nameGap: 5, // 减小此值使名称更靠近轴线
            min:0,
            max:100,
            splitNumber:1,
            axisLabel: {
              formatter: function(value) {
                // 只在0和100处显示刻度标签
                return value === 0 || value === 100 ? value : '';
              }
            },
            axisTick: {
              alignWithLabel: true, // 让刻度线与标签对齐
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed' // 分割线样式
              }
            },
            nameLocation: 'middle', // 将标题放置在轴的中间
          },
          series: [
            {
              name: '身体差绩效佳',
              type: 'scatter',
              symbolSize: '10',
              data: data.filter(item => item[2] === '身体差绩效佳'),
              itemStyle: {
                color: '#00bfff' // 蓝绿色
              }
            },
            {
              name: '身体差绩效差',
              type: 'scatter',
              symbolSize: 10,
              data: data.filter(item => item[2] === '身体差绩效差'),
              itemStyle: {
                color: '#ff0000' // 红色
              }
            },
            {
              // type: 'line',
              smooth: false, // 平滑曲线关闭
              symbol: 'none', // 不显示标记点
              lineStyle: { // 设置线条样式
                  color: 'red',
                  width: 1
              },
              data: [
                  { coord: [0, 20], value: 20 }, // 起始点
                  { coord: [100, 20], value: 20 } // 结束点
              ],
          }
          ],
          grid: {
            left: '22%', // 或者使用具体像素值，如 '100px'
            right: '5%',
            top: '19%',
            bottom: '1%',
            containLabel: true
          },
          // 左下角正方行红色
          graphic: [
            {
                type: 'rect',
                z: 111111, // 确保这个矩形在所有其他元素的下方
                left: '20%', // 左边距，这里假设图表宽高相等，使用百分比
                top: '20%', // 上边距
                width: '20%', // 矩形的宽度，同样假设宽高相等
                height: '20%', // 矩形的高度
                style: {
                    fill: 'rgba(255, 0, 0, 0.5)', // 半透明红色
                    stroke: '#f00',
                    lineWidth: 1
                }
            }
        ],
        }
        // console.log("22222222222",options);
        chart.setOption(options);
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    }
  }
})

感觉应该不是那问题吧