U 领导层首页面修改 等

he wei

2023-07-20 5748fde24928bbda455fb3b2f764b0d18efe683c

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

@@ -1,48 +1,51 @@
<script>
import ECharts from "echarts";
import BaseChart from "@/components/myCharts/BaseChart";
const color0 = 'rgba(255,164,41,.16)';
const color1 = 'rgba(61,187,255,.36)';
const color2 = '#06FBFE';
const colorList0 = [{
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  type: 'linear',
  global: false,
  colorStops: [
    {
      //第一节下面
      offset: 0,
      color: '#EFF091',
    },
    {
      offset: 1,
      color: '#23B5F5',
    },
  ],
}, {
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  type: 'linear',
  global: false,
  colorStops: [
    {
      //第一节下面
      offset: 0,
      color: '#69F9B0',
    },
    {
      offset: 1,
const color0 = "rgba(255,164,41,.16)";
const color1 = "rgba(61,187,255,.36)";
const color2 = "#06FBFE";
const colorList0 = [
  {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    type: "linear",
    global: false,
    colorStops: [
      {
        //第一节下面
        offset: 0,
        color: "#EFF091",
      },
      {
        offset: 1,
        color: "#23B5F5",
      },
    ],
  },
  {
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    type: "linear",
    global: false,
    colorStops: [
      {
        //第一节下面
        offset: 0,
        color: "#69F9B0",
      },
      {
        offset: 1,

      color: '#23B5F5',
    },
  ],
}];
const colorList1 = ['#F1BB4C', '#00D488'];
        color: "#23B5F5",
      },
    ],
  },
];
const colorList1 = ["#F1BB4C", "#00D488"];
export default {
  extends: BaseChart,
  props: {
@@ -52,11 +55,11 @@
    },
    unit: {
      type: String,
      default: ""
      default: "",
    },
  },
  data() {
    return {}
    return {};
  },
  methods: {
    fullScreen() {
@@ -77,38 +80,35 @@
      if (maxD <= 0) {
        maxD = 1;
      } else {
        maxD = Math.round((maxD * 1.2) * 100) / 100;
        maxD = Math.round(maxD * 1.2 * 100) / 100;
      }

      let fillData = sData.map(() => maxD);
      // console.log(maxD, '======maxD', fillData);

      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;
      };

      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: [
          // 背景
          // 背景 0
          {
            data: fillData,
            tooltip: {
              show: false,
            },
            type: 'bar',
            barMaxWidth: '60',
            // symbol: 'diamond',
            // symbolOffset: [0, '50%'],
            // symbolSize: [60, 20],
            // zlevel: 1,
            type: "bar",
            barMaxWidth: "60",
            xAxisIndex: 1,
            z: 1,
            itemStyle: {
@@ -117,17 +117,18 @@
              },
            },
          },
          // 背景顶
          // 背景顶 1
          {
            name: '',
            name: "",
            tooltip: {
              show: false,
            },
            type: 'pictorialBar',
            barMaxWidth: '60',
            symbol: 'diamond',
            type: "pictorialBar",
            barMaxWidth: "60",
            symbol: "diamond",
            symbolOffset: [0, '-50%'],
            symbolPosition: 'end',
            // symbolOffset: ["50%", "-50%"],
            symbolPosition: "end",
            symbolSize: [60, 20],
            xAxisIndex: 1,
            // zlevel: 1,
@@ -137,16 +138,15 @@
                color: color1,
              },
            },
            data: fillData
            data: fillData,
          },
          // 柱值
          // 柱值 2
          {
            type: 'bar',
            type: "bar",
            name: sName,
            type: 'bar',
            data: sData,
            stack: 'zs',
            barMaxWidth: 'auto',
            // stack: 'zs',
            // barMaxWidth: 'auto',
            barWidth: 60,
            z: 2,
            label: {
@@ -154,25 +154,25 @@
              position: "top",
              offset: [0, -8],
              fontSize: 20,
              fontWeight: 'bolder',
              color: '#ebf006'
              fontWeight: "bolder",
              color: "#ebf006",
            },
            itemStyle: {
              color(params) {
                return colorList0[params.dataIndex % colorList0.length]
                return colorList0[params.dataIndex % colorList0.length];
              },
            },
          },
          // 底块
          // 底块 3
          {
            data: sData.map((v) => 1),
            tooltip: {
              show: false,
            },
            type: 'pictorialBar',
            type: "pictorialBar",
            // symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [60, 20],
            // zlevel: 1,
            z: 3,
@@ -182,20 +182,21 @@
              },
            },
          },
          // 柱顶
          // 柱顶 4
          {
            data: sData,
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            type: "pictorialBar",
            symbolPosition: "end",
            // symbol: 'diamond',
            symbol: (value) => (value ? "diamond" : "none"),
            symbolOffset: [0, "-50%"],
            symbolSize: [60, 20],
            // zlevel: 2,
            z: 4,
            itemStyle: {
              normal: {
                color(params) {
                  return colorList1[params.dataIndex % colorList1.length]
                  return colorList1[params.dataIndex % colorList1.length];
                },
              },
            },
@@ -205,15 +206,18 @@
        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,
            type: "category",
            offset: 10,
          },
          {
          type: 'category',
          axisLine: {
            show: false
@@ -230,8 +234,9 @@
          splitLine: {
            show: false
          },
          data: xLabel
        }],
            data: xLabel
          }
        ],
        yAxis: [
          {
            // name: yName,
@@ -242,19 +247,19 @@
              show: true,
              lineStyle: {
                type: "dashed",
                color: '#6c939b'
              }
            }
                color: "#6c939b",
              },
            },
          },
        ],
      }
    }
      };
    },
  },
  mounted() {
    this.setData({
      xLabel: [],
      sData: [],
    });
  }
}
  },
};
</script>