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',
      icon: 'circle',
    },
    // color: series.map(item => item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`), // 动态颜色
    color: ['#055fc2', '#13a8a8', '#fa8c16', '#722ed1', '#73d13d', '#ce4f51', '#91caff', '#5f656c', '#fa541c', '#2f54eb', '#4096ff', '#222934', '#adc6ff', '#ffa940'], // 色彩调和的折线图配色方案
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: title
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: echartsSeries
  };
};

export default getMultiLineChart;