slibra-module-web/src/views/screen/ScreenViewBlack/config/echartOption.js

export const getBarOptions = (currentData = []) => {
  const xAxis = ["1#好氧池硝酸盐", "2#好氧池硝酸盐", "1#缺氧氨氮", "2#缺氧氨氮", "二沉池正磷酸盐"];
  const rangeData = [12, 12, 15, 15, 0.4];

  let option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      bottom: '4%',
      top: "6%",
      left: "5%",
      right: "2%",
      containLabel: true,
      // bottom: "4%",
      // top: "6%",
      // left: "10%",
      // right: "2%",
    },
    legend: {
      show: false,
    },
    xAxis: [
      {
        type: "category",
        data: xAxis,
        axisLabel: {
          interval: 0,
          show: true,
          fontSize: '12px',
          color: "#fff",
        },
        axisLine: {
          show: true,
          lineStyle: {
            show: true,
            color: "#3f4a59",
          },
        },
        axisTick: {
          show: false,
        },
      },

    ],
    yAxis: [
      {
        splitNumber: 4,
        type: "value",
        axisLabel: {
          show: true,
          fontSize: '12px',
          color: "#fff"
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#3f4a59",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "#3f4a59",
          },
        }
      },
    ],
    series: [
      {
        name: 'maxdata',
        type: 'custom',
        itemStyle: {
          color: 'rgba(216, 230, 255, .1)'
        },
        renderItem: function (params, api) {
          //获取对应类目的axisTick中心点坐标
          var start = api.coord([api.value(0)])

          //通过坐标系的宽度和类目数，计算单个类目的背景
          var width = (params.coordSys.width / 7) * 0.7

          return {
            type: 'rect',
            shape: {
              // 相对左上角坐标
              x: start[0] - width / 2,
              y: params.coordSys.y,
              width: width,
              height: params.coordSys.height
            },
            style: api.style()
          }
        },
        data: currentData.map(() => 0)
      },
      {
        name: "当前值",
        type: "bar",
        itemStyle: {
          borderRadius: [2, 2, 0, 0],
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FBB03B",
              },
              {
                offset: 1,
                color: "rgba(246,115,7, 0.1)",
              },
            ],
          },
        },
        barWidth: 8,
        data: currentData,
      },
      {
        name: "标准值",
        type: "bar",
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#17FFC9",
              },
              {
                offset: 1,
                color: "rgba(10,184,4, 0.1)",
              },
            ],
          },
        },
        barWidth: 8,
        // 展示柱图背景
        data: rangeData,
      },
      {
        // 柱形顶部色块
        name: '',
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: '#FF6737'
          }
        },
        tooltip: {
          show: false
        },
        symbolRepeat: false,
        symbolMargin: 8,
        symbol: 'rect',
        symbolClip: false,
        symbolSize: [7, 2],
        symbolPosition: 'end',
        symbolOffset: [-5, 0],
        data: currentData,
        width: 1,
        z: 0,
        zlevel: 1
      },
      {
        // 柱形顶部色块
        name: '',
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: '#00AB84'
          }
        },
        tooltip: {
          show: false
        },
        symbolRepeat: false,
        symbolMargin: 8,
        symbol: 'rect',
        symbolClip: false,
        symbolSize: [7, 2],
        symbolPosition: 'end',
        symbolOffset: [5, 0],
        data: rangeData,
        width: 1,
        z: 0,
        zlevel: 1
      },
    ],
  };

  return option;
}

