import * as echarts from "echarts";
const getColumnChart = (nameList, valueList, isPer) => {
  const colorList = ['#0958D9', '#0958D9']
  return {
    tooltip: {},
    grid: { top: '10%', right: '3%', bottom: '0%', left: '3%', containLabel: true },
    color: colorList,
    xAxis: {
      type: 'category',
      data: nameList,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        show: true,

        color: '#666',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: true, color: '#666' }, // ② Y 轴文字
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#E7F3FF"
        }
      },
    },
    graphic: [{                 // 右上角单位
      type: 'text',
      right: 20,
      top: 10,
      style: { text: '单位：万人', font: '14px sans-serif', fill: '#666' }
    }],
    series: [{
      type: 'bar',
      data: valueList.map((v, i) => {
        const name = nameList[i]          // 对应国家
        const iconPath = `/icon/${name}.png`
        return {
          value: v,
          // 1. 图标：inside + 向上偏移，嵌在柱子内部顶部
          label: {
            show: true,
            position: 'inside',
            offset: [0, -70],      // 向上顶整个图标高（28 px）
            align: 'center',
            formatter: () => '{icon|}',
            rich: {
              icon: {
                backgroundColor: { image: `/icon/${name}.png` },
                width: 18,
                height: 18
              },
              txt: {
                padding: [2, 0, 0, 0], // 文字与图标间距
                color: '#666',
                fontSize: 11
              }
            }
          },

        }
      }),
      barWidth: 20,                // 比图标稍宽，保证能包住
      itemStyle: {
        borderRadius: [16, 16, 0, 0], // 16 = 32/2 → 半圆
        color: params => {
          const colors = params.dataIndex < 3
            ? [colorList[0], 'rgba(255,255,255,0)']
            : [colorList[1], 'rgba(255,255,255,0)']
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: colors[0] },
            { offset: 1, color: colors[1] }
          ])
        }
      },
    }]
  }
}

export default getColumnChart