echartData.js

import moment from 'moment';

export const lineChartData = (opts = {}) => {
  const colorList = opts.colorList || [];
  const data = opts.data || [];
  const unit = data?.[0]?.unit || '-'


  const xData = [];
  const yyData = [];
  if (data.length > 0 && data[0].trendIndexList.length > 0) {
    data[0].trendIndexList.forEach((item) => {
      const timestamp =moment(parseInt(item.xvalueDateTime, 10))
        .format("YYYY-MM-DD HH:mm:ss")
      xData.push(timestamp);
    });
    data.forEach((item, index) => {
      const yData = [];
      item?.trendIndexList.forEach((child) => {
        yData.push(child.yvalue);
      });
      yyData.push({
        name: {samePeriodLastYear: '', lastPeriod: '', }[item.code] || item.name,
        type: 'line',
        data: yData,
        itemStyle: {
          color: colorList[index] || '#1B65FF',
        },
      });
    });
  }



  return data.length > 0
    ? {
      grid: {
        top: '10%',
        left: '0',
        right: '3%',
        bottom: 40,
        containLabel: true,
      },
      xAxis: {
        left: '5%',
        type: 'category',
        boundaryGap: false,
        splitLine: {
          show: false,
        },
        data: xData
      },
      yAxis:  {
        name: unit ? `单位： ${unit}` : '',
        type: 'value',
        splitLine: { show: false },
      },
      dataZoom: [
        // { type: 'slider' },
        {
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
          showDetail: false,
          bottom: 0
        },
      ],

      legend: {
        top: '0',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'line' },
        // formatter: params => {
        //   // console.log(params)
        //   const label = params[0].axisValueLabel && moment(parseInt(params[0].axisValueLabel)).format("YYYY-MM-DD");
        //   return ReactDOMServer.renderToString(<ToolTip title={label} params={params}/>)
        // }
      },
      series: yyData,
    }
    : {};
};