export const getPieOptions = (optionsData) => {
  let colors = ['#00A0E9', '#00AB84', '#C6A3FF', '#E9D0A1', '#45D3F2']

  function getParametricEquation(
    startRatio,
    endRatio,
    isSelected,
    isHovered,
    k,
    height,
    i
  ) {
    // 计算
    let midRatio = (startRatio + endRatio) / 2;
  
    let startRadian = startRatio * Math.PI * 2;
    let endRadian = endRatio * Math.PI * 2;
    let midRadian = midRatio * Math.PI * 2;
  
    // 如果只有一个扇形，则不实现选中效果。
    if (startRatio === 0 && endRatio === 1) {
      isSelected = false;
    }
  
    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    k = typeof k !== "undefined" ? k : 1 / 3;
  
    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
    let offsetZ = i == 1 ? 2 : 0;
    // 计算高亮效果的放大比例（未高亮，则比例为 1）
    let hoverRate = isHovered ? 1.05 : 1;
  
    // 返回曲面参数方程
    return {
      u: {
        min: -Math.PI,
        max: Math.PI * 3,
        step: Math.PI / 32,
      },
  
      v: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },
  
      x: function (u, v) {
        if (u < startRadian) {
          return (
            offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        if (u > endRadian) {
          return (
            offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
      },
  
      y: function (u, v) {
        if (u < startRadian) {
          return (
            offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        if (u > endRadian) {
          return (
            offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
      },
  
      z: function (u, v) {
        if (u < -Math.PI * 0.5) {
          return Math.sin(u);
        }
        if (u > Math.PI * 2.5) {
          return Math.sin(u);
        }
        return Math.sin(v) > 0 ? 1 * height : -1;
      },
    };
  }
  // 生成模拟 3D 饼图的配置项
  function getPie3D(pieData, internalDiameterRatio) {
    let series = [];
    let sumValue = 0;
    let startValue = 0;
    let endValue = 0;
    let legendData = [];
    let k =
      typeof internalDiameterRatio !== "undefined"
        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
        : 1 / 3;
  
    // 为每一个饼图数据，生成一个 series-surface 配置
    for (let i = 0; i < pieData.length - 1; i++) {
      sumValue += pieData[i].value;
  
      let seriesItem = {
        name:
          typeof pieData[i].name === "undefined"
            ? `series${i}`
            : pieData[i].name,
        type: "surface",
        parametric: true,
        wireframe: {
          show: false,
        },
        pieData: pieData[i],
        itemStyle: {
          color: pieData[i].color, // 自定义颜色
          opacity: '0.7'
        },
        pieStatus: {
          selected: false,
          hovered: false,
          k: k,
        },
      };
  
      if (typeof pieData[i].itemStyle != "undefined") {
        let itemStyle = {};
  
        typeof pieData[i].itemStyle.color != "undefined"
          ? (itemStyle.color = pieData[i].itemStyle.color)
          : null;
        typeof pieData[i].itemStyle.opacity != "undefined"
          ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
          : null;
  
        seriesItem.itemStyle = itemStyle;
      }
      series.push(seriesItem);
    }
  
    for (let i = 0; i < series.length; i++) {
      endValue = startValue + series[i].pieData.value;
      series[i].pieData.startRatio = startValue / sumValue;
      series[i].pieData.endRatio = endValue / sumValue;
      series[i].parametricEquation = getParametricEquation(
        series[i].pieData.startRatio,
        series[i].pieData.endRatio,
        false,
        false,
        k,
        // 调整扇形高度
        i === 0 ? 10 : 10,
        i,
        series[i].pieData.value
      );
  
      startValue = endValue;
  
      legendData.push(series[i].name);
    }
    return series;
  }
  
  const series = getPie3D(optionsData, 0.6); // 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
  series.push({
    name: "pie2d",
    type: "pie",
    startAngle: 2, //起始角度，支持范围[0, 360]。
    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    // radius: ["50%", "60%"],
    // center: ["62%", "50%"],
    data: optionsData,
    itemStyle: {
      opacity: 0,
    },
    labelLine: {
      show: false
    },
    label: {
      show: false,
      position: 'center'
    },
  });
  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  let option = {
    animation: true,
    tooltip: {
      formatter: (params) => {
         if (params.seriesName !== 'mouseoutSeries') {
          const { name, value, color} = optionsData[params.seriesIndex] ?? {};
            return `${name
               }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color
               };"></span>${value}` ;
         }
      },
   },
    title: {
      x: "center",
      top: "20",
      textStyle: {
        color: "#fff",
        fontSize: 22,
      },
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    grid3D: {
      show: false,
      boxHeight: 2.5,
      top: '-10%',
      // left: "8%",
      // bottom: "50%",
      viewControl: {
        // alpha: 38,
        // beta: 70,
        enabled: true,
        alpha: 30,
        beta: 55,
        distance: 150,
        rotateSensitivity: 0, //设置为0无法旋转
        zoomSensitivity: 0, //设置为0无法缩放
        panSensitivity: 0, //设置为0无法平移
        autoRotate: false, //自动旋转
        
        
        // beta: 325,
      //   autoRotate: false, // 自动旋转
      },
    },
    series: series,
  };

  // return option

  // let colors = ['#16d0ff', '#664bff', '#37a2da', '#ffdb5c', '#ff9f7f', '#9fe6b8', '#67e0e3', '#32c5e9', '#fb7293', "#9A60B4", "#ea7ccc"]
  // // 传入数据生成 option
  // const optionsData = [
  //   {
  //     name: "第一科室",
  //     value: 68,
  //   },
  //   {
  //     name: "第二科室",
  //     value: 52,
  //   },
  //   {
  //     name: "第三科室",
  //     value: 37,
  //   },
  //   {
  //     name: "第四科室",
  //     value: 58,
  //   },
  // ];
  // function getParametricEquation(
  //   startRatio,
  //   endRatio,
  //   isSelected,
  //   isHovered,
  //   k,
  //   height,
  //   i
  // ) {
  //   // 计算
  //   let midRatio = (startRatio + endRatio) / 2;
  
  //   let startRadian = startRatio * Math.PI * 2;
  //   let endRadian = endRatio * Math.PI * 2;
  //   let midRadian = midRatio * Math.PI * 2;
  
  //   // 如果只有一个扇形，则不实现选中效果。
  //   if (startRatio === 0 && endRatio === 1) {
  //     isSelected = false;
  //   }
  
  //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  //   k = typeof k !== "undefined" ? k : 1 / 3;
  
  //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  //   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  //   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  //   let offsetZ = i == 1 ? 2 : 0;
  //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
  //   let hoverRate = isHovered ? 1.05 : 1;
  
  //   // 返回曲面参数方程
  //   return {
  //     u: {
  //       min: -Math.PI,
  //       max: Math.PI * 3,
  //       step: Math.PI / 32,
  //     },
  
  //     v: {
  //       min: 0,
  //       max: Math.PI * 2,
  //       step: Math.PI / 20,
  //     },
  
  //     x: function (u, v) {
  //       if (u < startRadian) {
  //         return (
  //           offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
  //         );
  //       }
  //       if (u > endRadian) {
  //         return (
  //           offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
  //         );
  //       }
  //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
  //     },
  
  //     y: function (u, v) {
  //       if (u < startRadian) {
  //         return (
  //           offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
  //         );
  //       }
  //       if (u > endRadian) {
  //         return (
  //           offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
  //         );
  //       }
  //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
  //     },
  
  //     z: function (u, v) {
  //       if (u < -Math.PI * 0.5) {
  //         return Math.sin(u);
  //       }
  //       if (u > Math.PI * 2.5) {
  //         return Math.sin(u);
  //       }
  //       return Math.sin(v) > 0 ? 1 * height : -1;
  //     },
  //   };
  // }
  // // 生成模拟 3D 饼图的配置项
  // function getPie3D(pieData, internalDiameterRatio) {
  //   let series = [];
  //   let sumValue = 0;
  //   let startValue = 0;
  //   let endValue = 0;
  //   let legendData = [];
  //   let k =
  //     typeof internalDiameterRatio !== "undefined"
  //       ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
  //       : 1 / 3;
  
  //   // 为每一个饼图数据，生成一个 series-surface 配置
  //   for (let i = 0; i < pieData.length; i++) {
  //     sumValue += pieData[i].value;
  
  //     let seriesItem = {
  //       name:
  //         typeof pieData[i].name === "undefined"
  //           ? `series${i}`
  //           : pieData[i].name,
  //       type: "surface",
  //       parametric: true,
  //       wireframe: {
  //         show: false,
  //       },
  //       pieData: pieData[i],
  //       itemStyle: {
  //         color: colors[i], // 自定义颜色
  //         opacity: '0.7'
  //       },
  //       pieStatus: {
  //         selected: false,
  //         hovered: false,
  //         k: k,
  //       },
  //     };
  
  //     if (typeof pieData[i].itemStyle != "undefined") {
  //       let itemStyle = {};
  
  //       typeof pieData[i].itemStyle.color != "undefined"
  //         ? (itemStyle.color = pieData[i].itemStyle.color)
  //         : null;
  //       typeof pieData[i].itemStyle.opacity != "undefined"
  //         ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
  //         : null;
  
  //       seriesItem.itemStyle = itemStyle;
  //     }
  //     series.push(seriesItem);
  //   }
  
  //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  //   for (let i = 0; i < series.length; i++) {
  //     endValue = startValue + series[i].pieData.value;
  //     console.log(series[i]);
  //     series[i].pieData.startRatio = startValue / sumValue;
  //     series[i].pieData.endRatio = endValue / sumValue;
  //     series[i].parametricEquation = getParametricEquation(
  //       series[i].pieData.startRatio,
  //       series[i].pieData.endRatio,
  //       false,
  //       false,
  //       k,
  //       // 调整扇形高度
  //       i === 0 ? 10 : 10,
  //       i,
  //       series[i].pieData.value
  //     );
  
  //     startValue = endValue;
  
  //     legendData.push(series[i].name);
  //   }
  //   return series;
  // }
  
  // const series = getPie3D(optionsData, 0.6); // 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
  // series.push({
  //   name: "pie2d",
  //   type: "pie",
  //   label: {
  //     opacity: 1,
  //     fontSize: 14,
  //     lineHeight: 20,
  //     textStyle: {
  //       fontSize: 14,
  //       color: "#fff",
  //     },
  //   },
  //   labelLine: {
  //     length: 10,
  //     length2: 10,
  //   },
  //   startAngle: 2, //起始角度，支持范围[0, 360]。
  //   clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
  //   radius: ["50%", "60%"],
  //   center: ["62%", "50%"],
  //   data: optionsData,
  //   itemStyle: {
  //     opacity: 0,
  //   },
  //   labelLine: {
  //     show: false
  //   },
  //   label: {
  //     show: false,
  //     position: 'center'
  //   },
  // });
  // // 准备待返回的配置项，把准备好的 legendData、series 传入。
  // let option = {
    
  //   animation: true,
  //   tooltip: {
  //     show: false,
  //     textStyle: {
  //       fontSize: 14,
  //     },
  //   },
  //   title: {
  //     x: "center",
  //     top: "20",
  //     textStyle: {
  //       color: "#fff",
  //       fontSize: 22,
  //     },
  //   },
  //   labelLine: {
  //     show: true,
  //     lineStyle: {
  //       color: "#7BC0CB",
  //     },
  //     normal: {
  //       show: false,
  //       length: 10,
  //       length2: 10,
  //     },
  //   },
  //   label: {
  //     show: true,
  //     position: "outside",
  //     // formatter: "{b} {d}%",
  //     formatter: function (optionsData) {
  //       console.log('optionsData', optionsData)
  //       return (
  //         "{name|" +
  //         optionsData.name +
  //         "}" +
  //         " {value|" +
  //         optionsData.percent.toFixed(0) +
  //         "%}"
  //       );
  //     },
  //     rich: {
  //       name: {
  //         fontSize: 14,
  //         color: "#ffffff",
  //       },
  //       value: {
  //         fontSize: 14,
  //         color: "#ffffff",
  //       },
  //     },
  //     textStyle: {
  //       color: "#fff",
  //       fontSize: "14px",
  //     },
  //   },
  //   xAxis3D: {
  //     min: -1,
  //     max: 1,
  //   },
  //   yAxis3D: {
  //     min: -1,
  //     max: 1,
  //   },
  //   zAxis3D: {
  //     min: -1,
  //     max: 1,
  //   },
  //   grid3D: {
  //     show: false,
  //     boxHeight: 2,
  //     top: '-10%',
  //     // left: "8%",
  //     // bottom: "50%",
  //     // environment: "rgba(255,255,255,0)",
  //     viewControl: {
  //       alpha: 30,
  //       distance: 150,
  //       beta: 15,
  //       autoRotate: false, // 自动旋转

  // //       // alpha: 38,
  // //       // beta: 70,
  // //       enabled: true,
  // //       alpha: 30,
  // //       beta: 30,
  // //       distance: 150,
  // //       rotateSensitivity: 0, //设置为0无法旋转
  // //       zoomSensitivity: 0, //设置为0无法缩放
  // //       panSensitivity: 0, //设置为0无法平移
  // //       autoRotate: false, //自动旋转
        
  //     },
  //   },
  //   series: series,
  // };

  return option;

}