U 领导层首页面修改 等

he wei

2023-07-20 5748fde24928bbda455fb3b2f764b0d18efe683c

 src/views/home/components/bar-3d.vue

@@ -10,11 +10,11 @@
    },
    unit: {
      type: String,
      default: ""
      default: "",
    },
  },
  data() {
    return {}
    return {};
  },
  methods: {
    fullScreen() {
@@ -31,129 +31,241 @@
      let sName = this.name;
      // let yName = this.yName;
      let colorList = data.colorList || [
        ['#FFBC1B', '#FF6804'],
        ['#67FDC6', '#00F5F5']
        ["#FFBC1B", "#FF6804"],
        ["#67FDC6", "#00F5F5"],
      ];
      let min = sData.length == 0 ? 0 : function (data) {
        let min = data.min;
        if (min == Infinity) {
          return 0;
        }
        min = Math.min(0, Math.round((min - min * 0.2) * 100) / 100);
        return min;
      };
      let max = sData.length == 0 ? 0 : function (data) {
        let max = data.max;
        if (max == -Infinity) {
          max = 1;
        }
        max = Math.max(Math.round((max + max * 0.2) * 100) / 100);
        return max;
      };
      let maxD = Math.max(...sData);
      if (maxD <= 0) {
        maxD = 1;
      } else {
        maxD = Math.round(maxD * 1.2 * 100) / 100;
      }

      let fillData = sData.map(() => maxD);

      // let min =
      //   sData.length == 0
      //     ? 0
      //     : function (data) {
      //         let min = data.min;
      //         if (min == Infinity) {
      //           return 0;
      //         }
      //         min = Math.min(0, Math.round((min - min * 0.2) * 100) / 100);
      //         return min;
      //       };
      // let max =
      //   sData.length == 0
      //     ? 0
      //     : function (data) {
      //         let max = data.max;
      //         if (max == -Infinity) {
      //           max = 1;
      //         }
      //         max = Math.max(Math.round((max + max * 0.2) * 100) / 100);
      //         return max;
      //       };
      let min = 0;
      let max =
        sData.length == 0
          ? 0
          : function (data) {
              let max = data.max;
              if (max == -Infinity) {
                max = 1;
              }
              // max = Math.max(Math.round((max + max * 0.2) * 100) / 100);
              return max;
            };

      return {

        series: [
          {//三个最低下的圆片
          // 背景
          {
            data: fillData,
            tooltip: {
              show: false,
            },
            type: "bar",
            barMaxWidth: "45",
            xAxisIndex: 1,
            z: 1,
            itemStyle: {
              normal: {
                color: "rgba(61,187,255,.16)",
              },
            },
          },
          // 背景顶
          {
            name: "",
            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            barMaxWidth: "45",
            symbol: "circle",
            symbolOffset: [0, "-50%"],
            // symbolOffset: ["50%", "-50%"],
            symbolPosition: "end",
            symbolSize: [45, 20],
            xAxisIndex: 1,
            // zlevel: 1,
            z: 3,
            itemStyle: {
              normal: {
                color: "rgba(28,152,205, .8)",
              },
            },
            data: fillData,
          },
          {
            //三个最低下的圆片
            name: "",
            type: "pictorialBar",
            symbol: 'circle',
            symbol: "circle",
            symbolSize: [45, 25],
            symbolOffset: [0, '50%'],
            symbolOffset: [0, "50%"],
            z: 11,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                return new ECharts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#027FCB' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0082ff'// 100% 处的颜色
                }], false)
              }
                return new ECharts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#027FCB", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0082ff", // 100% 处的颜色
                    },
                  ],
                  false
                );
              },
            },
            tooltip: {
              show: false,
            },
            "data": sData.map((v) => 1)
            data: sData.map((v) => 1),
          },


          //下半截柱状图
          {
            name: sName,
            type: 'bar',
            type: "bar",
            barWidth: 45,
            barGap: '-100%',
            barGap: "-100%",
            z: 12,
            label: {
              show: true,
              position: "top",
              offset: [0, -10],
              fontSize: 20,
              fontWeight: 'bolder',
              color: '#ebf006'
              fontWeight: "bolder",
              color: "#ebf006",
            },
            itemStyle: {//lenged文本
            itemStyle: {
              //lenged文本
              opacity: 1,
              color: function (params) {
                return new ECharts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#02ddff' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0082ff'// 100% 处的颜色
                }], false)
              }
                return new ECharts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#02ddff", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0082ff", // 100% 处的颜色
                    },
                  ],
                  false
                );
              },
            },

            data: sData
            data: sData,
          },


          // 顶面
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [45, 25],
            symbolPosition: 'end',
            symbol: 'circle',
            symbolOffset: [0, '-50%'],
            symbolPosition: "end",
            symbol: (value) => (value ? "circle" : "none"),
            symbolOffset: [0, "-50%"],
            z: 13,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                return new ECharts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#02ddff' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#0082ff'// 100% 处的颜色
                }], false)
              }
                return new ECharts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#02ddff", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0082ff", // 100% 处的颜色
                    },
                  ],
                  false
                );
              },
            },
            data: sData
            data: sData,
          },




        ],

        animation: false,
        tooltip: {},
        grid: {
          top: "28px",
          left: '1%',
          right: '1%',
          bottom: '18px',
          containLabel: true
          left: "1%",
          right: "1%",
          bottom: "18px",
          containLabel: true,
        },
        xAxis: {
          data: xLabel,
          offset: 10
        },
        xAxis: [
          {
            data: xLabel,
            offset: 10,
          },
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            data: xLabel,
          },
        ],
        yAxis: [
          {
            // name: yName,
@@ -164,13 +276,13 @@
              show: true,
              lineStyle: {
                type: "dashed",
                color: '#6c939b'
              }
            }
                color: "#6c939b",
              },
            },
          },
        ],
      }
    }
      };
    },
  },
  // computed: {
  //   yName() {
@@ -183,6 +295,6 @@
      xLabel: [],
      sData: [],
    });
  }
}
  },
};
</script>