export const pieChart2 = {
  legend: {
    bottom: 0,
    itemGap: 14,
    itemWidth: 16,
    itemHeight: 5,
    textStyle: {color: "#fff", fontSize: 14}
  },
  grid: {
    height: 260
  },
  xAxis: {show: false},
  yAxis: {show: false},
  tooltip: {
    backgroundColor: "rgba(14, 51, 111, 0.9)",
    borderColor: "#1A6ABC",
    textStyle: {color: "#fff"}
  },
  series: {
    type: "pie",
    minShowLabelAngle: 10,
    radius: [70, 81],
    itemStyle: {
      borderColor: "#fff",
      borderWidth: 2
    },
    label: {
      color: "#A8D7F3",
      fontSize: 14,
      formatter: "{name|{b}}\n{v|{d}%}",
      minMargin: 5,
      edgeDistance: 10,
      lineHeight: 22,
      rich: {
        v: {
          color: "#fff"
        }
      }
    },
    labelLine: {},
    labelLayout: function (params) {
      let points = params.labelLinePoints,
          isLeft = points[2][0] < points[1][0]
      points[2][0] =
          points[2][0] + (params.labelRect.width + 4) * (isLeft ? -1 : 1)
      return {
        labelLinePoints: points
      }
    }
  },
  render: (h, params) => {
    const formatNum = num => {
      if (num >= 10000000) {
        return num / 10000000 + "千万"
      }

      if (num >= 10000) {
        return num / 10000 + "万"
      }

      return parseFloat(num.toFixed(2))
    }

    let total = params.data.reduce((t, e) => {
      return t + Number(Object.values(e)?.[1] || 0)
    }, 0)
    return h(
        "div",
        {
          style: {
            height: "162px",
            width: "162px",
            color: "#8BCCFF",
            left: "50%",
            top: "50%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "column",
            position: "absolute",
            transform: "translate(-50%,-50%)",
            backgroundImage: `url('https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie2Circle.png')`,
            backgroundPosition: "center"
          }
        },
        [
          h(
              "span",
              {style: {fontSize: "28px", color: "#fff", fontFamily: "DIN"}},
              formatNum(total)
          ),
          h("span", null, "总量")
        ]
    )
  }
}
export const barChart1 = {
  legend: {
    right: 0,
    itemHeight: 5,
    itemWidth: 16,
    textStyle: { color: '#fff' }
  },
  yAxis: {
    nameGap: 23,
    minInterval: 1,
    splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
    axisLabel: { color: '#fff' },
    axisPointer: { show: false }
  },
  axisPointer: {
    type: 'shadow',
    triggerTooltip: false,
    shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
  },
  color: [
    {
      type: 'linear',
      x: 0,
      x2: 0,
      y: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: 'rgba(66, 187, 255, 1)' },
        { offset: 1, color: 'rgba(37, 143, 255, 0.2)' }
      ]
    },
    {
      type: 'linear',
      x: 0,
      x2: 0,
      y: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: 'rgba(66, 255, 254, 1)' },
        { offset: 1, color: 'rgba(37, 255, 246, 0.2)' }
      ]
    },
    {
      type: 'linear',
      x: 0,
      x2: 0,
      y: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: 'rgba(97, 253, 185, 1)' },
        { offset: 1, color: 'rgba(97, 253, 185, 0.2)' }
      ]
    },
    {
      type: 'linear',
      x: 0,
      x2: 0,
      y: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: 'rgba(253, 108, 57, 1)' },
        { offset: 1, color: 'rgba(253, 108, 57, 0.2)' }
      ]
    },
    {
      type: 'linear',
      x: 0,
      x2: 0,
      y: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: 'rgba(248, 187, 25, 1)' },
        { offset: 1, color: 'rgba(55, 39, 5, 1)' }
      ]
    }
  ],
  daemon: {
    type: 'bar',
    label: {
      show: true,
      position: 'top',
      color: '#fff',
      formatter: e => {
        return e.data[e.seriesName] || ''
      }
    },
    barWidth: 16,
    barCategoryGap: 40,
    itemStyle: {}
  }
}