import * as echarts from 'echarts/core'
import {
  DatasetComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import { UniversalTransition, LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  DatasetComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  TransformComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  GridComponent,
  BarChart,
  CanvasRenderer
])

// 折线图
export const echartsFu1 = (dom: HTMLDivElement) => {
  const myChart = echarts.getInstanceByDom(dom) || echarts.init(dom)
  const option = {
    grid: {
      left: '-30', //距左边边框的距离
      right: '0%', //距右边边框的距离
      bottom: '10', //距下面边框的距离
      top: '15', //距上面边框的距离
      containLabel: true
    },

    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLine: {
        show: false //隐藏X轴
      },
      axisTick: {
        show: false //隐藏刻度线
      },
      axisLabel: {
        show: false //隐藏X轴文字
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [182, 193, 988, 546, 454, 1111, 1200],
        type: 'line'
        // showSymbol: false,
        // smooth: true
      },
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
        // showSymbol: false,
        // smooth: true
      }
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: (val: any) => {
        return `${val[0].axisValue}<br/>入馆${val[0].data}件<br/>入藏${val[1].data}件`
      }
    }
  }
  option && myChart.setOption(option)
}

const bingTypeArr = (type: string) => {
  return [
    {
      center: ['40%', '50%'],
      radius: ['50%', '80%'],
      label: {
        position: 'center',
        formatter: type,
        fontSize: 20,
        fontWeight: 'bold'
      }
    },
    {
      center: ['40%', '60%'],
      radius: ['40%', '60%'],
      label: {
        position: 'center',
        formatter: type,
        fontSize: 18,
        fontWeight: 'bold'
      }
    }
  ]
}

const binLegendArr = [
  {
    top: 'center',
    right: '0%',
    orient: 'vertical'
  },
  {
    top: '5%',
    right: '2%',
    orient: 'vertical'
  }
]

// 饼图
export const echartsFu2 = (dom: HTMLDivElement, type: string, index: number, data: any) => {
  const myChart = echarts.getInstanceByDom(dom) || echarts.init(dom)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: binLegendArr[index],
    series: [
      {
        ...bingTypeArr(type)[index],
        type: 'pie',

        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },

        labelLine: {
          show: false
        },
        data
      }
    ]
  }
  option && myChart.setOption(option)
}

// 2个半圆
export const echartsFu3 = (dom: HTMLDivElement) => {
  const myChart = echarts.getInstanceByDom(dom) || echarts.init(dom)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        type: 'pie',
        radius: ['70%', '100%'],
        center: ['26%', '80%'],
        // adjust the start and end angle
        startAngle: 180,
        endAngle: 360,
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      },
      {
        type: 'pie',
        radius: ['70%', '100%'],
        center: ['74%', '80%'],
        // adjust the start and end angle
        startAngle: 180,
        endAngle: 360,
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      }
    ]
  }
  option && myChart.setOption(option)
}

// 柱状图

export const echartsFu4 = (dom: HTMLDivElement) => {
  const myChart = echarts.getInstanceByDom(dom) || echarts.init(dom)
  const option = {
    grid: {
      left: '30', //距左边边框的距离
      right: '20', //距右边边框的距离
      bottom: '20', //距下面边框的距离
      top: '30', //距上面边框的距离
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110],
        type: 'bar'
      }
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: (val: any) => {
        return '展览数量' + val[0].data
      }
    }
  }
  option && myChart.setOption(option)
}
