Tuya Developer Forum

Code: Select all

import StatCharts from '@ray-js/stat-charts';
const devInfo = hooks.useDevInfo();
  const [chartProps, setChartProps] = useState<SanChartTypeProps>({
    // startDate: oneDate.getFullYear().toString() + '01',
    // endDate: '',
    startDate: '20240301',
    endDate: '20240327',
    chartType: '1day',
    calType: 'sum',
  })

      <StatCharts
        style={{
          padding: 0,
          margin: 0,
          marginTop: 24,
          background: 'none',
          color: '#999'
        }}
        devIdList={[devInfo.devId]} // 设备 id
        dpList={[{ id: 128, name: Strings.getLang('chart_electricity_generation') }, { id: 129, name: Strings.getLang('chart_grid_usage') }]} // 功能点 id 及 名称
        colors={['#DAC58E','#00B473']}
        unit={['w','w']} // 数据单位
        range={chartProps.chartType} // 以每个月为一个点
        type={chartProps.calType} // 统计类型, 统计该月的平均值
        startDate={chartProps.startDate}// 数据开始时间 1月开始
        endDate={chartProps.endDate}// 数据结束时间 12月结束
        // count={25} // 副标题上的数据
        theme={'dark'}
        // debug={true}
        chartType={'bar'} // 折线图
        dataFill={0}
        dataTransformer={(originData) => {
          console.log(originData)
          return originData;
        }}
      />

Code: Select all

chartProps = {
	calType: "sum"
	chartType: "1month"
	endDate: "202412"
	startDate: "202401"
}

Code: Select all

chartProps = {
	calType: "sum"
	chartType: "1day"
	endDate: "20240327"
	startDate: "20240301"
}