修改样式

src/views/heating/heatanalysis/HeatanalysisAllList.vue

@@ -8,6 +8,7 @@
             <a-form-item label="供热公司">
               <a-select ref="select" placeholder="请选择供热公司" v-model:value="queryParam.view001" style="width: 150px"
                 @focus="focus" @change="handleChange1">
+                <a-select-option value="">全部</a-select-option>
                 <a-select-option :value="item.id" v-for="item in thermalcompany" :key="item.id">{{ item.companyName
                 }}</a-select-option>
               </a-select>
@@ -17,6 +18,7 @@
             <a-form-item label="锅炉房">
               <a-select ref="select" placeholder="请选择锅炉房" v-model:value="queryParam.view002" style="width: 150px"
                 @focus="focus">
+                <a-select-option value="">全部</a-select-option>
                 <a-select-option :value="item.id" v-for="item in heatsource" :key="item.id">{{ item.sourceName
                 }}</a-select-option>
               </a-select>
@@ -186,16 +188,11 @@ async function getHeatsourcestation() {
 }
 
 async function handleChange1(record) {
+  queryParam.value.view002 = ""
   var params = { companyId: record };
   heatsource.value = await heatsourcelist(params);
   heatsourcestation.value = [];
 }
-async function handleChange2(record) {
-  var params = { sourceId: record };
-  heatsourcestation.value = await heatsourcestationlist(params);
-}
-function handleChange3(record) {
-}
 
 function handleDetail(record) {
   registerModal.value.cqDetail(record)

src/views/heating/heatanalysis/HeatanalysisDpList.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="p-2">
+    <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-row :gutter="24">
+          <a-col :lg="5">
+            <a-form-item label="供热公司">
+              <a-select ref="select" placeholder="请选择供热公司" v-model:value="queryParam.view001" style="width: 150px"
+                @focus="focus" @change="handleChange1">
+                <a-select-option :value="item.id" v-for="item in thermalcompany" :key="item.id">{{ item.companyName
+                }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="5">
+            <a-form-item label="锅炉房">
+              <a-select ref="select" placeholder="请选择锅炉房" v-model:value="queryParam.view002" style="width: 150px"
+                @focus="focus" @change="handleChange2">
+                <a-select-option :value="item.id" v-for="item in heatsource" :key="item.id">{{ item.sourceName
+                }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="5">
+            <a-form-item label="换热站">
+              <a-select ref="select" placeholder="请选择换热站" v-model:value="queryParam.view004" style="width: 250px"
+                @focus="focus" @change="handleChange3">
+                <a-select-option :value="item.id" v-for="item in heatsourcestation" :key="item.id">{{ item.stationName
+                }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="5">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-col :lg="6">
+                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+              </a-col>
+            </span>
+          </a-col>
+          <!--          <a-col :lg="5">
+            <a-form-item label="一次供水温度">
+              <a-input placeholder="请输入一次供水温度" v-model:value="queryParam.view005"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="5">
+            <a-form-item label="一次回水温度">
+              <a-input placeholder="请输入一次回水温度" v-model:value="queryParam.view006"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="5">
+            <a-form-item label="二次供水温度">
+              <a-input placeholder="请输入二次供水温度" v-model:value="queryParam.view009"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="5">
+            <a-form-item label="二次回水温度">
+              <a-input placeholder="请输入二次回水温度" v-model:value="queryParam.view010"></a-input>
+            </a-form-item>
+          </a-col>-->
+        </a-row>
+      </a-form>
+    </div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable">
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+      <template v-slot:bodyCell="{ column, record, index, text }">
+        <template v-if="column.dataIndex === 'view005'">
+          <span v-if="record.fromFlow == 0">{{ record.view005 }}</span>
+          <span v-else-if="record.fromFlow == 1">{{ record.view035 }}</span>
+          <span v-else>{{ record.view005 || record.view035 || 0 }}</span>
+        </template>
+        <template v-if="column.dataIndex === 'view006'">
+          <span v-if="record.fromFlow == 0">{{ record.view006 }}</span>
+          <span v-else-if="record.fromFlow == 1">{{ record.view036 }}</span>
+          <span v-else>{{ record.view005 || record.view035 || 0 }}</span>
+        </template>
+      </template>
+    </BasicTable>
+
+    <HeatanalysisModal ref="registerModal"></HeatanalysisModal>
+  </div>
+</template>
+
+<script lang="ts" name="heatanalysis-heatanalysis" setup>
+import { ref, reactive, onMounted } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { columns } from './Heatanalysis.data';
+import { list, companylist, heatsourcelist, heatsourcestationlist } from './Heatanalysis.api';
+import HeatanalysisModal from './components/HeatanalysisModal.vue'
+
+const queryParam = ref<any>({});
+const toggleSearchStatus = ref<boolean>(false);
+const registerModal = ref();
+//注册table数据
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '',
+    api: list,
+    columns,
+    canResize: false,
+    useSearchForm: false,
+    clickToRowSelect: false,
+    showIndexColumn: false,
+    immediate: false,
+    tableSetting: {
+      // 是否显示刷新按钮
+      redo: false,
+      // 是否显示尺寸调整按钮
+      size: false,
+      // 是否显示字段调整按钮
+      setting: false,
+      // 是否显示全屏按钮
+      fullScreen: false,
+    },
+    beforeFetch: (params) => {
+      queryParam.value.regionType = '城区'
+      params.column = '', params.order = '';//新生成的默认不带排序
+      return Object.assign(params, queryParam.value);
+    },
+  },
+});
+const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+const labelCol = reactive({
+  xs: { span: 24 },
+  sm: { span: 7 },
+});
+const wrapperCol = reactive({
+  xs: { span: 24 },
+  sm: { span: 16 },
+});
+
+/**
+ * 成功回调
+ */
+function handleSuccess() {
+  (selectedRowKeys.value = []) && reload();
+}
+
+/**
+ * 查询
+ */
+function searchQuery() {
+  reload();
+}
+
+/**
+ * 重置
+ */
+function searchReset() {
+  queryParam.value = {};
+  selectedRowKeys.value = [];
+  getHeatsource();
+  getHeatsourcestation();
+  //刷新数据
+  reload();
+}
+
+const thermalcompany = ref();
+async function getThermalcompany() {
+  let params = { regionType: '城区' };
+  thermalcompany.value = await companylist(params);
+}
+
+const heatsource = ref();
+async function getHeatsource() {
+  let params = { regionType: '城区' };
+  heatsource.value = await heatsourcelist(params);
+}
+
+const heatsourcestation = ref();
+async function getHeatsourcestation() {
+  heatsourcestation.value = await heatsourcestationlist();
+}
+
+async function handleChange1(record) {
+  var params = { companyId: record, regionType: '城区' };
+  heatsource.value = await heatsourcelist(params);
+  heatsourcestation.value = [];
+}
+async function handleChange2(record) {
+  var params = { sourceId: record };
+  heatsourcestation.value = await heatsourcestationlist(params);
+}
+function handleChange3(record) {
+}
+
+function handleDetail(record) {
+  registerModal.value.cqDetail(record)
+}
+
+/**
+ * 操作栏
+ */
+function getTableAction(record) {
+  return [
+    {
+      label: '详情',
+      onClick: handleDetail.bind(null, record),
+    },
+  ];
+}
+
+
+async function init(params) {
+  console.log("🚀 ~ init ~ params:", params)
+  await getThermalcompany();
+  await getHeatsource();
+  await getHeatsourcestation();
+
+  queryParam.value.view001 = params.view001;
+  queryParam.value.view002 = params.view002;
+  reload();
+
+}
+
+defineExpose({
+  init,
+});
+
+</script>
+
+<style lang="less" scoped>
+.jeecg-basic-table-form-container {
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 8px;
+    white-space: nowrap;
+  }
+
+  .query-group-cust {
+    width: calc(50% - 15px);
+    min-width: 100px !important;
+  }
+
+  .query-group-split-cust {
+    width: 30px;
+    display: inline-block;
+    text-align: center
+  }
+}
+
+:deep(.ant-table-title) {
+  display: none;
+}
+
+:deep(.jeecg-basic-table-form-container) {
+  padding: 0px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 0px;
+}
+</style>

