import * as echarts from 'echarts';
export interface OptionType {
  themeColor?: string;
  title?: any;
  series: any[];
}
const baseConfig = {
  baseColor: '#aaa',
};
const scale = 1;
const rich = {
  yellow: {
    color: '#ffc72b',
    fontSize: 30 * scale,
    padding: [5, 4],
    align: 'center',
  },
  total: {
    color: '#ffc72b',
    fontSize: 40 * scale,
    align: 'center',
  },
  white: {
    color: '#fff',
    align: 'center',
    fontSize: 14 * scale,
    padding: [21, 0],
  },
  blue: {
    color: '#49dff0',
    fontSize: 16 * scale,
    align: 'center',
  },
  hr: {
    borderColor: '#0b5263',
    width: '100%',
    borderWidth: 1,
    height: 0,
  },
};
export const optionPie = {
  title: {
    text: '总考生数',
    left: 'center',
    top: '53%',
    padding: [24, 0],
    textStyle: {
      color: '#fff',
      fontSize: 18 * scale,
      align: 'center',
    },
  },
  legend: {
    selectedMode: false,
    formatter: (value: any) => {
      return '{total|' + 100 + '}';
    },
    data: ['高等教育学'],
    itemGap: 50,
    left: 'center',
    top: 'center',
    icon: 'none',
    align: 'center',
    textStyle: {
      color: '#fff',
      fontSize: 16 * scale,
      rich: rich,
    },
  },
  series: [
    {
      name: '总考生数量',
      type: 'pie',
      radius: ['42%', '50%'],
      hoverAnimation: false,
      color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
      label: {
        normal: {
          formatter: '{white|{b}}\n{hr|}\n{yellow|{c} }\n{blue|{d}%}',
          rich: rich,
          fontSize: 18,
        },
      },
      labelLine: {
        normal: {
          length: 55 * scale,
          length2: 0,
          lineStyle: {
            color: '#0b5263',
          },
        },
      },
      data: [],
    },
  ],
};

