miniapp/src/pages/mine/partnerChannel/components/LineChat.jsx

import React, { useEffect, useRef, useState, useMemo } from 'react'
import Taro from '@tarojs/taro'
import * as echarts from '@/native/ec-canvas/echarts';
import { getChannelLineChat } from '@/services/agent'

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  // var option = {
  //   xAxis: {
  //     type: 'category',
  //     boundaryGap: false,
  //     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  //     // show: false
  //   },
  //   yAxis: {
  //     x: 'center',
  //     type: 'value',
  //     splitLine: {
  //       lineStyle: {
  //         type: 'dashed'
  //       }
  //     }
  //     // show: false
  //   },
  //   series: [{
  //     name: 'A',
  //     type: 'line',
  //     smooth: true,
  //     data: [18, 36, 65, 30, 78, 40, 33]
  //   }, {
  //     name: 'B',
  //     type: 'line',
  //     smooth: true,
  //     data: [12, 50, 51, 35, 70, 30, 20]
  //   }, {
  //     name: 'C',
  //     type: 'line',
  //     smooth: true,
  //     data: [10, 30, 31, 50, 40, 20, 10]
  //   }]
  // };

  // chart.setOption(option);
  return chart;
}

export default (props) => {
  const { buildingId, xType, dateRange } = props

  const [options, setOptions] = useState()
  const chartRef = useRef()
  const ec = useMemo(() => {
    const onInit = (...args) => {
      const chart = initChart(...args)
      chartRef.current = chart
      return chart
    }

    return { onInit }
  }, [])

  useEffect(() => {
    if (buildingId) {
      const [startDate, endDate] = dateRange
      getChannelLineChat({
        buildingId,
        type: xType,
        startDate: `${startDate}T00:00:00.000Z`,
        endDate: `${endDate}T23:59:59.999Z`,
      }).then((res) => {
        const { newCustomerDetail } = res
        const data = [[],[]];
        (newCustomerDetail || []).forEach((it) => {
          data[0].push(it.coordinate.substring(5))
          data[1].push(it.customerNum)
        })
        setOptions({
          xAxis: {
            type: 'category',
            data: data[0],
          },
          yAxis: {
            type: 'value',
          },
          series: [{
            type: 'line',
            smooth: true,
            data: data[1],
          }],
          color: ['#5470c6'],
        })
      })
    }
  }, [buildingId, dateRange, xType])

  useEffect(() => {
    if (options) {
      chartRef.current.setOption(options);
    }
  }, [options])

  return (
    <ec-canvas ec={ec} />
  )
}