src/views/heating/heatanalysis/HeatanalysisDpListModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"
+  :bodyStyle="{ background: 'transparent' }" :maskStyle="{ background: 'rgba(0, 0, 0, 0.1)' }"
+  >
+    <HeatanalysisDpList ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></HeatanalysisDpList>
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import HeatanalysisDpList from './HeatanalysisDpList.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  
+  const title = ref<string>('');
+  const width = ref<string>('80%');
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+  /**
+   * 新增
+   */
+  function add(record) {
+    title.value = '新增';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.add(record);
+    });
+  }
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function init(record) {
+    title.value =  '详情';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.init(record);
+    });
+  }
+  
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    init,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>

src/views/screen/Dashboard.vue

@@ -105,10 +105,10 @@
             <div class="top-text-2">{{ cqhrzsl }}</div>
             <div class="bottom-text-2">城区换热站总数</div>
           </div>
-          <div class="left-img">
+          <div class="left-img" @click="openModal(2, '乡镇锅炉房')">
             <img src="./dashboard/dp_icon3.png" />
           </div>
-          <div class="right-text">
+          <div class="right-text" @click="openModal(2, '乡镇锅炉房')">
             <div class="top-text-3">{{ jxsl }}</div>
             <div class="bottom-text-3">乡镇总数</div>
           </div>
@@ -125,8 +125,8 @@
             <div class="area-header">
               <div class="header-left">
                 <img src="./dashboard/dp_icon4.png" alt="icon" />
-                <span class="header-left-text">乡镇瞬时热量【实时】</span>
+                <span class="header-left-text">乡镇温度【供水、回水】</span>
-                <span class="header-left-text" style="margin-left: 140px;">单位：kw</span>
+                <span class="header-left-text" style="margin-left: 140px;">单位：℃</span>
               </div>
             </div>
             <div class="area-body"></div>
@@ -135,8 +135,8 @@
             <div class="area-header">
               <div class="header-left">
                 <img src="./dashboard/dp_icon4.png" alt="icon" />
-                <span class="header-left-text">乡镇瞬时流量【实时】</span>
+                <span class="header-left-text">乡镇压力【供压、回压】</span>
-                <span class="header-left-text" style="margin-left: 130px;">单位：m³/h</span>
+                <span class="header-left-text" style="margin-left: 130px;">单位：MPa</span>
               </div>
             </div>
             <div class=" area-body"></div>
@@ -146,16 +146,16 @@
           <div class="area-header">
             <div class="header-left">
               <img src="./dashboard/dp_icon4.png" alt="icon" />
-              <span class="header-left-text">乡镇供回水温度【实时】</span>
+              <span class="header-left-text">乡镇水流量热量</span>
             </div>
             <div class="header-right" style="display: flex; ">
