import * as echarts from 'echarts';

const getMultiLineChart = (data) => {
  // 提取标题和系列数据
  // const { title, series } = data;
  const title = data.title
  const series = data.data

  // 动态生成 series 配置
  const echartsSeries = series.map((item, index) => ({
    name: item.name,
    type: 'line',
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)` // 随机颜色
        },
        {
          offset: 1,
          color: item.color ? `${item.color.replace('0.7', '0')}` : `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0)` // 随机颜色
        }
      ])
    },
    emphasis: {
      focus: 'series'
    },
    data: item.value
  }));

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      top: '15%',
      right: '5%',
      bottom: '5%',
      left: '5%',
      containLabel: true
    },
    legend: {
      show: true,
      top: 10,
      left: 'center'
    },
    color: series.map(item => item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`), // 动态颜色
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: title
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: echartsSeries
  };
};

export default getMultiLineChart;