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: {
        normal: {
          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: {
        normal: {
          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: {
        textStyle: {
          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,
        textStyle: {
          color: '#1F2328',
          // align: 'right',
          padding: 0
        },
        formatter: function (value) {
          if (value === 0) {
            return value
          }
          return value
        }
      },
      axisTick: {
        show: false,
      },
    }],
    series
  }
}

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

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

  const series = [];

  yAxisData.map((item, index) => {
    const itemColor = color[index];
    series.push({
      name: item.title,
      type: 'line',
      symbol: 'circle',
      showAllSymbol: true,
      smooth: true,
      symbolSize: 5,
      lineStyle: {
        width: 2,
        color: itemColor,
        borderColor: 'rgba(0,0,0,.4)',
      },
      itemStyle: {
        color: itemColor,
        borderColor: itemColor,
        borderWidth: 3,
      },
      tooltip: {
        valueFormatter: function (value) {
          return value + 'mg/L';
        },
      },
      data: item.list,
    });
  });

  return {
    series,
    tooltip: {
      trigger: 'axis',
    },
    backgroundColor: '#fff',
    grid: {
      top: 30,
      left: 40,
      right: 40,
      bottom: 30,
    },
    legend: {
      orient: 'horizontal',
      fontSize: '20px',
      icon: 'rect',
      itemWidth: 10,
      itemHeight: 2,
      formatter: ['{a|{name}}'].join('\n'),
      textStyle: {
        rich: {
          a: {
            width: 20,
            color: '#666',
            fontSize: 10,
            lineHeight: 18,
          },
        },
      },
      right: '4',
      top: '6',
    },
    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: [{
      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,
      },
    }],
  }
}