-              <div class="header-right">
+              <div class="header-right cursorPointer" @click="updateChartArea8()">
                 <div style="background: linear-gradient(90deg, #2E5A6B, #F7B833);"></div>
-                <div>供水</div>
+                <div>水流量</div>
               </div>
-              <div class="header-right">
+              <div class="header-right cursorPointer" @click="updateChartArea82()">
                 <div style="background: linear-gradient(90deg, #ffd3be, #FF9D71);"></div>
-                <div>回水</div>
+                <div>热量</div>
               </div>
             </div>
           </div>
@@ -207,6 +207,89 @@
       </div>
     </div>
 
+    <div v-show="modalCqVisible" class="modal-overlay" @click.self="closeCqModal">
+      <div class="modal-content" style="height: 700px;">
+        <div class="modal-header">
+          <span>详情</span>
+          <span class="close-btn" @click="closeCqModal">×</span>
+        </div>
+        <div class="modal-body list-container"  style="max-height: 600px;">
+
+          <div>
+            <a-row style="line-height: 50px;margin-bottom: 20px;">
+              <a-col :span="6" style="text-align: center;">
+                <span style="color:white;font-size:16px;">供热公司： </span> 
+                <a-select placeholder="请选择供热公司" v-model:value="queryParam.view001" style="width: 150px"
+                  @focus="focus" @change="handleChange1">
+                  <a-select-option value="">全部</a-select-option>
+                  <a-select-option :value="item.id" v-for="item in thermalcompany" :key="item.id">{{ item.companyName
+                  }}</a-select-option>
+                </a-select>
+              </a-col>
+              <a-col :span="6" style="text-align: center;">
+                <span style="color:white;font-size:16px;">锅炉房： </span> 
+                <a-select placeholder="请选择锅炉房" v-model:value="queryParam.view002" style="width: 150px"
+                  @focus="focus" @change="handleChange2">
+                  <a-select-option value="">全部</a-select-option>
+                  <a-select-option :value="item.id" v-for="item in heatsource" :key="item.id">{{ item.sourceName
+                  }}</a-select-option>
+                </a-select>
+              </a-col>
+              <a-col :span="6" style="text-align: center;">
+                <span style="color:white;font-size:16px;">换热站： </span> 
+                <a-select ref="select" placeholder="请选择换热站" v-model:value="queryParam.view004" style="width: 250px"
+                  @focus="focus" >
+                  <a-select-option value="">全部</a-select-option>
+                  <a-select-option :value="item.id" v-for="item in heatsourcestation" :key="item.id">{{ item.stationName
+                      }}</a-select-option>
+                  </a-select>
+              </a-col>
+               <a-col :span="6">
+                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchGrgsQuery">查询</a-button>
+              </a-col>
+            </a-row>
+          </div>
+          <div class="list-header" style="color: #fff;">
+            <img src="./dashboard/dp_icon4-left.png" class="left-icon" />
+            <span>供热公司</span>
+            <span>锅炉房</span>
+            <span>换热站</span>
+            <span>一次网供水温度</span>
+            <span>一次网回水温度</span>
+            <span>一次网供水压力</span>
+            <span>一次网回水压力</span>
+            <span>二次网供水温度</span>
+            <span>二次网回水温度</span>
+            <span>二次网供水压力</span>
+            <span>二次网回水压力</span>
+            <span>操作</span>
+            <img src="./dashboard/dp_icon4-right.png" class="left-icon" />
+          </div>
+          <div class="list-body">
+            <div v-if="!!modalCqData.length" v-for="item in modalCqData" :key="item.id" class="list-row"
+              style="color: #fff;">
+              <span>{{ item.view001Name }}</span>
+              <span>{{ item.view002Name }}</span>
+              <span>{{ item.view004Name }}</span>
+              <span>{{ item.view005 }}</span>
+              <span>{{ item.view006 }}</span>
+              <span>{{ item.view007 }}</span>
+              <span>{{ item.view008 }}</span>
+              <span>{{ item.view009 }}</span>
+              <span>{{ item.view010 }}</span>
+              <span>{{ item.view011 }}</span>
+              <span>{{ item.view012 }}</span>
+              <span><a-button type="link"><span style="color: #81c7e6;"
+                    @click="detailFunc(item)">详情</span></a-button></span>
+            </div>
+            <div v-else class="list-row">
+              <span>暂无数据</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div v-if="modalVisible2" class="modal-overlay2" @click.self="closeModal2">
       <div class="modal-content2">
         <ZxtCQ ref="registerModal" @close="closeModal2" />
@@ -219,11 +302,12 @@
       </div>
     </div>
 
+    <HeatanalysisDpListModal ref="heatanalysisDpListModalRef"/>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, onBeforeUnmount, nextTick, computed } from 'vue';
+import { ref, onMounted,reactive, onUnmounted, onBeforeUnmount, nextTick, computed } from 'vue';
 import { slcx, cqglfgswd, glfzb } from '/@/api/dashboard/api';
 import * as echarts from 'echarts';
 import aImg from './dashboard/c.png';
@@ -231,15 +315,23 @@ import lqImg from './dashboard/lq.png';
 import ljt from './dashboard/ljt.png';
 import ZxtCQ from './components/ZxtCQ.vue'
 import ZxtJx from './components/ZxtJx.vue'
+import HeatanalysisDpListModal from '/@/views/heating/heatanalysis/HeatanalysisDpListModal.vue'
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import { func } from 'vue-types';
+import { defHttp } from '/@/utils/http/axios';
+import { list, companylist, heatsourcelist, heatsourcestationlist } from '/@/views/heating/heatanalysis/Heatanalysis.api';
 
 const registerModal = ref();
 const registerModal3 = ref();
