import * as echarts from 'echarts'

const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: function (params) {
        let res = params[0].name + '<br/>';
        params.forEach(item => {
            res += item.marker + item.seriesName + ': ' + item.value + (item.seriesName === '通过率' ? '%' : '') + '<br/>';
        });
        return res;
      }
    },
    grid: {
      width: '96%',
      height: '83%',
      top: '15%',
      right: '2%',
      bottom: '2%',
      left: '2%',
      containLabel: true
    },
    legend: {
      data: ['提出法案', '通过法案', '通过率'],
      show: true,
      top: 10,
      icon: 'circle',
      textStyle: {
        color: 'rgba(95, 101, 108, 1)',
        fontFamily: 'Microsoft YaHei',
        fontSize: '14px',
      }
    },
    color: ['#1677FF', '#FA8C16', '#D9001B'],
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: dataX,

        axisLine: {
            show: true,
            lineStyle: {
                color: '#e7f3ff',
            },
          },
          axisLabel: {
        show: true,
        textStyle: {
          color: 'rgba(95, 101, 108, 1)',
          fontFamily: 'Microsoft YaHei',
          fontsize: 14,
        }
      }
      }
    ],
    yAxis: [
      {
        type: 'value',
        position: 'left',
        // 纵轴单位只在纵轴上方显示一次（通过 axis.name），避免每个刻度重复显示
        name: '项',
        nameLocation: 'end',
        nameGap: 12,
        nameTextStyle: {
          color: '#666',
          fontSize: 14,
          fontWeight: 400,
          // 给单位一点点下移空间，使其更贴近顶部刻度数字的视觉基线
          padding: [0, 0, 6, -20]
        },
        axisLabel: {
            formatter: '{value}',
            color: '#666',
            fontSize: 14,
            fontWeight: 400
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#e7f3ff',
                type: 'dashed',
            }
        },
      },
      {
        type: 'value',
        position: 'right',
        min: 0,
        max: 100,
        interval: 20,
        // 通过率单位仅展示一次
        name: '%',
        nameLocation: 'end',
        nameGap: 12,
        nameTextStyle: {
          color: '#666',
          fontSize: 14,
          fontWeight: 400,
          padding: [0, 0, 6, 20]
        },
        axisLabel: {
            formatter: '{value}',
            color: '#666',
            fontSize: 14,
            fontWeight: 400
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#e7f3ff',
                type: 'dashed',
            }
        },
      }
    ],
    series: [
      {
        name: '提出法案',
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(22, 119, 255, 0.4)' // 起始颜色
          }, {
            offset: 1,
            color: 'rgba(22, 119, 255, 0)' // 结束颜色
          }])
        },
        itemStyle: {
            color: '#1677FF'
        },
        data: dataY1
      },
      {
        name: '通过法案',
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(250, 140, 22, 0.4)' // 起始颜色
          }, {
            offset: 1,
            color: 'rgba(250, 140, 22, 0)' // 结束颜色
          }])
        },
        itemStyle: {
            color: '#FA8C16'
        },
        data: dataY2
      },
      {
        name: '通过率',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 4,
        lineStyle: {
            type: 'dashed',
            width: 2
        },
        itemStyle: {
            color: '#D9001B'
        },
        data: dataY3
      }
    ]
  }
}

export default getMultiLineChart