export const optionLine = {
  title: {
    textStyle: {
      color: '#00ffcc',
    },
  },
  grid: {
    top: 100,
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(255,255,255,0)', // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: 'rgba(255,255,255,1)', // 100% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,0)', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        formatter: '{value}',
        fontSize: 14,
        margin: 20,
        textStyle: {
          color: '#7ec7ff',
        },
      },
      axisLine: {
        lineStyle: {
          color: '#243753',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#243753',
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  yAxis: [
    {
      boundaryGap: false,
      type: 'value',
      axisLabel: {
        textStyle: {
          color: '#7ec7ff',
        },
      },
      nameTextStyle: {
        color: '#fff',
        fontSize: 12,
        lineHeight: 40,
      },
      splitLine: {
        lineStyle: {
          color: '#243753',
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#283352',
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: '报名',
      type: 'line',
      smooth: true,
      showSymbol: true,
      symbolSize: 8,
      zlevel: 3,
      itemStyle: {
        color: '#19a3df',
        borderColor: '#a3c8d8',
      },
      lineStyle: {
        normal: {
          width: 6,
          color: '#19a3df',
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(88,255,255,0.2)',
              },
              {
                offset: 0.8,
                color: 'rgba(88,255,255,0)',
              },
            ],
            false,
          ),
        },
      },
      data: [],
    }
  ]
};

export const option = {
  title: {
    text: 'Stacked Line',
    fontSize:'30px'
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['Email', 'Union', 'Video Ads', 'Direct', 'Search Engine'],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: 'Union',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
  ],
};
export const optionRadar = {
  color: ['#4A99FF', '#4BFFFC'], //颜色,
  legend: {
    orient: 'vertical',
    icon: 'circle', //图例形状
    data: ['车辆数', '设计车位'], //图例
    bottom: 35,
    right: 40,
    itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
    itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
    itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
    textStyle: {
      fontSize: 14,
      color: '#00E4FF',
    },
  },
  radar: {
    // shape: 'circle',
    name: {
      textStyle: {
        color: '#fff',
        fontSize: 16,
      },
    },
    indicator: [
      {
        text: '小型车',
        max: 6000,
      },
      {
        text: '中型车',
        max: 5000,
      },
      {
        text: '大型车',
        max: 5000,
      },
      {
        text: '货车',
        max: 5000,
        //axisLabel: { show: true, textStyle: { fontSize: 18, color: '#333' } },
      },
      {
        text: '特种车',
        max: 5000,
      },
      {
        text: '贵宾车',
        max: 5000,
      },
    ],
    splitArea: {
      // 坐标轴在 grid 区域中的分隔区域，默认不显示。
      show: true,
      areaStyle: {
        // 分隔区域的样式设置。
        color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
      },
    },
    axisLine: {
      //指向外圈文本的分隔线样式
      lineStyle: {
        color: '#153269',
      },
    },
    splitLine: {
      lineStyle: {
        color: '#113865', // 分隔线颜色
        width: 1, // 分隔线线宽
      },
    },
  },
  series: [
    {
      type: 'radar',
      symbolSize: 8,
      // symbol: 'angle',
      data: [
        {
          value: [4300, 4700, 3600, 3900, 3800, 4200],
          name: '车辆数',
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4A99FF',
                // shadowColor: '#4A99FF',
                // shadowBlur: 10,
              },
              shadowColor: '#4A99FF',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: {
              // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#4A99FF',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0,0,0,0)',
                  },
                  {
                    offset: 1,
                    color: '#4A99FF',
                  },
                ],
                globalCoord: false,
              },
              opacity: 1, // 区域透明度
            },
          },
        },
        {
          value: [3200, 3000, 3400, 2000, 3900, 2000],
          name: '设计车位',
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#4BFFFC',
                // shadowColor: '#4BFFFC',
                // shadowBlur: 10,
              },
              shadowColor: '#4BFFFC',
              shadowBlur: 10,
            },
          },
          areaStyle: {
            normal: {
              // 单项区域填充样式
              color: {
                type: 'linear',
                x: 0, //右
                y: 0, //下
                x2: 1, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#4BFFFC',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(0,0,0,0)',
                  },
                  {
                    offset: 1,
                    color: '#4BFFFC',
                  },
                ],
                globalCoord: false,
              },
              opacity: 1, // 区域透明度
            },
          },
        },
      ],
    },
  ],
};
export const optionBar = {
  title: {
    text: '2019年销售水量和主营业务收入对比',
    textStyle: {
      align: 'center',
      color: '#fff',
      fontSize: 20,
    },
    top: '3%',
    left: '10%',
  },
  grid: {
    top: '25%',
    bottom: '10%', //也可设置left和right设置距离来控制图表的大小
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      label: {
        show: true,
      },
    },
  },
  legend: {
    data: ['销售水量', '主营业务'],
    top: '15%',
    textStyle: {
      color: '#ffffff',
    },
  },
  xAxis: {
    data: [
      '当年',
      '去年同',
      '全年',
      '滚动',
      '全年目标值',
    ],
    axisLine: {
      show: true, //隐藏X轴轴线
      lineStyle: {
        color: '#01FCE3',
      },
    },
    axisTick: {
      show: true, //隐藏X轴刻度
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#ebf8ac', //X轴文字颜色
      },
    },
  },
  yAxis: [
    {
      type: 'value',
      name: '亿元',
      nameTextStyle: {
        color: '#ebf8ac',
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#FFFFFF',
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#ebf8ac',
        },
      },
    },
    {
      type: 'value',
      name: '同比',
      nameTextStyle: {
        color: '#ebf8ac',
      },
      position: 'right',
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        formatter: '{value} %', //右侧Y轴文字显示
        textStyle: {
          color: '#ebf8ac',
        },
      },
    },
    {
      type: 'value',
      gridIndex: 0,
      min: 50,
      max: 100,
      splitNumber: 8,
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
        },
      },
    },
  ],
  series: [
    {
      name: '主营业务',
      type: 'bar',
      barWidth: 15,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#00FFE3',
            },
            {
              offset: 1,
              color: '#4693EC',
            },
          ]),
        },
      },
      data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
    },
  ],
};
export const optionGauge = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%',
  },
  grid: {
    left: '10%',
    right: '10%',
    bottom: '10%',
    top: '10%',
    containLabel: true,
  },
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      detail: {
        formatter: '{value}',
      },
      axisLine: {
        lineStyle: {
          color: [[1, baseConfig.baseColor]],
          width: 3,
        },
      },
      splitLine: {
        distance: -18,
        length: 12,
        lineStyle: {
          color: baseConfig.baseColor,
        },
      },
      axisTick: {
        distance: -12,
        length: 10,
        lineStyle: {
          color: baseConfig.baseColor,
        },
      },
      axisLabel: {
        distance: -20,
        color: baseConfig.baseColor,
        fontSize: 22,
      },
      data: [
        {
          value: 50,
          name: 'SCORE',
        },
      ],
    },
  ],
};