+const heatanalysisDpListModalRef = ref();
 
 const modalVisible = ref(false);
 const modalVisible2 = ref(false)
 const modalVisible3 = ref(false)
+const modalCqVisible = ref(false);
 const modalTitle = ref('');
 const modalData = ref<any[]>([]);
+const modalCqData = ref<any[]>([]);
 
 let chartMain: echarts.ECharts | null = null;  // 区域 main
 let chartLine: echarts.ECharts | null = null;  // 区域 line
@@ -247,8 +339,18 @@ let chartCounty: echarts.ECharts | null = null; // area-6
 let chartRadar: echarts.ECharts | null = null; // area-7 雷达图
 let chartArea8: echarts.ECharts | null = null;
 
+const queryParam = ref<any>({});
 const currentTime = ref(new Date().toLocaleString());
-
+const labelCol = reactive({
+  xs: 24,
+  sm: 4,
+  xl: 6,
+  xxl: 4
+});
+const wrapperCol = reactive({
+  xs: 24,
+  sm: 20,
+});
 let dataTimer: number | null = null;
 let timer: number;
 const cqglfsl = ref(0)
@@ -260,6 +362,7 @@ const jbzbzys = ref('rgba(27, 147, 191, 0.3)')
 
 const cityList = ref<{ name: string; value: number; raw: any }[]>([]);
 const countyList = ref<{ name: string; value: number; raw: any }[]>([]);
+const countyAddList = ref<{ name: string; value: number; raw: any }[]>([]);
 
 const cityHrzList = ref<{ name: string; value: number; raw: any }[]>([]);
 const countyHrzList = ref<{ name: string; value: number; raw: any }[]>([]);
@@ -292,11 +395,61 @@ function stopScroll() {
 
 }
 
+const thermalcompany = ref();
+async function getThermalcompany() {
+  let params = { };
+  thermalcompany.value = await companylist(params);
+}
+const heatsource = ref();
+async function getHeatsource() {
+  let params = {};
+  heatsource.value = await heatsourcelist(params);
+}
+
+const heatsourcestation = ref();
+async function getHeatsourcestation() {
+  heatsourcestation.value = await heatsourcestationlist(null);
+}
+
+
+async function handleChange1(record) {
+  queryParam.value.view001 = record;
+  queryParam.value.view002 = "";
+  queryParam.value.view003 = "";
+  var params = { companyId: record};
+  heatsource.value = await heatsourcelist(params);
+  // heatsourcestation.value = [];
+}
+async function handleChange2(record) {
+  queryParam.value.view002 = record;
+  queryParam.value.view003 = "";
+  var params = { sourceId: record };
+  heatsourcestation.value = await heatsourcestationlist(params);
+}
+function handleChange3(record) {
+}
+
+function searchGrgsQuery() { 
+  queryParam.value.pageSize = -1;
+  defHttp.get({url: '/heating/heatanalysis/page', params: queryParam.value}).then(res => {
+  modalCqData.value = res.records;
+  });
+
+}
+
 // 区域 main 柱状图
 function updateChartMain() {
   if (!chartMain) return;
   const names = cityList.value.map(i => i.name);
-  const gsValues = cityList.value.map(i => i.value);
+  const gsValues = cityList.value.map(item => ({
+  value: item.value,
+  itemStyle: {
+    // 可以在这里添加自定义属性
+    id: item.raw?.id || 0,
+    view001: item.raw?.view001 || 0,
+    view002: item.raw?.view002 || 0
+  }
+}));
   const hsValues = cityList.value.map(i => Number(i.raw?.view006 || 0));
   const maxVal = gsValues.length ? Math.max(...gsValues) * 1.15 : 100;
 
@@ -344,6 +497,22 @@ function updateChartMain() {
     ]
   }, true);
 
