export const initRankAreaEchart = ({
  echart,
  echarts,
  xAxisData,
  yAxisData,
  Score,
  currentCount,
  areaIndex,
}) => {
  echart.value.init(echarts, (chart) => {
    let option = {
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLine: {
          lineStyle: {
            color: '#E5E5E5',
          },
        },
        axisLabel: {
          color: '#999999',
        },
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      grid: {
        left: '16',
        right: '16',
        containLabel: false,
      },
      series: [
        {
          data: yAxisData,
          type: 'line',
          smooth: 0.6,
          smoothMonotone: 'x',
          symbol: 'none',
          lineStyle: {
            width: 2,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: 'rgba(30, 231, 255, 1)',
              },
              {
                offset: 0.33,
                color: 'rgba(36, 154, 255, 1)',
              },
              {
                offset: 0.66,
                color: 'rgba(111, 66, 251, 1)',
              },
              {
                offset: 1,
                color: 'rgba(111, 66, 251, 1)',
              },
            ]),
          },
          areaStyle: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(17,126,255,0.16)',
              },
              {
                offset: 1,
                color: 'rgba(17,128,255,0)',
              },
            ]),
          },
          markPoint: {
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: '#4080FF',
              borderColor: '#259BFF',
              borderWidth: 2,
            },
            data: [
              {
                xAxis: Score,
                yAxis: currentCount,
                label: {
                  show: true,
                  position: 'top',
                  color: '#4080FF',
                  fontSize: 12,
                },
              },
            ],
          },
          markArea: {
            itemStyle: {
              color: 'rgba(64, 128, 255, 0.1)',
            },
            data: [
              [
                {
                  xAxis: areaIndex + 30,
                },
                {
                  xAxis: areaIndex - 30,
                },
              ],
            ],
          },
          markLine: {
            symbol: ['none', 'none'],
            lineStyle: {
              type: 'dashed',
              color: '#4080FF',
              width: 1,
              opacity: 0.5,
            },
            data: [
              {
                xAxis: Score,
                label: {
                  show: false,
                },
              },
            ],
          },
        },
      ],
    }
    chart.setOption(option)
  })
}