yudao-init/src/views/copilot/yield/options/double-ring-chart-options.js

export default ({
  titleValue,
  subtitle,
  previousSum,
  currentSum,
  subtitleSize,
  titleSize,
  targetSum,
  currentName,
  preName,
}) => ({
  grid: {
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
    containLabel: true,
  },
  tooltip: {
    trigger: "item",
    // extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
    // backgroundColor: '#001829',
    // borderColor: '#001829',
  },
  title: {
    text: '99.99%',
    left: "48.5%",
    top: "middle",
    itemGap: 12,
    textVerticalAlign:'auto',
    textAlign: "center",
    textStyle: {
      fontWeight: 400,
      fontSize: titleSize,
      color: "rgba(223,241,254,.8)",
    },
    subtext: `\u2002${subtitle}\u2002`,
    subtextStyle: {
      fontSize: subtitleSize,
      fontWeight: 100,
      color: "rgba(255,255,255,.7)",
      align: "right",
    },
  },
  series: [
    // 背景 series
    {
      type: "pie",
      name: "当前目标",
      radius: ["74%", "86%"],
      center: ["50%", "48%"],
      emptyCircleStyle: {
        color: "#042c5f33",
      },
    },
    // 数据 series
    {
      type: "pie",
      radius: ["74%", "86%"],
      center: ["50%", "48%"],
      avoidLabelOvervlap: false,
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: currentSum,
          name: currentName,
          selected: false,
          tooltip: {
          backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
          extraCssText: 'padding:0;border-width:0',
          formatter:`
              <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
              <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
                <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
              </div>
              `
          },
          itemStyle: {
            borderJoin: "round",
            borderCap: "round",
            borderWidth: 12,
            borderRadius: "50%",
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "#4CF0E811" },
                { offset: 1, color: "#4CF0E8" },
              ],
            },
          },
        },
        {
          value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
          name: currentName,
           tooltip: {
              backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
            extraCssText: 'padding:0;border-width:0',
            formatter:`
                <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
                  <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
                <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
                </div>
                `
          },
          itemStyle: { color: "transparent" },
          label: { show: false },
        },
      ],
    },
    // 数据 series2 - 2023累计
    {
      type: "pie",
      radius: ["61%", "74%"],
      center: ["50%", "48%"],
      avoidLabelOvervlap: false,
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      data: [
        {
          value: 99.99,
          name: preName,
          selected: false,
          tooltip: {
            backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
            extraCssText: 'padding:0;border-width:0',
            formatter:`
                <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
                  <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
                <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
                </div>
                `
          },
          itemStyle: {
            borderJoin: "round",
            borderCap: "round",
            borderWidth: 12,
            borderRadius: "50%",
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "#1065ff66" },
                { offset: 1, color: "#1065ff" },
              ],
            },
          },
        },
        {

          value:previousSum === 0 ? 1 : 0,
          name: preName,
          tooltip: {
            backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
            extraCssText: 'padding:0;border-width:0',
            formatter:`
                <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
                  <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
                  <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
                   <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
                </div>
                `
          },
          itemStyle: { color: "transparent" },
          label: { show: false },
        },
      ],
    },
  ],
});