+  // --------- 添加点击事件 ---------
+  chartMain.off('click'); // 先移除旧的点击事件监听器，避免重复绑定
+  chartMain.on('click', function(params) {
+    var data = params.data.itemStyle;
+    // heatanalysisDpListModalRef.value.disableSubmit = true;
+    // heatanalysisDpListModalRef.value.init(data);
+    modalCqVisible.value = true;
+    setTimeout(()=>{
+      handleChange1(data.view001);
+      handleChange2(data.view002);
+      searchGrgsQuery();
+    },200)
+    
+
+  });
+
   // --------- 自动轮播 tooltip 的逻辑（每 5 秒切换） ---------
   // 清除旧定时器（避免重复）
   if (chartMain.__autoTooltipTimer) {
@@ -450,17 +619,24 @@ function updateChartCounty() {
   if (!chartCounty) return;
 
   const names = countyList.value.map(i => i.raw?.view028 ?? '未知');
-  const values = countyList.value.map(i => (i.raw?.view041 ? Number(i.raw.view041) : 0));
+  const values = countyList.value.map(i => (i.raw?.view035 ? Number(i.raw.view035) : 0));
-  const maxVal = values.length ? Math.max(...values) * 1.15 : 100;
+  const values2 = countyList.value.map(i => (i.raw?.view036 ? Number(i.raw.view036) : 0));
+  const maxVal = values.length ? Math.max(...values, ...values2) * 1.15 : 100;
 
   chartCounty.setOption({
-    grid: { left: 10, right: 60, bottom: 14, top: 28, containLabel: true },
+    grid: { 
+      left: 10, 
+      right: 120, // 增加右侧空间以容纳两个标签
+      bottom: 14, 
+      top: 28, 
+      containLabel: true 
+    },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
         shadowStyle: {
-          color: 'transparent' // 设置为透明，取消悬浮背景
+          color: 'transparent'
         }
       },
       backgroundColor: 'transparent',
@@ -469,7 +645,8 @@ function updateChartCounty() {
         var content = '<div style="position:relative;border-left:2px solid #cccccc46;border-right:2px solid #cccccc46;border-radius:5px;background:linear-gradient(to right bottom,#08101D,#1a3b70);color:#ffffff;padding:5px 10px;margin-left:10px;z-index:99;text-align:center;">'
           + '<div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
           + '<div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
-          + params[0].name + '</br>瞬时热量:' + params[1].value
+          + params[0].name + '</br>供水温度:' + params[1].value
+          + '</br>回水温度:' + params[2].value
           + '</div>';
         return content;
       }
@@ -484,54 +661,191 @@ function updateChartCounty() {
     yAxis: {
       type: 'category',
       data: names,
-      axisLabel: { color: jbztys.value, interval: 0,fontSize: 18,  },
+      axisLabel: { 
+        color: jbztys.value, 
+        interval: 0, 
+        fontSize: 16, // 稍微减小字体以适应更多内容
+        margin: 2 // 减少边距
+      },
       axisTick: { show: false },
       axisLine: { show: false }
     },
     series: [
       // 背景条
-      { type: 'bar', barWidth: 3, data: names.map(() => maxVal), barGap: '-100%', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'rgba(106,211,255,0.06)' }, { offset: 1, color: 'rgba(106,211,255,0.01)' }] } }, z: 1, silent: true },
-      // 主体条
-      { type: 'bar', barWidth: 4, data: values, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#ECA924' }, { offset: 1, color: '#0D9FD8' }] }, opacity: 0.95 }, z: 2 },
-      // 顶部小图片
-      { type: 'pictorialBar', symbol: `image://${lqImg}`, symbolSize: [25, 25], symbolOffset: [10, 0], symbolPosition: 'end', data: values, z: 3, silent: true },
-
       { 
         type: 'bar', 
-        barWidth: 4,
+        barWidth: 10, 
+        data: names.map(() => maxVal), 
+        barGap: '-100%', 
+        itemStyle: { 
+          color: { 
+            type: 'linear', 
+            x: 0, y: 0, x2: 1, y2: 0, 
+            colorStops: [{ offset: 0, color: 'rgba(106,211,255,0.06)' }, { offset: 1, color: 'rgba(106,211,255,0.01)' }] 
+          } 
+        }, 
+        z: 1, 
+        silent: true 
+      },
+      
+      // 第一个主体条（供水温度）- 左侧柱子
+      { 
+        type: 'bar', 
+        barWidth: 10, // 减小宽度
+        barGap: '60%', // 设置柱子间距
+        data: values.map((val, index) => ({
+          value: val,
+          itemStyle: {
+            color: {
+              type: 'linear', 
+              x: 0, y: 0, x2: 1, y2: 0, 
+              colorStops: [{ offset: 0, color: '#ECA924' }, { offset: 1, color: '#0D9FD8' }]
+            }
+          }
+        })), 
+        itemStyle: { 
+          opacity: 0.95 
+        }, 
+        z: 2 
+      },
+      
+      // 第二个主体条（回水温度）- 右侧柱子
+      { 
+        type: 'bar', 
+        barWidth: 10, // 减小宽度
+        barGap: '60%', // 设置柱子间距
+        data: values2.map((val, index) => ({
+          value: val,
+          itemStyle: {
+            color: {
+              type: 'linear', 
+              x: 0, y: 0, x2: 1, y2: 0, 
+              colorStops: [{ offset: 0, color: '#FF6B6B' }, { offset: 1, color: '#4ECDC4' }]
+            }
+          }
+        })), 
+        itemStyle: { 
+          opacity: 0.95 
+        }, 
+        z: 3 
+      },
+      
+      // 第一个顶部小图片（供水温度）
+      { 
+        type: 'pictorialBar', 
+        symbol: `image://${lqImg}`, 
+        symbolSize: [25, 25], // 减小图标大小
+        symbolOffset: [13, -7], // 向左偏移，放在左侧柱子顶部
+        symbolPosition: 'end', 
+        data: values, 
+        z: 4, 
+        silent: true 
+      },
+      
+      // 第二个顶部小图片（回水温度）
+      { 
+        type: 'pictorialBar', 
+        symbol: `image://${lqImg}`, 
+        symbolSize: [25, 25], // 减小图标大小
+        symbolOffset: [13, 9], // 向右偏移，放在右侧柱子顶部
+        symbolPosition: 'end', 
+        data: values2, 
+        z: 5, 
+        silent: true 
+      },
+
+      // 第一个标签（供水温度）- 左侧标签
+      {
+        type: 'bar',
+        barWidth: 8,
         data: values.map(() => maxVal),
-        itemStyle: { color: 'transparent' }, // 透明柱子
+        itemStyle: { color: 'transparent' },
         label: {
           show: true,
           position: 'right',
-          distance: 0,
+          distance: 40,
-          fontSize: 16, // 添加这行来设置文字大小
+          fontSize: 18, // 减小字体大小
+          offset: [-20, -20],  // 添加偏移量
           align: 'left',
           color: '#ffffff',
-          formatter: (params: any) => `{icon|} ${values[params.dataIndex]}`, // 数值左边加图标
+          formatter: (params) => {
+            const value = values[params.dataIndex];
+            const value2 = values2[params.dataIndex];
+            return `{icon|} ${value.toFixed(1)} - ${value2.toFixed(2)}`; // 格式化数值
+          },
           rich: {
             icon: {
-              height: 14,           // 图标高度
+              width: 12,
+              height: 12,
               align: 'center',
               backgroundColor: {
-                image: ljt      // 使用导入的图片变量
+                image: ljt
               }
             }
           }
         },
-        z: 4,
+        z: 7,
         silent: true
-      }
+      },
       
+      // 第二个标签（回水温度）- 右侧标签
+      // {
+      //   type: 'bar',
+      //   barWidth: 8,
+      //   data: values2.map(() => maxVal),
+      //   itemStyle: { color: 'transparent' },
+      //   label: {
+      //     show: true,
+      //     position: 'right',
+      //     distance: 40, // 增加距离，放在更右侧
+      //     fontSize: 12, // 减小字体大小
+      //     offset: [0, -20],  // 添加偏移量
+      //     align: 'left',
+      //     color: '#ffffff',
+      //     formatter: (params) => {
+      //       const value = values2[params.dataIndex];
+      //       return `{icon2|} ${value.toFixed(1)}`; // 格式化数值
+      //     },
+      //     rich: {
+      //       icon2: {
+      //         width: 12,
+      //         height: 12,
+      //         align: 'center',
+      //         backgroundColor: {
+      //           image: ljt
+      //         }
+      //       }
+      //     }
+      //   },
+      //   z: 7,
+      //   silent: true
+      // }
     ],
   }, true);
