增加数字样式，修改空间管理

src/components/business/analysis/analysis.vue

@@ -1,566 +1,1539 @@
 <template>
-    <div>
-      <div class="border-shadow">
-        <query></query>
-        <card :title="'核心指标'">
-          <CoreData :data-list="coreData"></CoreData>
-        </card>
-      </div>
-      <a-row :style="{ marginTop: '15px' }">
-        <a-col :span="18">
-          <div class="left border-shadow">
-            <card :title="'文印管理'">
+  <div>
+    <div class="border-shadow">
+      <a-form layout="inline">
+        <a-form-item label="单位名称：" class="formItem">
+          <a-select :default-value="0" style="width: 240px">
+            <a-select-option :value="0"> 全部 </a-select-option>
+            <a-select-option :value="1"> 中迅 </a-select-option>
+            <a-select-option :value="2"> 电信规划院 </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="能源类型：" class="formItem">
+          <a-select
+            :default-value="0"
+            v-model="classificationIndex"
+            @change="changeEnergyType"
+            style="width: 240px"
+          >
+            <a-select-option
+              :value="index"
+              v-for="(str, index) in energy"
+              :key="index"
+            >
+              {{ str }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="时间范围：" class="formItem">
+          <timeRange ref="timeRange"></timeRange>
+        </a-form-item>
+        <a-form-item class="formItem">
+          <a-button type="primary" @click="reset">重置</a-button>
+          <a-button type="primary" @click="search">查询</a-button>
+        </a-form-item>
+      </a-form>
+      <card :title="'核心指标'">
+        <CoreData :data-list="coreData"></CoreData>
+      </card>
+    </div>
+    <a-row :style="{ marginTop: '15px' }">
+      <a-col :span="19">
+        <div class="left border-shadow">
+          <card :title="'能源趋势'">
+            <a-tabs
+              type="card"
+              @change="tabChange"
+              v-model="activeKey"
+              v-if="isEchartTab == true"
+            >
+              <a-tab-pane
+                :tab="item.name"
+                v-for="(item, index) in echartTabs"
+                :key="index"
+              >
+                <!-- <div
+                  class="myChart"
+                  :ref="'myChart_' + index"
+                  :style="{ height: '' }"
+                ></div> -->
+              </a-tab-pane>
+            </a-tabs>
+            <div
+              class="myChart"
+              ref="myChart1"
+              :style="{ height: isEchartTab ? '450px' : '505px' }"
+            ></div>
+          </card>
+        </div>
+      </a-col>
+      <a-col :span="5">
+        <div class="right border-shadow">
+          <card :title="energyIndex == 0 ? '能源分析' : '能源分布'">
+            <div class="total_right_content" v-if="energyIndex == 0">
+              <div>
+                <div>
+                  月度同比节能： <span class="num">36</span>
+                  <span class="unit">元/人/月</span>
+                </div>
+                <div>
+                  年度环比节能： <span class="num">36</span>
+                  <span class="unit">元/人/年</span>
+                </div>
+              </div>
               <div
                 class="myChart"
-                ref="myChart1"
-                :style="{ height: '515px' }"
+                ref="myChart2"
+                :style="{ height: '375px' }"
               ></div>
-            </card>
-          </div>
-        </a-col>
-        <a-col :span="6">
-          <div class="right border-shadow">
-            <card :title="'成本趋势'">
-              <div class="cben">
-                <div class="total">成本趋势： <span>增速10%</span></div>
-                <div
-                  class="myChart"
-                  ref="myChart2"
-                  :style="{ height: '484px' }"
-                ></div>
-              </div>
-            </card>
-          </div>
-        </a-col>
-      </a-row>
-    </div>
-  </template>
+            </div>
+            <div v-else-if="energyIndex == 1">
+              <a-tabs type="card">
+                <a-tab-pane
+                  :tab="item.name"
+                  v-for="(item, index) in echartTabs"
+                  :key="index"
+                >
+                </a-tab-pane>
+              </a-tabs>
+            </div>
+            <div v-else-if="energyIndex == 2"></div>
+            <div v-else-if="energyIndex == 3"></div>
+            <div v-else-if="energyIndex == 4"></div>
+            <div v-else-if="energyIndex == 5"></div>
+          </card>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
     <script>
-  import query from "@/components/common/query.vue";
-  import card from "@/components/common/card.vue";
-  export default {
-    components: {
-      query,
-      card,
+import query from "@/components/common/query.vue";
+import card from "@/components/common/card.vue";
+export default {
+  components: {
+    query,
+    card,
+  },
+  data() {
+    return {
+      energy: ["全部", "用电", "用水", "用热", "用冷", "发电"],
+      classificationIndex: 0,
+      energyIndex: 0,
+      isEchartTab: false,
+      echartTabs: [],
+      activeKey: 0,
+      classificationData: {
+        total: {
+          coreData: [
+            {
+              title: "总用量",
+              num: "98",
+              unit: "kWh",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "总用量",
+              num: "50",
+              unit: "m<sup>3</sup>",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "总能耗成本",
+              num: "100",
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "人均能耗成本",
+              num: 1000,
+              unit: "元/人",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "人均成本过高，请购买智能源服务",
+            },
+          ],
+        },
+        use_electric: {
+          coreData: [
+            {
+              title: "总用电量",
+              num: 98,
+              unit: "kWh",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "人均用电量",
+              num: 30,
+              unit: "kWh/人",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "总能耗成本",
+              num: 100,
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "人均能耗成本",
+              num: 1000,
+              unit: "元/人",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "人均成本过高，请购买智能源服务",
+            },
+          ],
+        },
+        water: {
+          coreData: [
+            {
+              title: "车辆平均成本",
+              num: "100",
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均出车次数",
+              num: "80",
+              unit: "",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均碳排放",
+              num: "80",
+              unit: "tco2e",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "平均出车时长",
+              num: 80,
+              unit: "小时",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "增加20个公车数量",
+            },
+          ],
+        },
+        hot: {
+          coreData: [
+            {
+              title: "车辆平均成本",
+              num: "100",
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均出车次数",
+              num: "80",
+              unit: "",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均碳排放",
+              num: "80",
+              unit: "tco2e",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "平均出车时长",
+              num: 80,
+              unit: "小时",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "增加20个公车数量",
+            },
+          ],
+        },
+        cold: {
+          coreData: [
+            {
+              title: "车辆平均成本",
+              num: "100",
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均出车次数",
+              num: "80",
+              unit: "",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均碳排放",
+              num: "80",
+              unit: "tco2e",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "平均出车时长",
+              num: 80,
+              unit: "小时",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "增加20个公车数量",
+            },
+          ],
+        },
+        create_electric: {
+          coreData: [
+            {
+              title: "车辆平均成本",
+              num: "100",
+              unit: "元",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均出车次数",
+              num: "80",
+              unit: "",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "车辆平均碳排放",
+              num: "80",
+              unit: "tco2e",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              title: "平均出车时长",
+              num: 80,
+              unit: "小时",
+              historyDesc: "同比",
+              historyNum: 0.4,
+            },
+            {
+              type: 1,
+              isHighLight: false,
+              title: "值得关注",
+              content: "增加20个公车数量",
+            },
+          ],
+        },
+      },
+      coreData: [],
+    };
+  },
+  mounted() {
+    let that = this;
+    this.search();
+  },
+  methods: {
+    changeEnergyType(value) {
+      // this.classificationIndex = value;
+      // console.log(this.classificationIndex)
+      // console.log(value)
     },
-    data() {
-      const listData = [];
-      for (let i = 0; i < 100; i++) {
-        listData.push({
-          index: i + 1,
-          name: "物理饭",
-          department: "技术开发部门",
-          time: "2023.02.03 00:00:00",
-        });
+    changeCoreData() {
+      this.energyIndex = this.classificationIndex;
+      this.coreData = JSON.parse(
+        JSON.stringify(
+          this.classificationData[
+            Object.getOwnPropertyNames(this.classificationData)[
+              this.classificationIndex
+            ]
+          ].coreData
+        )
+      );
+    },
+    reset() {
+      this.classificationIndex = 0;
+    },
+    search() {
+      let that = this;
+      this.changeCoreData();
+      this.echartTabs = [];
+      this.activeKey = 0;
+      switch (that.classificationIndex) {
+        case 0:
+          this.isEchartTab = false;
+
+          setTimeout(() => {
+            that.totalSetEchart1();
+            that.totalSetEchart2();
+          }, 100);
+          break;
+        case 1:
+          this.isEchartTab = true;
+          this.echartTabs = [
+            {
+              name: "总体用电",
+            },
+            {
+              name: "15F",
+            },
+            {
+              name: "20F",
+            },
+          ];
+          setTimeout(() => {
+            that.use_electricSetEchart1();
+          }, 100);
+          break;
+        case 2:
+          this.echartTabs = [
+            {
+              name: "总体用水",
+            },
+            {
+              name: "15F",
+            },
+            {
+              name: "20F",
+            },
+          ];
+          this.isEchartTab = true;
+          setTimeout(() => {
+            that.waterSetEchart1();
+          }, 100);
+          break;
+        case 3:
+          this.isEchartTab = false;
+          setTimeout(() => {
+            that.hotSetEchart1();
+          }, 100);
+          break;
+        case 4:
+          this.isEchartTab = false;
+          setTimeout(() => {
+            that.coldSetEchart1();
+          }, 100);
+          break;
+        case 5:
+          this.isEchartTab = false;
+          setTimeout(() => {
+            that.create_electricSetEchart1();
+          }, 100);
+          break;
+
+        default:
+          break;
       }
-      return {
-        options: [
-          {
-            value: 1,
-            name: "中讯1",
-          },
-          {
-            value: 2,
-            name: "中讯2",
-          },
-        ],
-        floors: [
-          {
-            value: 7,
-            name: "7层",
-          },
-          {
-            value: 8,
-            name: "8层",
+    },
+
+    resetECharts(ele) {
+      // let height = ele.style.height;
+      let parentElement = ele.parentElement;
+      parentElement.removeChild(ele);
+      let div = document.createElement("div");
+      //为div创建属性class = "test"
+      var divattr = document.createAttribute("class");
+      divattr.value = "myChart";
+      //把属性class = "test"添加到div
+      div.setAttributeNode(divattr);
+      var style = document.createAttribute("style");
+      div.setAttributeNode(style);
+
+      parentElement.appendChild(div);
+
+      if (this.isEchartTab) {
+        div.style.height = "450px";
+      } else {
+        div.style.height = "505px";
+      }
+
+      return div;
+    },
+
+    tabChange() {
+      let that = this;
+      switch (this.energyIndex) {
+        case 1: // 用电
+          // 根据类型查询数据
+          // this.$refs.myChart1
+          setTimeout(() => {
+            that.use_electricSetEchart1();
+          }, 100);
+          break;
+        case 2: // 用水
+          break;
+      }
+    },
+
+    totalSetEchart1() {
+      let that = this;
+      this.$refs.myChart1 = this.resetECharts(this.$refs.myChart1);
+      let chart = this.$echarts.init(this.$refs.myChart1);
+
+      let xLabel = [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ];
+
+      let yData = [
+        {
+          name: "用电",
+          color: "#5087ec",
+          startColor: "rgba(80,135,236,.6)",
+          endColor: "rgba(80,135,236,.6)",
+          data: [
+            "110",
+            "130",
+            "150",
+            "170",
+            "150",
+            "130",
+            "110",
+            "130",
+            "150",
+            "170",
+            "150",
+            "130",
+          ],
+        },
+        {
+          name: "用水",
+          color: "#68bbc4",
+          startColor: "rgba(104,187,196,.6)",
+          endColor: "rgba(104,187,196,.6)",
+          data: [
+            "210",
+            "230",
+            "250",
+            "270",
+            "250",
+            "230",
+            "210",
+            "230",
+            "250",
+            "270",
+            "250",
+            "230",
+          ],
+        },
+        {
+          name: "用热",
+          color: "#60b565",
+          startColor: "rgba(96,181,101,.6)",
+          endColor: "rgba(96,181,101,.6)",
+          data: [
+            "310",
+            "330",
+            "350",
+            "370",
+            "350",
+            "330",
+            "310",
+            "330",
+            "350",
+            "370",
+            "350",
+            "330",
+          ],
+        },
+        {
+          name: "用冷",
+          color: "#f2bd42",
+          startColor: "rgba(242,189,66,.6)",
+          endColor: "rgba(242,189,66,.6)",
+          data: [
+            "410",
+            "430",
+            "450",
+            "470",
+            "450",
+            "430",
+            "410",
+            "430",
+            "450",
+            "470",
+            "450",
+            "430",
+          ],
+        },
+        {
+          name: "光伏",
+          color: "#ee752f",
+          startColor: "rgba(238,117,47,.6)",
+          endColor: "rgba(238,117,47,.6)",
+          data: [
+            "510",
+            "530",
+            "550",
+            "570",
+            "550",
+            "530",
+            "510",
+            "530",
+            "550",
+            "570",
+            "550",
+            "530",
+          ],
+        },
+      ];
+      let ySeries = yData.map(function (item) {
+        return {
+          name: item.name,
+          type: "line",
+          stack: "Total",
+          // symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: true,
+          symbolSize: 8,
+          smooth: true,
+          lineStyle: {
+            normal: {
+              width: 2,
+              color: item.color, // 线条颜色
+            },
           },
-        ],
-        columns: [
-          { title: "序号", dataIndex: "index", key: "1", width: 48 },
-          { title: "姓名", dataIndex: "name", key: "2", width: 60 },
-          { title: "部门", dataIndex: "department", key: "3", width: 80 },
-          { title: "最后进入时间", dataIndex: "time", key: "4", width: 90 },
-        ],
-        listData: listData,
-        coreData: [
-          {
-            title: "车辆平均成本",
-            num: "100",
-            unit: "元",
-            historyDesc: "同比",
-            historyNum: 0.4,
+          itemStyle: {
+            color: item.color,
           },
-          {
-            title: "车辆平均出车次数",
-            num: "80",
-            unit: "",
-            historyDesc: "同比",
-            historyNum: 0.4,
+          areaStyle: {
+            normal: {
+              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+              color: new that.$echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: item.startColor,
+                  },
+                  {
+                    offset: 1,
+                    color: item.endColor,
+                  },
+                ],
+                false
+              ),
+            },
           },
-          {
-            title: "车辆平均碳排放",
-            num: "80",
-            unit: "tco2e",
-            historyDesc: "同比",
-            historyNum: 0.4,
+          data: item.data,
+        };
+      });
+
+      let options = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(126,199,255,0)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(126,199,255,1)", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(126,199,255,0)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
           },
-          {
-            title: "平均出车时长",
-            num: 80,
-            unit: "小时",
-            historyDesc: "同比",
-            historyNum: 0.4,
+        },
+        legend: {
+          align: "left",
+          top: "5%",
+          textStyle: {
+            color: "#000000",
+            fontSize: 16,
           },
+        },
+        grid: {
+          top: "20%",
+          left: "5%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        dataZoom: [
+          // x轴进度条，x轴超过15条数据就会展示出来
           {
-            type: 1,
-            isHighLight: false,
-            title: "值得关注",
-            content: "增加20个公车数量",
+            type: "slider",
+            show: xLabel.length >= 6,
+            start: 0,
+            end: xLabel.length >= 6 ? 50 : 100, // 控制初始化时展示的百分比数量
+            height: 20,
+            left: "5%",
+            right: "5%",
+            bottom: "2%",
+            moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
           },
         ],
-      };
-    },
-    mounted() {
-      this.setEchart1();
-      this.setEchart2();
-    },
-    methods: {
-      handleChange(value) {
-        console.log(`selected ${value}`);
-      },
-      getTimeRange() {
-        this.$refs.timeRange.getTimeRange(); // 获取时间段
-      },
-  
-      setEchart1() {
-        let chart = this.$echarts.init(this.$refs.myChart1);
-        let options = {
-          tooltip: {
-            trigger: "axis",
-            // axisPointer: {
-            //    type: "shadow",
-            // },
-          },
-          legend: {
-            top: "5%",
-            textStyle: {
-              color: "#000", // 文字的颜色。
-              fontSize: 18,
-            },
-          },
-          grid: {
-            left: "1%",
-            right: "5%",
-            top: "15%",
-            bottom: "5%",
-            containLabel: true,
-            backgroundColor: "transparent",
-          },
-          yAxis: [
-            {
-              xtype: "value",
-              name: "出车次数",
-              nameTextStyle: {
-                fontSize: 20,
-                color: "#000",
-              },
-              splitLine: {
-                show: true,
-                lineStyle: {
-                  color: "#1ebfda",
-                  type: "dashed",
-                },
-              },
-              axisTick: {
-                show: false,
-              },
-              axisLabel: {
-                color: "#000",
-                fontSize: 18,
+        xAxis: [
+          {
+            type: "category",
+            // boundaryGap: false,
+            axisLine: {
+              //坐标轴轴线相关设置。数学上的x轴
+              show: true,
+              lineStyle: {
+                color: "#6e7079",
               },
             },
-            {
-              type: "value",
-              position: "right",
-              name: "出车时长（h）",
-              min: 0,
-              max: 2000,
-              nameTextStyle: {
-                fontSize: 20,
-                color: "#000",
+            axisLabel: {
+              //坐标轴刻度标签的相关设置
+              textStyle: {
+                color: "#000000",
+                padding: 8,
+                fontSize: 14,
               },
-              splitLine: {
-                show: true,
-                lineStyle: {
-                  color: "#1ebfda",
-                  type: "dashed",
-                },
+              formatter: function (data) {
+                return data;
               },
-              axisTick: {
-                show: false,
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#233653",
               },
-              axisLabel: {
-                color: "#000",
-                fontSize: 18,
+            },
+            axisTick: {
+              show: true,
+              inside: true,
+            },
+            data: xLabel,
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：kWh",
+            min: 0,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#e8e8e8",
               },
             },
-          ],
-          xAxis: {
-            type: "category",
-            data: [
-              "00:00",
-              "01:00",
-              "02:00",
-              "03:00",
-              "04:00",
-              "05:00",
-              "06:00",
-              "07:00",
-              "08:00",
-              "09:00",
-              "10:00",
-              "11:00",
-              "12:00",
-              "13:00",
-              "14:00",
-              "15:00",
-              "16:00",
-              "17:00",
-              "18:00",
-              "19:00",
-              "20:00",
-              "21:00",
-              "22:00",
-              "23:00",
-            ],
             axisLine: {
+              show: false,
+              lineStyle: {
+                color: "#233653",
+              },
+            },
+            axisLabel: {
               show: true,
               textStyle: {
-                color: "#1ebfda",
+                color: "#000000",
+                padding: 8,
               },
-              lineStyle: {
-                color: "#1ebfda", //刻度线的颜色
+              formatter: function (value) {
+                if (value === 0) {
+                  return value;
+                }
+                return value;
               },
             },
             axisTick: {
               show: false,
             },
-            axisLabel: {
-              color: "#000",
-              fontSize: 18,
-            },
-          },
-          series: [
-            {
-              name: "平均出车时长",
-              type: "bar",
-              barWidth: 20,
-              barGap: "40%",
-              data: [
-                430, 300, 320, 480, 410, 520, 570, 610, 610, 440, 630, 630, 300,
-                320, 480, 410, 610, 440, 630, 320, 480, 440, 630, 200,
-              ],
-              itemStyle: {
-                barBorderRadius: [4, 24, 0, 0],
+          },
+        ],
+        series: ySeries,
+      };
+      chart.setOption(options);
+    },
+    totalSetEchart2() {
+      // this.$refs.myChart2 = this.resetECharts(this.$refs.myChart2);
+      let chart = this.$echarts.init(this.$refs.myChart2);
+      let nameList = ["用电", "用水", "用热", "用冷", "光伏"]; // 名字
+      let valueList = [100, 140, 230, 100, 130]; // 分数,最大值为100
+
+      let indicatorList = [];
+      nameList.map((item, index) => {
+        indicatorList.push({
+          name: item,
+          value: valueList[index],
+          max: 250,
+        });
+      });
+
+      let options = {
+        legend: {
+          bottom: "10",
+          textStyle: { fontSize: 14, color: "#000000" },
+          itemGap: 20,
+          itemWidth: 20,
+          data: ["年度环比节能（元）"],
+        },
+        radar: {
+          indicator: indicatorList,
+          center: ["50%", "50%"],
+          radius: "60%",
+          axisName: {
+            formatter: function (value, indicator) {
+              return `{a|${value}}`;
+            },
+            rich: {
+              a: {
+                fontSize: "14px",
+                fontFamily: " Source Han Sans CN-Regular",
+                fontWeight: 400,
+                color: "#333333",
+                padding: [0, 8, 0, 0],
               },
-              color: "#5087ec",
-            },
-            {
-              name: "出车次数",
-              type: "bar",
-              barWidth: 20,
-              barGap: "40%",
-              data: [
-                810, 580, 700, 860, 810, 1010, 1080, 1100, 1220, 1220, 1000, 1300,
-                1080, 1300, 810, 580, 700, 860, 810, 1010, 1080, 1000, 1300, 1080,
-              ],
-              itemStyle: {
-                barBorderRadius: [4, 24, 0, 0],
+              b: {
+                padding: [4, 8, 4, 8],
+                backgroundColor: "rgba(229, 243, 255, 0.6500)",
+                borderRadius: 50,
+                fontFamily: "Source Han Sans CN-Medium",
+                fontWeight: 500,
+                color: "#397EF0",
               },
-              color: "#68bbc4",
             },
-          ],
-        };
-        chart.setOption(options);
-      },
-      setEchart2() {
-        let chart = this.$echarts.init(this.$refs.myChart2);
-        let color = ["#2eb4ff", "#9b9aea", "#f4e23e"];
-        let echartData = [
+          },
+        },
+        series: [
           {
-            name: "1月",
-            value1: 1366,
-            value2: 0,
-            value3: 0,
+            name: "年度环比节能（元）",
+            type: "radar",
+            color: "rgba(57, 126, 240, 1)",
+            label: {
+              show: false,
+            },
+            areaStyle: {
+              color: "rgba(170, 217, 255, 0.35)",
+            },
+            data: [
+              {
+                value: valueList,
+              },
+            ],
           },
+        ],
+      };
+      chart.setOption(options);
+    },
+
+    use_electricSetEchart1() {
+      this.$refs.myChart1 = this.resetECharts(this.$refs.myChart1);
+      let chart = this.$echarts.init(this.$refs.myChart1);
+
+      let xLabel = [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ];
+      let options = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          top: "5%",
+          data: ["尖", "峰", "平", "谷"],
+          textStyle: {
+            color: "#000000",
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "5%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        dataZoom: [
+          // x轴进度条，x轴超过15条数据就会展示出来
           {
-            name: "2月",
-            value1: 3694,
-            value2: 0,
-            value3: 0,
+            type: "slider",
+            show: xLabel.length >= 6,
+            start: 0,
+            end: xLabel.length >= 6 ? 50 : 100, // 控制初始化时展示的百分比数量
+            height: 20,
+            left: "5%",
+            right: "5%",
+            bottom: "2%",
+            moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
           },
+        ],
+        xAxis: [
           {
-            name: "3月",
-            value1: 19727,
-            value2: 1000,
-            value3: 0,
+            type: "category",
+            data: xLabel,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLabel: {
+              color: "#000000",
+            },
           },
+        ],
+        yAxis: [
           {
-            name: "4月",
-            value1: 17046,
-            value2: 1000,
-            value3: 500,
+            type: "value",
+            name: "",
+            min: 0,
+            max: 1000,
+            interval: 100,
+            axisLabel: {
+              formatter: "{value}",
+              color: "#000000",
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#053c89",
+              },
+            },
           },
+        ],
+        series: [
           {
-            name: "5月",
-            value1: 14780,
-            value2: 13396,
-            value3: 6365,
+            name: "尖",
+            type: "bar",
+            stack: "BB",
+            barWidth: "50%",
+            itemStyle: {
+              normal: {
+                color: "#5087ec",
+              },
+            },
+            data: [100, 80, 100, 120, 200, 150, 100, 80, 100, 120, 200, 150],
           },
           {
-            name: "6月",
-            value1: 19359,
-            value2: 13220,
-            value3: 5940,
+            name: "峰",
+            type: "bar",
+            stack: "BB",
+            barWidth: "50%",
+            itemStyle: {
+              normal: {
+                color: "#65b6bf",
+              },
+            },
+            data: [150, 280, 200, 100, 100, 120, 150, 280, 200, 100, 100, 120],
           },
           {
-            name: "7月",
-            value1: 14229,
-            value2: 10836,
-            value3: 8234,
+            name: "平",
+            type: "bar",
+            stack: "BB",
+            barWidth: "50%",
+            itemStyle: {
+              normal: {
+                color: "#57a25b",
+              },
+            },
+            data: [250, 180, 200, 300, 100, 200, 250, 180, 200, 300, 100, 200],
           },
           {
-            name: "8月",
-            value1: 13176,
-            value2: 12478,
-            value3: 10755,
+            name: "谷",
+            type: "bar",
+            stack: "BB",
+            barWidth: "50%",
+            itemStyle: {
+              normal: {
+                color: "#f0bc41",
+              },
+            },
+            data: [150, 280, 200, 100, 100, 120, 50, 280, 200, 100, 100, 120],
           },
+        ],
+      };
+      chart.setOption(options);
+    },
+    waterSetEchart1() {
+      this.$refs.myChart1 = this.resetECharts(this.$refs.myChart1);
+      let chart = this.$echarts.init(this.$refs.myChart1);
+
+      let xLabel = [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ];
+      let options = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          top: "5%",
+          data: ["自来水", "中水"],
+          textStyle: {
+            color: "#000000",
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "5%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        dataZoom: [
+          // x轴进度条，x轴超过15条数据就会展示出来
           {
-            name: "9月",
-            value1: 16515,
-            value2: 12911,
-            value3: 10806,
+            type: "slider",
+            show: xLabel.length >= 6,
+            start: 0,
+            end: xLabel.length >= 6 ? 50 : 100, // 控制初始化时展示的百分比数量
+            height: 20,
+            left: "5%",
+            right: "5%",
+            bottom: "2%",
+            moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
           },
+        ],
+        xAxis: [
           {
-            name: "10月",
-            value1: 13658,
-            value2: 9479,
-            value3: 8613,
+            type: "category",
+            data: xLabel,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLabel: {
+              color: "#000000",
+            },
           },
+        ],
+        yAxis: [
           {
-            name: "11月",
-            value1: 16364,
-            value2: 10839,
-            value3: 8826,
+            type: "value",
+            name: "",
+            min: 0,
+            max: 500,
+            interval: 50,
+            axisLabel: {
+              formatter: "{value}",
+              color: "#000000",
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#053c89",
+              },
+            },
           },
+        ],
+        series: [
           {
-            name: "12月",
-            value1: 19973,
-            value2: 10016,
-            value3: 9291,
+            name: "自来水",
+            type: "bar",
+            stack: "BB",
+            barWidth: "50%",
+            itemStyle: {
+              normal: {
+                color: "#5087ec",
+              },
+            },
+            data: [100, 80, 100, 120, 200, 150, 100, 80, 100, 120, 200, 150],
           },
-        ];
-  
-        let legendItem = ["成本"];
-  
-        let xAxisData = echartData.map((v) => v.name);
-        //  ["1", "2", "3", "4", "5", "6", "7", "8"]
-        let yAxisData1 = echartData.map((v) => v.value1);
-        // [100, 138, 350, 173, 180, 150, 180, 230]
-        const hexToRgba = (hex, opacity) => {
-          let rgbaColor = "";
-          let reg = /^#[\da-f]{6}$/i;
-          if (reg.test(hex)) {
-            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
-              "0x" + hex.slice(3, 5)
-            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
-          }
-          return rgbaColor;
-        };
-  
-        let options = {
-          // backgroundColor: bgColor,
-          color: color,
-          legend: {
-            center: true,
-            top: 10,
-            data: legendItem,
-            textStyle: {
-              color: "#000000",
+          {
+            name: "中水",
+            type: "bar",
+            stack: "BB",
+            barWidth: "50%",
+            itemStyle: {
+              normal: {
+                color: "#65b6bf",
+              },
             },
+            data: [150, 280, 200, 100, 100, 120, 150, 280, 200, 100, 100, 120],
+          },
+        ],
+      };
+      chart.setOption(options);
+    },
+    hotSetEchart1() {
+      this.$refs.myChart1 = this.resetECharts(this.$refs.myChart1);
+      let chart = this.$echarts.init(this.$refs.myChart1);
+
+      let xLabel = [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ];
+      let options = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          top: "5%",
+          data: ["用热量"],
+          textStyle: {
+            color: "#000000",
           },
-          // calculable: true,
-          tooltip: {
-            trigger: "axis",
-            formatter: function (params) {
-              let html = "";
-              params.forEach((v) => {
-                console.log(v);
-                html += `<div style="color: #666;font-size: 14px;line-height: 24px">
-                  <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ffffff;"></span>
-                  ${v.seriesName}.${v.name}
-                  <span style="color:${
-                    color[v.componentIndex]
-                  };font-weight:700;font-size: 18px">${v.value}</span>
-                  人`;
-              });
-  
-              return html;
-            },
-            extraCssText:
-              "background: #ffffff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
-            // axisPointer: {
-            //     type: 'shadow',
-            //     shadowStyle: {
-            //         // color: '#ffffff',
-            //         shadowColor: 'rgba(225,225,225,1)',
-            //         shadowBlur: 5
-            //     }
-            // }
-          },
-          grid: {
-            left: "1%",
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "5%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        dataZoom: [
+          // x轴进度条，x轴超过15条数据就会展示出来
+          {
+            type: "slider",
+            show: xLabel.length >= 6,
+            start: 0,
+            end: xLabel.length >= 6 ? 50 : 100, // 控制初始化时展示的百分比数量
+            height: 20,
+            left: "5%",
             right: "5%",
-            top: "15%",
-            bottom: "5%",
-            containLabel: true,
-          },
-          dataZoom: [
-            // x轴进度条，x轴超过15条数据就会展示出来
-            {
-              type: "slider",
-              show: xAxisData.length > 5,
-              start: 0,
-              end: xAxisData.length > 5 ? 30 : 100, // 控制初始化时展示的百分比数量
-              height: 15,
-              left: "5%",
-              right: "5%",
-              bottom: "2%",
-              moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
+            bottom: "2%",
+            moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
+          },
+        ],
+        xAxis: [
+          {
+            type: "category",
+            data: xLabel,
+            axisPointer: {
+              type: "shadow",
             },
-          ],
-          xAxis: [
-            {
-              type: "category",
-              axisTick: {
-                show: false,
-              },
-              axisLine: {
-                show: false,
-                lineStyle: {
-                  type: "solid",
-                  color: "#0000004d",
-                },
+            axisLabel: {
+              color: "#000000",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "",
+            min: 0,
+            max: 250,
+            interval: 25,
+            axisLabel: {
+              formatter: "{value}",
+              color: "#000000",
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#053c89",
               },
-              axisLabel: {
-                inside: false,
-                textStyle: {
-                  color: "#000000", // x轴颜色
-                  fontWeight: "normal",
-                  fontSize: "14",
-                  lineHeight: 22,
-                },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "用热量",
+            type: "bar",
+            stack: "BB",
+            barWidth: "50%",
+            itemStyle: {
+              normal: {
+                color: "#bd3124",
               },
-  
-              data: xAxisData,
             },
-          ],
-          yAxis: [
-            {
-              type: "value",
-              name: "",
-              axisLabel: {
-                textStyle: {
-                  color: "#000000",
-                },
+            data: [100, 80, 100, 120, 200, 150, 100, 80, 100, 120, 200, 150],
+          },
+        ],
+      };
+      chart.setOption(options);
+    },
+
+    coldSetEchart1() {
+      this.$refs.myChart1 = this.resetECharts(this.$refs.myChart1);
+      let chart = this.$echarts.init(this.$refs.myChart1);
+
+      let xLabel = [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ];
+      let options = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          top: "5%",
+          data: ["制冷量", "能耗比"],
+          textStyle: {
+            color: "#000000",
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "5%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        dataZoom: [
+          // x轴进度条，x轴超过15条数据就会展示出来
+          {
+            type: "slider",
+            show: xLabel.length >= 6,
+            start: 0,
+            end: xLabel.length >= 6 ? 50 : 100, // 控制初始化时展示的百分比数量
+            height: 20,
+            left: "5%",
+            right: "5%",
+            bottom: "2%",
+            moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
+          },
+        ],
+        xAxis: [
+          {
+            type: "category",
+            data: xLabel,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLabel: {
+              color: "#000000",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "制冷量",
+            min: 0,
+            max: 75,
+            interval: 5,
+            axisLabel: {
+              formatter: "{value} %",
+              color: "#000000",
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#053c89",
               },
-              nameTextStyle: {
-                color: "#000000",
-                fontSize: 12,
-                lineHeight: 40,
-                padding: [0, 0, 0, -20],
+            },
+          },
+          {
+            type: "value",
+            name: "能耗比",
+            position: "right",
+            min: 0,
+            max: 150,
+            interval: 10,
+            axisLabel: {
+              formatter: "{value} %",
+              color: "#000000",
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#053c89",
               },
-              splitLine: {
-                show: true,
-                lineStyle: {
-                  type: "solid",
-                  color: "#0000004d",
-                },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "资产名称",
+            type: "bar",
+            barWidth: "50%",
+            itemStyle: {
+              normal: {
+                color: "#5470c6",
               },
-              axisLine: {
+            },
+            data: [60, 66, 51, 67, 45, 60, 66, 51, 67, 45],
+          },
+          {
+            name: "回报率",
+            type: "line",
+            yAxisIndex: 1,
+            itemStyle: {
+              color: "#91cc75", //拆线颜色
+            },
+            label: {
+              normal: {
                 show: false,
-                lineStyle: {
-                  type: "solid",
+                position: "top",
+                textStyle: {
                   color: "#000000",
                 },
               },
-              axisTick: {
-                show: false,
+            },
+
+            data: [60, 40, 60, 80, 120, 60, 40, 60, 80, 120],
+          },
+        ],
+      };
+      chart.setOption(options);
+    },
+    create_electricSetEchart1() {
+      this.$refs.myChart1 = this.resetECharts(this.$refs.myChart1);
+      let chart = this.$echarts.init(this.$refs.myChart1);
+      let xLabel = [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ];
+      let options = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          top: "5%",
+          data: ["发电量", "输出功率"],
+          textStyle: {
+            color: "#000000",
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "5%",
+          right: "5%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        dataZoom: [
+          // x轴进度条，x轴超过15条数据就会展示出来
+          {
+            type: "slider",
+            show: xLabel.length >= 6,
+            start: 0,
+            end: xLabel.length >= 6 ? 50 : 100, // 控制初始化时展示的百分比数量
+            height: 20,
+            left: "5%",
+            right: "5%",
+            bottom: "2%",
+            moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
+          },
+        ],
+        xAxis: [
+          {
+            type: "category",
+            data: xLabel,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLabel: {
+              color: "#000000",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "发电量（kWh）",
+            min: 0,
+            max: 75,
+            interval: 5,
+            axisLabel: {
+              formatter: "{value}",
+              color: "#000000",
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#053c89",
               },
             },
-          ],
-          series: [
-            {
-              name: legendItem[0],
-              type: "line",
-              smooth: false, //是否平滑
-              // showSymbol: false,/
-              symbolSize: 8,
-              zlevel: 3,
+          },
+          {
+            type: "value",
+            name: "输出功率（W/m2）",
+            position: "right",
+            min: 0,
+            max: 150,
+            interval: 10,
+            axisLabel: {
+              formatter: "{value}",
+              color: "#000000",
+            },
+            splitLine: {
+              show: true,
               lineStyle: {
-                normal: {
-                  color: color[0],
-                  shadowBlur: 3,
-                  shadowColor: hexToRgba(color[0], 0.5),
-                  shadowOffsetY: 0,
-                },
+                color: "#053c89",
               },
-              areaStyle: {
-                normal: {
-                  color: new this.$echarts.graphic.LinearGradient(
-                    0,
-                    0,
-                    0,
-                    1,
-                    [
-                      {
-                        offset: 0,
-                        color: hexToRgba(color[0], 0.3),
-                      },
-                      {
-                        offset: 1,
-                        color: hexToRgba(color[0], 0.1),
-                      },
-                    ],
-                    false
-                  ),
-                  shadowColor: hexToRgba(color[0], 0.1),
-                  shadowBlur: 10,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "资产名称",
+            type: "bar",
+            barWidth: "50%",
+            itemStyle: {
+              normal: {
+                color: "#5470c6",
+              },
+            },
+            data: [60, 66, 51, 67, 45, 60, 66, 51, 67, 45],
+          },
+          {
+            name: "回报率",
+            type: "line",
+            yAxisIndex: 1,
+            itemStyle: {
+              color: "#91cc75", //拆线颜色
+            },
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                textStyle: {
+                  color: "#000000",
                 },
               },
-              data: yAxisData1,
             },
-          ],
-        };
-        chart.setOption(options);
-      },
+
+            data: [60, 40, 60, 80, 120, 60, 40, 60, 80, 120],
+          },
+        ],
+      };
+      chart.setOption(options);
     },
-  };
-  </script>
+
+    getTimeRange() {
+      this.$refs.timeRange.getTimeRange(); // 获取时间段
+    },
+  },
+};
+</script>
       
     
-    <style lang="less" scoped>
-  .left {
-    padding-right: 15px;
-    margin-right: 5px;
-  }
-  .right {
-    padding-left: 15px;
-    margin-left: 5px;
+<style lang="less" scoped>
+.left {
+  padding-right: 15px;
+  margin-right: 5px;
+}
+.right {
+  padding-left: 15px;
+  margin-left: 5px;
+}
+.cben {
+  font-weight: bold;
+  span {
+    font-size: 20px;
   }
-  .cben {
-    font-weight: bold;
-    span {
-      font-size: 20px;
+}
+.formItem {
+  margin: 0px 15px;
+}
+.right {
+  .total_right_content {
+    > div:nth-child(1) {
+      box-sizing: border-box;
+      margin: 5px 5px;
+      height: 120px;
+      border: 1px solid #eeeeee;
+      border-radius: 10px;
+      text-align: center;
+      div {
+        height: 60px;
+        line-height: 60px;
+        font-family: SourceHanSansSC;
+        font-weight: 400;
+        font-size: 16px;
+        color: rgb(16, 16, 16);
+      }
+
+      .num {
+        font-size: 30px;
+        font-family: numberMH !important;
+        letter-spacing: 8px;
+        line-height: 60px;
+      }
+      .unit {
+        font-family: SourceHanSansSC;
+        font-weight: 400;
+        font-size: 16px;
+        color: #bbbbbb;
+        font-style: normal;
+        letter-spacing: 0px;
+        line-height: 20px;
+        text-decoration: none;
+      }
     }
   }
-  </style>
+}
+</style>

src/style/common.css

@@ -17,6 +17,11 @@
   margin: 0 3px !important;
 }
 
+@font-face {
+  font-family: numberMH;
+  src: url(../assets/fonts/Digiface-Regular.ttf);
+}
+
 /*滚动条样式*/
 ::-webkit-scrollbar {
   width: 8px;