import * as echarts from "echarts";
const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5) => {
  const colors = ['#055FC2', '#CF4F51', '#FF964D', '#14A8A8', '#722FD1']
  const names = ['美国', '中国', '日本', '欧盟', '韩国']
  const dataArr = [dataY1, dataY2, dataY3, dataY4, dataY5]

  const series = dataArr.map((d, i) => ({
    name: names[i],
    type: 'line',
    symbol: 'none',
    lineStyle: { width: 1, color: colors[i] },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: colors[i] },
        { offset: 1, color: 'rgba(255,255,255,0)' }
      ])
    },
    // grid: { top: '10%', right: '3%', bottom: '0%', left: '3%', containLabel: true },

    data: d,
    emphasis: { focus: 'series' },
    symbol: 'circle',
    symbolSize: (val, params) =>
      params.dataIndex === d.length - 1 ? 6 : 0,   // 最后一个空心圆 10px

    // 空心效果：边框用线的颜色，内部无填充
    itemStyle: {
      color: 'transparent',          // 内部透明
      borderColor: colors[i],        // 边框跟线同色
      borderWidth: 2
    },

    // 2. 只给最后一个点显文字（可选）
    label: {
      show: false,
      position: 'right',
      formatter: (params) =>
        params.dataIndex === d.length - 1 ? names[i] : '', // 仅末尾
      // 空心效果：边框用线的颜色，内部无填充
      itemStyle: {
        color: 'transparent',          // 内部透明
        borderColor: colors[i],        // 边框跟线同色
        borderWidth: 2
      },

      color: colors[i],
      fontSize: 12,
      distance: 8
    },
    endLabel: {
      show: true,
      formatter: () => `{icon|}{txt|${names[i]}}`,
      rich: {
        icon: {
          backgroundColor: { image: `/icon/${names[i]}2.png` },
          width: 18,
          height: 18
        },
        txt: {
          padding: [0, 0, 0, 10], // 文字与图标间距
          color: colors[i],
          fontSize: 14
        }
      }
    },
  }))

  return {
    tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
    grid: { top: '5%', right: '0%', bottom: '0%', left: '0%', containLabel: true },
    xAxis: { type: 'category', boundaryGap: false, data: dataX },

    yAxis: {
      type: 'value', splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#E7F3FF"
        }
      },
    },
    legend: { show: false },   // 隐藏官方 legend
    color: colors,
    series
  }
}

export default getMultiLineChart