psvt-miniprogram/src/pages/health/index.ts

const app = getApp<IAppOption>()
const echarts = require('@/components/ec-canvas/echarts.js')

Page({
  data: {
    popupShow: false,
    popupType: '',
    popupParams: {
      position: 'bottom',
    } as any,

    tab: 1,
    offsetTop: 0,
  },
  ecDataTrendComponent: null as any,
  onLoad() {
    this.ecDataTrendComponent = this.selectComponent('#chart1')
    this.initChart()
    app.waitLogin({ type: 0 }).then(() => {})
  },
  onReady() {
    const { statusBarHeight } = wx.getSystemInfoSync()
    const navBarHeight = 44
    this.setData({ offsetTop: statusBarHeight + navBarHeight })
  },
  initChart() {
    const arr = ['2026-06-01', '2026-06-02', '2026-06-03', '2026-06-04', '2026-06-05', '2026-06-06', '2026-06-07']
    this.ecDataTrendComponent.init((canvas, width, height, dpr) => {
      let chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr,
      })
      canvas.setChart(chart)

      var option = {
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 6, // 修正：数组下标0~6，原来7会越界
            xAxisIndex: [0],
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          confine: true,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          textStyle: {
            color: '#fff',
            fontSize: 10,
          },
          order: 'seriesDesc',
        },
        // 双图例自定义样式，匹配原图空心绿圈+实心红点
        legend: {
          bottom: 0,
          padding: 0,
          itemGap: 10,
          itemWidth: 8,
          itemHeight: 8,
          left: 'center',
          data: [
            {
              name: '正常心率',
              icon: 'circle',
              itemStyle: {
                color: '#fff',
                borderColor: '#46bc70',
                borderWidth: 2,
              },
            },
            {
              name: '发作心率',
              icon: 'circle',
              itemStyle: {
                color: '#d62828',
                borderColor: '#d62828',
              },
            },
          ],
        },

        grid: {
          top: '10',
          left: '0',
          right: '0',
          bottom: '14',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: 'rgba(148, 163, 184, 1)',
            formatter: function (value) {
              const [_year, month, day] = value.split('-')
              return `${month}/${day}`
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          data: arr,
        },
        yAxis: [
          {
            type: 'value',
            nameTextStyle: {
              align: 'right',
            },
            position: 'right',
            axisLabel: {
              color: 'rgba(148, 163, 184, 1)',
            },
            splitLine: {
              show: true,
              showMinLine: false,
              lineStyle: {
                type: 'solid',
                color: 'rgba(241, 245, 249, 1)',
              },
            },
          },
        ],
        series: [
          {
            // 单条主线，所有点位都有数值，折线完整连续无断点
            name: '心率',
            type: 'line',
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: { color: '#46bc70', width: 2 },
            // 每个点位单独配置样式，发作点红色实心，其余白色空心绿边框
            data: [
              { value: 62, itemStyle: { color: '#fff', borderColor: '#46bc70', borderWidth: 2 } },
              { value: 60, itemStyle: { color: '#fff', borderColor: '#46bc70', borderWidth: 2 } },
              { value: 61, itemStyle: { color: '#fff', borderColor: '#46bc70', borderWidth: 2 } },
              { value: 66, itemStyle: { color: '#d62828', borderColor: '#fff' } }, // 发作红点
              { value: 63, itemStyle: { color: '#fff', borderColor: '#46bc70', borderWidth: 2 } },
              { value: 69, itemStyle: { color: '#d62828', borderColor: '#fff' } }, // 发作红点
              { value: 64, itemStyle: { color: '#fff', borderColor: '#46bc70', borderWidth: 2 } },
            ],
          },
        ],
      }

      chart.setOption(option)
      return chart
    })
  },
  handlePopupOk() {
    const { popupType } = this.data
    if (popupType === 'argument') {
      wx.ajax({
        method: 'POST',
        url: '?r=wtx/user/agree-guest-privacy',
        data: {
          WorkerId: app.globalData.scene?.workerId || '',
        },
      }).then(() => {
        this.setData({
          popupShow: false,
          popupType: '',
          popupParams: {},
        })
        const waitBindDoctorId = app.globalData.waitBindDoctorId
        if (waitBindDoctorId) {
          this.handleBindDoctor(waitBindDoctorId)
        }
      })
    }
    if (popupType === 'conformBindDoctorConform') {
      this.setData({
        popupShow: false,
      })
      wx.ajax({
        method: 'POST',
        url: '?r=wtx/account/wait-bind-doctor',
        data: {
          doctorId: app.globalData.waitBindDoctorId,
        },
      }).then(() => {
        wx.navigateTo({
          url: `/patient/pages/login/index`,
        })
      })
    }
  },
  handlePopupCancel() {
    const { popupType } = this.data
    if (popupType === 'argument') {
      wx.exitMiniProgram()
    }
    if (popupType === 'conformBindDoctorConform') {
      this.setData({
        popupShow: false,
      })
      wx.ajax({
        method: 'POST',
        url: '?r=wtx/account/wait-bind-doctor',
        data: {
          doctorId: app.globalData.waitBindDoctorId,
        },
      }).then(() => {
        app.globalData.waitBindDoctorId = ''
      })
    }
  },
  handleDetail() {
    wx.navigateTo({
      url: '/pages/wallDetail/index',
    })
  },
})

export {}