+
+  // 添加点击事件
+  chartCounty.off('click');
+  chartCounty.on('click', function(params) {
+    if (params.seriesIndex === 1 || params.seriesIndex === 2) {
+      const clickedName = params.name;
+      const gsValue = values[params.dataIndex];
+      const hsValue = values2[params.dataIndex];
+      
+      // 这里可以添加你的业务逻辑
+    }
+  });
 }
 // area-7 的雷达图更新函数
 function updateRadarChart() {
   if (!chartRadar) return;
-  const names = countyList.value.map(i => i.raw?.view028.replace('锅炉房', '') + '\n' + i.raw?.view037 );
+  
-  const values = countyList.value.map(i => (i.raw?.view037 ? Number(i.raw.view037) : 0));
+  // 获取数据
-  const maxVal = values.length ? Math.max(...values) * 1.15 : 100;
+  const names = countyList.value.map(i => i.raw?.view028.replace('锅炉房', '') + '\n' + i.raw?.view007+"-"+i.raw?.view008);
+  const values1 = countyList.value.map(i => (i.raw?.view007 ? Number(i.raw.view007) : 0));
+  const values2 = countyList.value.map(i => (i.raw?.view008 ? Number(i.raw.view008) : 0)); // 假设 view038 是第二个数据集
+  
+  // 计算最大值
+  const maxVal = Math.max(...values1, ...values2) * 1.15 || 100;
 
   chartRadar.setOption({
     grid: { left: 10, right: 40, bottom: 14, top: 0, containLabel: true },
@@ -542,9 +856,9 @@ function updateRadarChart() {
       formatter: function (params) {
         const values = Array.isArray(params.value) ? params.value : [params.value];
         let content1 = `${params.name}<br/>`;
-        values.forEach((val, i) => {
+        // values.forEach((val, i) => {
-          content1 += `${names[i]}: ${val}<br/>`;
+        //   content1 += `${names[i]}: ${val}<br/>`;
-        });
+        // });
         var content = '<div style="position:relative;border-left:2px solid #cccccc46;border-right:2px solid #cccccc46;border-radius:5px;background:linear-gradient(to right bottom,#08101D,#1a3b70);color:#ffffff;padding:5px 10px;margin-left:10px;z-index:99;text-align:center;">'
           + '<div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
           + '<div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
@@ -554,7 +868,7 @@ function updateRadarChart() {
       }
     },
     legend: {
-      data: ['瞬时流量'],
+      data: ['供水压力', '回水压力'], // 更新图例
       textStyle: { color: '#f4f4f4' },
       bottom: 10
     },
@@ -585,39 +899,75 @@ function updateRadarChart() {
       splitArea: { show: true, areaStyle: { color: ['rgba(15,40,70,0.5)', 'rgba(20,50,80,0.3)'] } },
       axisLine: { lineStyle: { color: 'rgba(100,200,255,0.5)' } }
     },
-    series: [{
+    series: [
-      name: '瞬时流量',
+      // 第一个雷达图（瞬时流量）
+      {
+        name: '供水压力',
         type: 'radar',
         lineStyle: { width: 3, color: '#00e4ff' },
         areaStyle: {
           color: {
-          type: 'radial',    // 径向渐变
+            type: 'radial',
-          x: 0.5,            // 渐变中心 x（0~1）
+            x: 0.5,
-          y: 0.5,            // 渐变中心 y（0~1）
+            y: 0.5,
-          r: 0.5,            // 渐变半径
+            r: 0.5,
             colorStops: [
-            { offset: 0, color: 'rgba(9,147,149,0.0)' },  // 中心颜色
+              { offset: 0, color: 'rgba(9,147,149,0.0)' },
-            { offset: 0.4, color: 'rgba(9,147,149,0.2)' }, // 中间颜色
+              { offset: 0.4, color: 'rgba(9,147,149,0.2)' },
-            { offset: 0.7, color: 'rgba(9,147,149,0.6)' }, // 中间颜色
+              { offset: 0.7, color: 'rgba(9,147,149,0.6)' },
-            { offset: 1, color: 'rgba(9,147,149,0.8)' }      // 外圈透明
+              { offset: 1, color: 'rgba(9,147,149,0.8)' }
             ]
           }
-      }
+        },
-      ,
         itemStyle: { color: 'rgba(0,255,255,0.8)' },
-      data: [{ value: values, name: '瞬时流量', symbol: 'none', symbolSize: 6, lineStyle: { width: 2, color: 'rgba(9,147,149, 0.8)' } }]
+        data: [{ 
-    }],
+          value: values1, 
+          name: '供水压力', 
+          symbol: 'none', 
+          symbolSize: 6, 
+          lineStyle: { width: 2, color: 'rgba(9,147,149,0.8)' } 
+        }]
+      },
+      
+      // 第二个雷达图（累计流量）
+      {
+        name: '回水压力',
+        type: 'radar',
+        lineStyle: { width: 3, color: '#FFA500' }, // 橙色线条
+        areaStyle: {
+          color: {
+            type: 'radial',
+            x: 0.5,
+            y: 0.5,
+            r: 0.5,
+            colorStops: [
+              { offset: 0, color: 'rgba(255,165,0,0.0)' },
+              { offset: 0.4, color: 'rgba(255,165,0,0.2)' },
+              { offset: 0.7, color: 'rgba(255,165,0,0.6)' },
+              { offset: 1, color: 'rgba(255,165,0,0.8)' }
+            ]
+          }
+        },
+        itemStyle: { color: 'rgba(255,165,0,0.8)' },
+        data: [{ 
+          value: values2, 
+          name: '回水压力', 
+          symbol: 'none', 
+          symbolSize: 6, 
+          lineStyle: { width: 2, color: 'rgba(255,165,0,0.8)' } 
+        }]
+      }
+    ]
   }, true);
 }
 
