dvcp_v2_webapp/ui/dv/AiEchart/template/pie.js

export const pieChart1 = {
  legend: {
    right: 20,
    top: 'middle',
    orient: 'vertical',
    textStyle: {color: "#fff", fontSize: 14}
  },
  grid: {
    top: '0%',
    left: '0%',
    right: '0px',
    bottom: '0%'
  },
  xAxis: {show: false},
  yAxis: {show: false},
  tooltip: {},
  series: {
    type: "pie",
    radius: ['60%', '70%'],
    minShowLabelAngle: 10,
    itemStyle: {
      borderColor: 'rgba(128, 128, 128, 0.1)',
    },
    label: {
      show: false
    }
  }
}
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
      if (points) {
        const isLeft = points[2][0] < points[1][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 >= 100000) {
        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 pieChart3 = {
  legend: {
    right: 20,
    top: 'middle',
    orient: 'vertical',
    textStyle: {color: "#fff", fontSize: 14}
  },
  grid: {
    top: '0%',
    left: '0%',
    right: '0px',
    bottom: '0%'
  },
  xAxis: {show: false},
  yAxis: {show: false},
  tooltip: {},
  series: {
    type: "pie",
    minShowLabelAngle: 10,
    radius: [50, 71],
    itemStyle: {
      borderColor: "#8d1419",
      borderWidth: 2
    },
    label: {
      show: false
    },
    labelLine: {}
  },
  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%",
            zIndex: '-1',
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "column",
            position: "absolute",
            transform: "translate(-50%,-50%)",
            backgroundPosition: "center"
          }
        },
        [
          h(
              'span',
              {
                style: {
                  'font-size': '32px',
                  'font-weight': 'bold',
                  'margin-bottom': '3px',
                  'color': '#CEE1FF',
                  'line-height': '28px',
                  'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.1)',
                  'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
                  '-webkit-background-clip': 'text',
                  '-webkit-text-fill-color': 'transparent'
                }
              },
              formatNum(total)
          ),
          h('span', {
            style: {
              'font-size': '16px',
              'color': '#CEE1FF',
              'line-height': '16px',
              'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.5)',
              'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
              '-webkit-background-clip': 'text',
              '-webkit-text-fill-color': 'transparent'
            }
          }, "总量")
        ]
    )
  }
}
export default {
  pieChart1, pieChart2, pieChart3
}