slibra-module-web/src/views/analyse/config/echartOptions.js

import * as echarts from 'echarts';

export const getAreaOptions = ({ xAxisData, seriesList }) => {
  const series = seriesList.map((data, index) => {
    const i = !index;
    return {
      name: i ? '过去' : '未来',
      type: 'line',
      symbol: 'circle',
      showAllSymbol: true,
      symbolSize: 5,
      smooth: true,
      lineStyle: {
        width: 2,
        color: i ? "rgba(25,163,223,1)" : "rgba(36,175,83,1)",
        borderColor: 'rgba(0,0,0,.4)',
      },
      itemStyle: {
        color: i ? "#b7f9ff" : "#fff",
        borderColor: i ? "#2185da" : "#2ee055",
        borderWidth: 1,
        shadowColor: 'rgba(22, 137, 229)',
        shadowBlur: 1
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: i ? "rgba(25,163,223,.3)" : "rgba(48, 209, 136,.3)"
        },
        {
          offset: 1,
          color: i ? "rgba(25,163,223, 0)" : "rgba(48, 209, 136, 0)"
        }
        ], false),
        shadowColor: 'rgba(25,163,223, 0.5)',
        shadowBlur: 20
      },
      z: i ? 3 : 2,
      data
    }
  })

  return {
    backgroundColor: '#fff',
    tooltip: {
      trigger: "axis",
      show: true,
      formatter: function (params) {
        const [item] = params.filter(item => item.value);
        const color = item?.dataIndex <= 5 ? '#2185da' : '#2ee055'
        return `
          <div class="text-[12px]">
            <p>时间：${item.name + ':00'}</p>
            <p class="flex items-center space-x-[6px]">
              <span class="block w-[6px] h-[6px] rounded-full bg-[${color}]"></span>
              <span>${Number(item.value.toFixed(2))} mg/L</span>
            </p>
          </div>
          `
      },
    },
    grid: {
      top: '10',
      left: 60,
      right: '5%',
      bottom: '15%',
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#e0e6f1'
        },
      },
      axisLabel: {
        color: '#1F2328',
        fontSize: 12,
        formatter: function (data) {
          return data + ":00"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisTick: {
        show: false,
      },
      data: xAxisData
    }],
    yAxis: [{
      name: '',
      nameTextStyle: {
        fontSize: 12,
        align: 'right',
        padding: [10, 5],
      },
      min: 0,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#233653"
        }
      },
      axisLabel: {
        show: true,
        color: '#1F2328',
        padding: 0,
        // textStyle: {
        // },
        formatter: function (value) {
          if (value === 0) {
            return value
          }
          return value
        }
      },
      axisTick: {
        show: false,
      },
    }],
    series
  }
}

export const getOrderAreaOptions = ({ xAxisData, yAxisData, whichWay }) => {

  const color = [
    '#0FFEFF',
    '#FFCA06',
    '#3DD784',
    '#3D80FF',
    '#D35AE8',
    '#EC2E72',
    '#8B4513',
  ];

  const commonYAxisOptions = {
    name: '',
    nameTextStyle: {
      fontSize: 12,
      align: 'right',
      padding: [10, 5],
    },
    min: 0,
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
      },
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "#233653"
      }
    },
    axisLabel: {
      show: true,
      color: '#666',
      padding: 0,
      formatter: function (value) {
        return value
      }
    },
    axisTick: {
      show: false,
    },
  }

  const series = [];

  const arrKey = yAxisData.map(item => item.key);
  const isIncludeAssignKey = arrKey.includes('csSlqc') || arrKey.includes('jsSlq');
  const isOneSelfKey = isIncludeAssignKey && arrKey.length === 1;

  yAxisData.map((item, index) => {
    const itemColor = color[index];
    let yAxisIndex = Number(item.key === 'csSlqc' || item.key === 'jsSlq')

    if ( isOneSelfKey ) yAxisIndex = 0;

    series.push({
      name: item.title,
      type: 'line',
      symbol: 'circle',
      showAllSymbol: true,
      smooth: true,
      symbolSize: 5,
      yAxisIndex,
      lineStyle: {
        width: 2,
        color: itemColor,
        borderColor: 'rgba(0,0,0,.4)',
      },
      itemStyle: {
        color: itemColor,
        borderColor: itemColor,
        borderWidth: 3,
      },
      tooltip: {
        valueFormatter: function (value) {
          const wihteKeyList = ['jsSlq', 'csSlqc'];
          let unit = '';

          if(wihteKeyList.includes(item.key)) {
            unit = whichWay === 1 ? ' m³/h' : ' m³/d';
          } else if (item.key !== 'time') {
            unit = ' mg/L';
          }

          return value + unit;
        },
      },
      data: item.list,
    });
  });

  return {
    series,
    tooltip: {
      trigger: 'axis',
    },
    backgroundColor: '#fff',
    grid: {
      top: 40,
      // left: 40,
      // right: 50,
      bottom: 30,
    },
    legend: {
      orient: 'horizontal',
      fontSize: '20px',
      icon: 'rect',
      itemWidth: 6,
      itemHeight: 2,
      // formatter: ['{a|{name}}'].join('\n'),
      formatter: function (name) {
        const isNeedUnit  = name === '进水水量' || name === '出水水量';
        return isNeedUnit ? `{a|${name}(次)}` : `{a|${name}}`
      },
      textStyle: {
        rich: {
          a: {
            width: 20,
            color: '#666',
            fontSize: 10,
            lineHeight: 18,
          },
        },
      },
      right: '4',
      top: '10',
    },
    xAxis: [{
      type: "category",
      axisLabel: {
        color: "#666",
        fontSize: 12,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(127, 214, 255, .4)",
        },
      },
      splitLine: {
        show: true,
        interval: '0',
        lineStyle: {
          type: 'dashed',
        },
      },
      axisTick: {
        show: false,
      },
      boundaryGap: false,
      data: xAxisData
    }],
    yAxis: [
      {
        ...commonYAxisOptions,
        position: 'left'
      },
      {
        ...commonYAxisOptions,
        position: 'right',
        splitLine: {
          show: false
        }
      }
    ],
  }
}