+// area-8 折线图更新函数
 function updateChartArea8() {
   if (!chartArea8) return;
 
   const names = countyList.value.map(i => i.raw?.view028.replace('锅炉房', '') ?? '未知');
-  const supplyData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view035) : Number(i.raw.view005));
+  const supplyData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view038) : Number(i.raw.view038));
-  const returnData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view036) : Number(i.raw.view006));
 
-  const maxVal = Math.max(...supplyData.concat(returnData)) * 1.15 || 100;
 
   chartArea8.setOption({
     grid: { left: 30, right: 10, bottom: 14, top: 30, containLabel: true },
@@ -641,8 +991,7 @@ function updateChartArea8() {
           <div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
           <div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
           ${params[0].name}<br/>
-          供水: ${supplyData[p.dataIndex]}<br/>
+          水流量: ${supplyData[p.dataIndex]}
-          回水: ${returnData[p.dataIndex]}
         </div>`;
         return content;
       }
@@ -658,7 +1007,7 @@ function updateChartArea8() {
     },
     yAxis: {
       type: 'value',
-      name: '温度℃',
+      name: 'm³/h',
       nameLocation: 'end',
       nameTextStyle: {
         color: '#ffffff',
@@ -678,7 +1027,7 @@ function updateChartArea8() {
     },
     series: [
       {
-        name: '供水',
+        name: '热量',
         type: 'line',
         smooth: true,
         data: supplyData,
@@ -696,8 +1045,120 @@ function updateChartArea8() {
         },
         label: { show: false }
       },
+    ]
+  }, true);
+
+  // -------- 自动轮播 tooltip（每 5 秒） --------
+  // 清理旧定时器（避免重复）
+  if (chartArea8.__autoTooltipTimer) {
+    clearInterval(chartArea8.__autoTooltipTimer);
+    chartArea8.__autoTooltipTimer = null;
+    try { chartArea8.dispatchAction({ type: 'hideTip' }); } catch (e) { }
+    try { chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
+    try { chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
+  }
+
+  if (!names || names.length === 0) return;
+
+  let idx = 0;
+  // 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
+  setTimeout(() => {
+    try {
+      chartArea8.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+      chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+      // 同时也可以高亮第二条线的点（可选）
+      chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+    } catch (e) { }
+    chartArea8.__autoTooltipTimer = setInterval(() => {
+      try {
+        // 取消上一个高亮
+        chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
+        chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
+
+        // 下一个索引
+        idx = (idx + 1) % names.length;
+
+        // 显示 tooltip（axis 模式会显示两条线的数据）并高亮
+        chartArea8.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+        chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+        chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+      } catch (e) {
+        // console.error(e);
+      }
+    }, 5000);
+  }, 2500);
+
+}
+
+
+
+// area-8 折线图更新函数
+function updateChartArea82() {
+  if (!chartArea8) return;
+
+  const names = countyAddList.value.map(i => i.raw?.view028.replace('锅炉房', '') ?? '未知');
+  const returnData = countyAddList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view042) : Number(i.raw.view042));
+
+
+  chartArea8.setOption({
+    grid: { left: 30, right: 10, bottom: 14, top: 30, containLabel: true },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'transparent',
+      extraCssText: `border:none;box-shadow:none;padding:0;margin:0;pointer-events:none;`,
+      formatter: function (params) {
+        const p = params[0];
+        const content = `<div style="
+        position:relative;
+        border-left:2px solid #cccccc46;
+        border-right:2px solid #cccccc46;
+        border-radius:5px;
+        background:linear-gradient(to right bottom, #08101D, #1a3b70);
+        color:#ffffff;
+        padding:5px 10px;
+        margin-left:10px;
+        z-index:99;
+        text-align:center;">
+          <div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
+          <div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
+          ${params[0].name}<br/>
+          热量: ${returnData[p.dataIndex]}
+        </div>`;
+        return content;
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: names,
+      axisLabel: { rotate: 0, interval: 0, color: jbztys.value ,fontSize: 16},
+      axisLine: { lineStyle: { color: jbzbzys.value } },
+      axisTick: { show: false },
+      splitLine: { show: false }
+    },
+    yAxis: {
+      type: 'value',
+      name: '焦耳',
+      nameLocation: 'end',
+      nameTextStyle: {
+        color: '#ffffff',
+        align: 'right',
+        verticalAlign: 'bottom',
+        fontSize: 11
+      },
+      nameGap: 15,
+      axisLabel: {
+        color: jbztys.value,
+        margin: 8,
+        formatter: '{value}'
+      },
+      axisLine: { show: true, lineStyle: { color: jbzbzys.value } },
+      axisTick: { show: false },
+      splitLine: { show: true, lineStyle: { type: [8, 2], color: '#66666655' } },
+    },
+    series: [
       {
-        name: '回水',
+        name: '热量',
         type: 'line',
         smooth: true,
         data: returnData,
@@ -882,6 +1343,51 @@ function stopAutoTooltipArea8() {
 const z = ref<any[]>([]);
 const doubleZList = computed(() => [...z.value, ...z.value]);
 
+function filterSongshanData(data) {
+  // 分离松山数据和其他数据
+  const songshanData = data.filter(item => item.raw.view027 === "松山");
+  const otherData = data.filter(item => item.raw.view027 !== "松山");
+  
+  // 对松山数据按 view035 降序排序，取最大值的那条
+  if (songshanData.length > 0) {
+    songshanData.sort((a, b) => Number(b.raw.view035) - Number(a.raw.view035));
+    const maxSongshan = songshanData[0];
+    
+    // 返回其他数据 + 松山最大值数据
+    return [...otherData, maxSongshan];
+  }
+  
+  // 如果没有松山数据，直接返回原数据
+  return data;
+}
+
+function sumSongshanData(data) {
+  // 分离松山数据和其他数据
+  const songshanData = data.filter(item => item.raw.view027 === "松山");
+  const otherData = data.filter(item => item.raw.view027 !== "松山");
+  
+  // 对松山数据按 view035 降序排序，取最大值的那条
+  if (songshanData.length > 0) {
+    songshanData.sort((a, b) => Number(b.raw.view035) - Number(a.raw.view035));
+    const maxSongshan = songshanData[0];
+      var sumView038 = 0;
+      var sumView042 = 0;
+    for(var i=0;i<songshanData.length;i++){
+      var param = songshanData[i];
+      sumView038 = sumView038 + Number(param.view038);
+      sumView042 = sumView042 + Number(param.sumView042);
+    }
+    maxSongshan.view038 = sumView038;
+    maxSongshan.view042 = sumView042;
+    
+    // 返回其他数据 + 松山最大值数据
+    return [...otherData, maxSongshan];
+  }
+  
+  // 如果没有松山数据，直接返回原数据
+  return data;
+}
+
 async function loadData() {
   try {
     const s = await slcx();
@@ -916,7 +1422,8 @@ async function loadData() {
     });
 
     cityList.value = cities;
-    countyList.value = countys;
+    countyList.value = filterSongshanData(countys);
+    countyAddList.value = sumSongshanData(countys);
     //
     const arr2 = (z_ && z_.data) ? z_.data : [];
     const cities2: { name: string; value: number; raw: any }[] = [];
@@ -978,6 +1485,9 @@ onMounted(() => {
 
   window.addEventListener('resize', handleFullScreenChange);
 
+  getThermalcompany();
+  // getHeatsource();
+  // getHeatsourcestation();
 });
 
 onUnmounted(() => {
@@ -1034,10 +1544,11 @@ function openModal(type: number, title: string) {
 function closeModal() {
   modalVisible.value = false;
 }
+function closeCqModal() {
+  modalCqVisible.value = false;
+}
 
 async function detailFunc(record) {
-  console.log(record);
-  console.log(modalType);
   if (modalType.value == 2) {
     modalVisible3.value = true;
     await nextTick()
@@ -1528,7 +2039,7 @@ function closeModal3() {
 
 .modal-content {
   width: 80%;
-  max-width: 1000px;
+  // max-width: 1000px;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(6px);
   border-radius: 12px;
@@ -1585,4 +2096,7 @@ function closeModal3() {
   max-height: 400px;
   overflow-y: auto;
 }
+.cursorPointer {
+  cursor: pointer;
+}
 </style>

src/views/screen/components/ZxtCQ.vue

@@ -117,6 +117,7 @@ function initChartsOptions(records: any[], record_: any) {
     legend: { top: 36, left: 'center', textStyle: { color: '#ffffff' } }, // 设置折线图legend文字为白色
     grid: { left: '5%', right: '5%', bottom: 70, top: 70, containLabel: true },
     xAxis: {
+      show: false,
       type: 'category',
       data: xAxis,
       boundaryGap: false,

src/views/screen/components/ZxtJX.vue

@@ -158,6 +158,7 @@ function initChartsOptions(records: any[], record_: any) {
     legend: { top: 36, left: 'center', textStyle: { color: '#ffffff' } }, // 设置折线图legend文字为白色
     grid: { left: '5%', right: '5%', bottom: 70, top: 70, containLabel: true },
     xAxis: {
+      show: false,
       type: 'category',
       data: xAxis,
       boundaryGap: false,