得分水平分布和行业水平分布增加点击事件

src/views/dashboard/sandianscore.vue

@@ -1,56 +1,116 @@
 <template>
-  <div :class="className" :style="{ height: height, width: width }">
+<!-- 得分水平分布-企业水平分析 - littlegreen - 补充form和label -->
+  <div
+    :class="className"
+    :style="{ height: '100%', width: width, padding: '20px' }"
+  >
     <div class="select-container">
-      <el-select v-model="selectedDataKey" @change="updateChart">
-        <el-option v-for="key in dataKeys" :key="key" :value="key" :label="keyToChinese[key]">
-          {{ keyToChinese[key] }}
-        </el-option>
-      </el-select>
-      <el-select v-model="selectedYear" @change="updateChart">
-        <el-option v-for="year in availableYears" :key="year" :value="year">
-          {{ year }}
-        </el-option>
-      </el-select>
-      <el-input
-        v-model="selectedCode"
-        placeholder="请输入行业代码"
-        clearable
-        style="width: 180px;"
-      />
-      <el-input
-        v-model="selectedRange"
-        placeholder="请设置数据分布区间"
-        clearable
-        style="width: 180px;"
-      />
-      <div style="display: inline; padding-left: 10px;">当前行业: {{ industryMap.get(selectedCode) }}</div>
+      <el-form
+        style="
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr;
+          align-items: center;
+          grid-gap: 20px;
+        "
+        label-width="100px"
+      >
+        <el-form-item label="评估指标" style="margin-bottom: 0">
+          <el-select v-model="selectedDataKey" style="width: 100%">
+            <el-option
+              v-for="key in dataKeys"
+              :key="key"
+              :value="key"
+              :label="keyToChinese[key]"
+            >
+              {{ keyToChinese[key] }}
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="年度" style="margin-bottom: 0"
+          ><el-select v-model="selectedYear" style="width: 100%">
+            <el-option v-for="year in availableYears" :key="year" :value="year">
+              {{ year }}
+            </el-option>
+          </el-select></el-form-item
+        >
+        <el-form-item label="行业代码" style="margin-bottom: 0"
+          ><el-input
+            v-model="selectedCode"
+            placeholder="请输入行业代码"
+            clearable
+            style="width: 100%"
+        /></el-form-item>
+        <el-form-item label="检测区间" style="margin-bottom: 0">
+          <div style="display: flex">
+            <el-input v-model="detectMin" placeholder="最小值" clearable />
+            <span style="margin: 0 10px">~</span>
+            <el-input v-model="detectMax" placeholder="最大值" clearable />
+          </div>
+        </el-form-item>
+        <!-- <el-form-item label="数据分布区间"  style="margin-bottom:0"
+          ><el-input
+            v-model="selectedRange"
+            placeholder="请设置数据分布区间"
+            clearable
+            style="width: 240px"
+        /></el-form-item> -->
+        <div style="display: inline; padding-left: 10px">
+          当前行业: {{ industryMap.get(selectedCode) }}
+        </div>
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="updateChart"
+            >搜索</el-button>
+        </el-form-item>
+      </el-form>
     </div>
     <div ref="chart" :style="{ height: height, width: width }"></div>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column
+        prop="industryName"
+        label="行业名称"
+        width="200"
+      ></el-table-column>
+      <el-table-column prop="year" label="年度" width="200"> </el-table-column>
+      <el-table-column prop="enterpriseId" label="企业ID"></el-table-column>
+      <el-table-column
+        prop="value"
+        label="Z-score得分"
+        width="200"
+      ></el-table-column>
+      <el-table-column
+        prop="level"
+        label="水平评价"
+        width="200"
+      ></el-table-column>
+    </el-table>
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
 import { listScore } from "@/api/score/score"; // 导入得分数据的接口
 import { listIndustry } from "@/api/industry/industry"; // 导入行业数据的接口
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize' 
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart",
     },
     width: {
       type: String,
-      default: '100%'
+      default: "100%",
     },
     height: {
       type: String,
-      default: '400px'
-    }
+      default: "400px",
+    },
   },
   data() {
     return {
@@ -58,43 +118,43 @@ export default {
       chartData: [],
       industryData: [],
       industryMap: new Map(),
-      selectedDataKey: 'totalIndustrialValueScore', // 默认选择的字段
+      selectedDataKey: "totalIndustrialValueScore", // 默认选择的字段
       selectedCode: null,
       dataKeys: [
         // 'mainBusinessScore',
         // 'landAreaScore',
-        'totalIndustrialValueScore',
+        "totalIndustrialValueScore",
         // 'gdpScore',
-        'taxableIncomeScore',
-        'paidTaxScore',
+        "taxableIncomeScore",
+        "paidTaxScore",
         // 'mainBusinessIncomeScore',
         // 'employeeNumberScore',
         // 'profitScore',
         // 'ownerEquityScore',
-        'fundingScore',
-        'energyConsumeScore',
-        'powerConsumeScore',
+        "fundingScore",
+        "energyConsumeScore",
+        "powerConsumeScore",
         // 其他得分字段...
       ], // 可选项
       keyToChinese: {
-        'mainBusinessScore': '主营业务活动得分',
-        'landAreaScore': '用地面积得分',
-        'totalIndustrialValueScore': '工业总产值得分',
-        'gdpScore': '工业增加值得分',
-        'taxableIncomeScore': '应税收入得分',
-        'paidTaxScore': '实缴税金得分',
-        'mainBusinessIncomeScore': '主营业务收入得分',
-        'employeeNumberScore': '从业人员数得分',
-        'profitScore': '利润总额得分',
-        'ownerEquityScore': '所有者权益得分',
-        'fundingScore': '研发经费得分',
-        'energyConsumeScore': '能源消费量得分',
-        'powerConsumeScore': '电力消费量得分',
+        mainBusinessScore: "主营业务活动得分",
+        landAreaScore: "用地面积得分",
+        totalIndustrialValueScore: "工业总产值得分",
+        gdpScore: "工业增加值得分",
+        taxableIncomeScore: "应税收入得分",
+        paidTaxScore: "实缴税金得分",
+        mainBusinessIncomeScore: "主营业务收入得分",
+        employeeNumberScore: "从业人员数得分",
+        profitScore: "利润总额得分",
+        ownerEquityScore: "所有者权益得分",
+        fundingScore: "研发经费得分",
+        energyConsumeScore: "能源消费量得分",
+        powerConsumeScore: "电力消费量得分",
       },
       selectedYear: null,
       queryParams: {
         pageNum: 1,
-        pageSize: 2000000,  // 默认 2000000 条(全部一次性数据)
+        pageSize: 2000000, // 默认 2000000 条(全部一次性数据)
         enterpriseName: null,
         location: null,
         code: null,
@@ -111,7 +171,7 @@ export default {
         funding: null,
         energyConsume: null,
         year: null,
-        month: null
+        month: null,
       },
       industryQueryParams: {
         pageNum: 1,
@@ -120,13 +180,17 @@ export default {
         code: null,
       }, //  查询行业信息
       availableYears: [],
-      selectedRange: 0.2, // 不能为 0
-    }
+      selectedRange: 0.1, // 不能为 0， - littlegreen - 固定0.1
+      // littlegreen - 检测区间 和 表格数据
+      detectMin: null,
+      detectMax: null,
+      tableData: [],
+    };
   },
   mounted() {
     this.$nextTick(() => {
       this.fetchData();
-    })
+    });
   },
   beforeDestroy() {
     if (this.chart) {
@@ -135,88 +199,176 @@ export default {
   },
   methods: {
     fetchData() {
-      listScore(this.queryParams).then(response => {
-        this.chartData = response.rows;
-        this.availableYears = [...new Set(this.chartData.map(item => item.year))];
-        this.selectedYear = this.availableYears[0] || null;
-        this.selectedCode = [...new Set(this.chartData.map(item => item.code))][0];
-        this.initChart();
-      }).catch(error => {
-        console.error('Error fetching data:', error);
-      });
-
-      listIndustry(this.industryQueryParams).then(response => {
-        this.industryData = response.rows;
-        console.log('industry_info' + this.industryData)
-        this.industryMap = this.industryData.reduce((map, item) => {
-          const key = `${item.code}`; // 键是行业代码
-          map.set(key, item.industryName); // 将键和对应的行业名称存储到Map中
-          return map;
-        }, new Map());
+      listScore(this.queryParams)
+        .then((response) => {
+          this.chartData = response.rows;
+          this.availableYears = [
+            ...new Set(this.chartData.map((item) => item.year)),
+          ];
+          this.selectedYear = this.availableYears[0] || null;
+          // this.selectedCode = [
+          //   ...new Set(this.x.map((item) => item.code)),
+          // ][0];
+          // littlegreen - 解决报错
+          if (Array.isArray(this.chartData)) {
+            this.selectedCode = [
+              ...new Set(this.chartData.map((item) => item.code)),
+            ][0];
+          } else {
+            console.warn("this.x is not an array or is undefined.");
+            this.selectedCode = null; // 或根据需求设置一个默认值
+          }
+          this.initChart();
+        })
+        .catch((error) => {
+          console.error("Error fetching data:", error);
+        });
 
-      }).catch(error => {
-        console.error('Error fetching data:', error);
-      });
+      listIndustry(this.industryQueryParams)
+        .then((response) => {
+          this.industryData = response.rows;
+          // console.log("industry_info" + this.industryData);
+          this.industryMap = this.industryData.reduce((map, item) => {
+            const key = `${item.code}`; // 键是行业代码
+            map.set(key, item.industryName); // 将键和对应的行业名称存储到Map中
+            return map;
+          }, new Map());
+        })
+        .catch((error) => {
+          console.error("Error fetching data:", error);
+        });
     },
     initChart() {
       if (this.chart) {
         this.chart.dispose();
       }
-      this.chart = echarts.init(this.$refs.chart, 'macarons');
+      this.chart = echarts.init(this.$refs.chart, "macarons");
       this.updateChart();
     },
     updateChart() {
+      const that = this;
       if (!this.chart) {
         return;
       }
+      let flag = this.checkNumber();
+      if (flag == 2) {
+        return;
+      }
+      // console.log(flag);
       let filteredData = this.chartData;
       if (this.selectedYear) {
-        filteredData = filteredData.filter(item => item.year === this.selectedYear && item.code === this.selectedCode);
+        filteredData = filteredData.filter(
+          (item) =>
+            item.year === this.selectedYear && item.code === this.selectedCode
+        );
       }
-      const values = filteredData.map(item => item[this.selectedDataKey]);
-      const minVal = 0;
+      const values = filteredData.map((item) => item[this.selectedDataKey]);
+      const minVal = Math.min(...values).toFixed(2);
       const maxVal = Math.max(...values).toFixed(2);
+      console.log(filteredData, "filteredData");
+      if (
+        this.selectedRange === null ||
+        this.selectedRange === "" ||
+        isNaN(+this.selectedRange)
+      )
+        this.selectedRange = "0.1";
+      else if (Number(this.selectedRange) <= 0) this.selectedRange = "0.1";
 
-      if (this.selectedRange === null || this.selectedRange === '' || isNaN(+this.selectedRange)) this.selectedRange = '0.1';
-      else if (Number(this.selectedRange) <= 0) this.selectedRange = '0.1';
-
-      const binCount = Math.ceil((maxVal - minVal) / Number(this.selectedRange));
-
+      const binCount = Math.ceil(
+        (maxVal - minVal) / Number(this.selectedRange)
+      );
       let maxNum = -1;
-
+      // littlegreen - 传入最大值、最小值、间隔，获得区间列表
+      function generateRangeArray(x1, x2, interval) {
+        x1 = parseFloat(x1);
+        x2 = parseFloat(x2);
+        interval = parseFloat(interval);
+        const result = [];
+        let current = x1;
+        while (current < x2) {
+          let next;
+          if (current == x1) {
+            current = Math.floor(current * 10) / 10;
+          }
+          next = parseFloat((current + interval).toFixed(2));
+          // 保留两位小数
+          result.push({
+            name: `${current}-${next}`,
+            min: current,
+            max: next,
+          });
+          current = next;
+        }
+        // 最后一个区间
+        if (current <= x2) {
+          result.push({
+            name: `${current}-${x2}`,
+            min: current,
+            max: x2,
+          });
+        }
+        return result;
+      }
       // 生成区间标签和频次
       const histogramData = [];
-      for (let i = 0; i < binCount; i++) {
-        const x0 = minVal + i * Number(this.selectedRange);
-        const x1 = Math.min(x0 + Number(this.selectedRange), maxVal).toFixed(2);
-        const label = `${x0}-${x1}`;
+      let result = generateRangeArray(minVal, maxVal, 0.1);
+      // littlegreen - 获取不同区间的数据
+      result.forEach((item) => {
         let count = 0;
-        count += values.filter(value => value >= x0 && value < x1).length;
-        if (x1 === maxVal) {
-          count += values.filter(value => value === maxVal).length;
+        count += values.filter(
+          (value) => value >= item.min && value < item.max
+        ).length;
+        if (item.max === maxVal) {
+          count += values.filter((value) => value === item.max).length;
         }
+        histogramData.push({ name: item.name, value: count });
+      });
+      // for (let i = 0; i < binCount; i++) {
+      //   const x0 = minVal + i * Number(this.selectedRange);
+      //   const x1 = Math.min(x0 + Number(this.selectedRange), maxVal).toFixed(2);
 
-        if (count > 0) {
-          if (count > maxNum) {
-            maxNum = count;
-          }
-          histogramData.push({ name: label, value: count });
-        }
-      }
+      //   // const label = `${x0}-${x1}`;
+      //   // let count = 0;
+      //   // count += values.filter((value) => value >= x0 && value < x1).length;
+      //   // if (x1 === maxVal) {
+      //   //   count += values.filter((value) => value === maxVal).length;
+      //   // }
 
+      //   // if (count > 0) {
+      //   //   if (count > maxNum) {
+      //   //     maxNum = count;
+      //   //   }
+      //   //   histogramData.push({ name: label, value: count });
+      //   // }
+      // }
 
-      const maxHistogramValue = Math.max(...histogramData.map(item => item.value));
-      const totalHistogramValue = histogramData.reduce((sum, item) => sum + item.value, 0);
+      const maxHistogramValue = Math.max(
+        ...histogramData.map((item) => item.value)
+      );
+      const totalHistogramValue = histogramData.reduce(
+        (sum, item) => sum + item.value,
+        0
+      );
 
       // const quadraticData = this.generateQuadraticData(binCount, maxHistogramValue, totalHistogramValue);
-
+      // littlegreen - 去掉line和scatter，增加x轴拖动，根据检测区间修改柱状的颜色
       const option = {
+        color: ["rgba(245,0,0,0.6)"],
+        dataZoom: [
+          {
+            type: "inside", // 内置于坐标系中
+            start: 0,
+            end: 100,
+            xAxisIndex: [0],
+          },
+        ],
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow'
+            type: "shadow",
           },
-          formatter: (params) => { // 使用箭头函数来保持 this 的上下文
+          formatter: (params) => {
+            // 使用箭头函数来保持 this 的上下文
             const seriesName = params[0].name; // 系列名称
             const dataIndex = params[0].dataIndex; // 数据索引
             const value = params[0].data; // 实际的数据值
@@ -224,71 +376,139 @@ export default {
             const yAxisLabel = params[0].seriesName;
             // 构建自定义的 tooltip 内容，包含年份
             return `${xAxisLabel}<br> ${yAxisLabel}: ${value}`;
-          }
+          },
         },
         legend: {
-          data: [`${this.selectedYear}年 ${this.keyToChinese[this.selectedDataKey]}企业数统计`]
+          data: [
+            `${this.selectedYear}年 ${
+              this.keyToChinese[this.selectedDataKey]
+            }企业数统计`,
+          ],
         },
         grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+          left: "3%",
+          right: "4%",
+          bottom: "50px",
+          containLabel: true,
         },
         xAxis: {
-          type: 'category',
-          name: '分布区间',
-          data: histogramData.map(item => item.name),
+          type: "category",
+          name: "分布区间",
+          data: histogramData.map((item) => item.name),
           axisLabel: {
             fontSize: 12,
             interval: 0,
             rotate: 20,
-          }
+          },
         },
         yAxis: {
-          name: '企业数',
-          type: 'value',
-          minInterval: 1
+          name: "企业数",
+          type: "value",
+          minInterval: 1,
         },
         series: [
           {
-            name: `${this.selectedYear}年 ${this.keyToChinese[this.selectedDataKey]}企业数统计`,
-            type: 'bar',
-            barWidth: '30%',
+            name: `${this.selectedYear}年 ${
+              this.keyToChinese[this.selectedDataKey]
+            }企业数统计`,
+            type: "bar",
+            barWidth: "30%",
             itemStyle: {
-              color: 'rgba(245,0,0,0.6)'
+              // color: "rgba(245,0,0,0.6)",
+              normal: {
+                color: function (params) {
+                  const value = params.dataIndex; // 获取当前柱子在数据中的索引
+                  if (flag == 1) {
+                    if (
+                      result[value].min >= that.detectMin &&
+                      result[value].max <= that.detectMax
+                    ) {
+                      return "#ffcc00"; // 变更颜色为黄色
+                    }
+                    return "rgba(245,0,0,0.6)";
+                  }
+                  return "rgba(245,0,0,0.6)";
+                  // 默认颜色
+                },
+              },
             },
-            data: histogramData.map(item => item.value),
+            data: histogramData.map((item) => item.value),
             label: {
-              show: false // 将show属性设置为false，去掉柱子上的数字
-            }
-          },
-          {
-            type: 'scatter',
-            symbol: 'circle',
-            symbolSize: 10,
-            data: histogramData.map((item, index) => [index, item.value]),
-            itemStyle: {
-              color: 'red'
-            }
-          },
-          {
-            type: 'line',
-            data: histogramData.map((item, index) => [index, item.value]),
-            lineStyle: {
-              color: '#1a7cc8'
+              show: false, // 将show属性设置为false，去掉柱子上的数字
             },
-            symbol: 'none'
           },
-        ]
+          // {
+          //   type: "scatter",
+          //   symbol: "circle",
+          //   symbolSize: 10,
+          //   data: histogramData.map((item, index) => [index, item.value]),
+          //   itemStyle: {
+          //     color: "red",
+          //   },
+          // },
+          // {
+          //   type: "line",
+          //   data: histogramData.map((item, index) => [index, item.value]),
+          //   lineStyle: {
+          //     color: "#1a7cc8",
+          //   },
+          //   symbol: "none",
+          // },
+        ],
       };
+      this.isChartShow = true;
       this.chart.setOption(option);
+      this.chart.on("click", function (param) {
+        if (
+          typeof param.dataIndex === "number" &&
+          param.dataIndex >= 0 &&
+          param.dataIndex < result.length
+        ) {
+          let dataIndexValue = result[param.dataIndex];
+          const filteredArray = filteredData.filter((item) => {
+            const isMaxValEqual = result[1] === maxVal;
+            const lowerBoundCheck =
+              item[that.selectedDataKey] >= dataIndexValue.min;
+            const upperBoundCheck = isMaxValEqual
+              ? item[that.selectedDataKey] <= dataIndexValue.max
+              : item[that.selectedDataKey] < dataIndexValue.max;
+
+            return lowerBoundCheck && upperBoundCheck;
+          });
+          that.tableData = filteredArray.map((item) => {
+            return {
+              industryName: item.code,
+              enterpriseId: item.enterpriseName,
+              year: item.year,
+              value: item[that.selectedDataKey],
+              level:"高"
+            };
+          });
+        }
+        // const filteredArray = filteredData.filter((item) => {
+        //     const isMaxValEqual = result[1] === maxVal;
+        //     const lowerBoundCheck = item[that.selectedDataKey] >= dataIndexValue.min;
+        //     const upperBoundCheck = isMaxValEqual
+        //         ? item[that.selectedDataKey] <= dataIndexValue.max
+        //         : item[that.selectedDataKey] < dataIndexValue.max;
+
+        //     return lowerBoundCheck && upperBoundCheck;
+        // })
+        // that.tableData = filteredArray.map(item => {
+        //   return {
+        //     industryName: item.code,
+        //     enterpriseId: item.enterpriseName,
+        //     year: item.year,
+        //     value: item[that.selectedDataKey]
+        //   }
+        // })
+      });
     },
     generateQuadraticData(binCount, maxHistogramValue, totalHistogramValue) {
       const a = -0.01;
-      const h = binCount / 2; 
-      const k = maxHistogramValue * 0.75; 
-      const sideValue = maxHistogramValue * 0.15 / 2; 
+      const h = binCount / 2;
+      const k = maxHistogramValue * 0.75;
+      const sideValue = (maxHistogramValue * 0.15) / 2;
 
       const data = [];
       for (let i = 0; i < binCount; i++) {
@@ -304,23 +524,47 @@ export default {
       }
       return data;
     },
-
+    // littlegreen - 检测检测区间是否填写正确
+    checkNumber() {
+      const maxInput = parseFloat(this.detectMax);
+      const minInput = parseFloat(this.detectMin);
+      let flag;
+      if (!this.detectMin && !this.detectMax) {
+        return (flag = 0);
+      }
+      if (isNaN(maxInput) || isNaN(minInput)) {
+        this.$message({
+          message: "请输入有效的数字。",
+          type: "error",
+        });
+        return (flag = 2);
+      }
+      // 检查 minInput 是否大于 maxInput
+      if (minInput >= maxInput) {
+        this.$message({
+          message: "监测区间最大值不可小于或等于最小值",
+          type: "error",
+        });
+        return (flag = 2);
+      }
+      return (flag = 1);
+    },
   },
   watch: {
-    selectedDataKey() {
-      this.updateChart();
-    },
-    selectedYear() {
-      this.updateChart();
-    },
-    selectedRange() {
-      setTimeout(this.updateChart, 2500);
-    },
-    selectedCode() {
-      this.updateChart();
-    },
-  }
-}
+    // selectedDataKey() {
+    //   this.updateChart();
+    // },
+    // selectedYear() {
+    //   this.updateChart();
+    // },
+    // selectedRange() {
+    //   setTimeout(this.updateChart, 2500);
+    // },
+    // selectedCode() {
+    //   this.updateChart();
+    // },
+  },
+};
 </script>
 
 <style scoped>

src/views/dashboard/zhifangbasedata.vue

@@ -1,8 +1,62 @@
 <template>
-  <div :class="className" :style="{ height: height, width: width }">
+<!-- 行业水平分布 - littlegreen - 补充form和label -->
+  <div :class="className" :style="{ height: '100%', width: width }">
     <div class="select-container">
-      <el-select v-model="selectedDataKey" @change="updateChart">
-        <el-option v-for="key in dataKeys" :key="key" :value="key" :label="keyToChinese[key]">
+      <el-form style="display: grid; grid-template-columns: 1fr 1fr 1fr;align-items: center;grid-gap: 20px;" label-width="100px">
+        <el-form-item label="评估指标" style="margin-bottom:0">
+          <el-select v-model="selectedDataKey" style="width: 100%" >
+            <el-option
+              v-for="key in dataKeys"
+              :key="key"
+              :value="key"
+              :label="keyToChinese[key]"
+            >
+              {{ keyToChinese[key] }}
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="年度" style="margin-bottom:0">
+          <el-select v-model="selectedYear" style="width: 100%" >
+            <el-option v-for="year in availableYears" :key="year" :value="year">
+              {{ year }}
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="行业代码" style="margin-bottom:0">
+          <el-input
+            v-model="selectedCode"
+            placeholder="请输入行业代码"
+            clearable
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="数据分布区间" style="margin-bottom:0">
+          <el-input
+            v-model="selectedRange"
+            placeholder="请设置数据分布区间"
+            clearable
+            style="width: 100%"
+          />
+        </el-form-item>
+        <div>
+          当前行业: {{ industryMap.get(selectedCode) }}
+        </div>
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="updateChart"
+            >搜索</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- <el-select v-model="selectedDataKey" @change="updateChart">
+        <el-option
+          v-for="key in dataKeys"
+          :key="key"
+          :value="key"
+          :label="keyToChinese[key]"
+        >
           {{ keyToChinese[key] }}
         </el-option>
       </el-select>
@@ -15,42 +69,58 @@
         v-model="selectedCode"
         placeholder="请输入行业代码"
         clearable
-        style="width: 180px;"
+        style="width: 180px"
       />
       <el-input
         v-model="selectedRange"
         placeholder="请设置数据分布区间"
         clearable
-        style="width: 180px;"
-      />
-      <div style="display: inline; padding-left: 10px;">当前行业: {{ industryMap.get(selectedCode) }}</div>
+        style="width: 180px"
+      /> -->
+      <!-- <div style="display: inline; padding-left: 10px">
+
+      </div> -->
     </div>
-    <div ref="chart" :style="{ height: height, width: width }"></div>
+    <div
+      ref="chart"
+      :style="{ height: height, width: width }"
+    ></div>
+    <!-- littlegreen - 新增数据展示table -->
+    <el-table :data="tableData" border style="width: 100%" >
+      <el-table-column prop="industryName" label="行业名称" width="200"></el-table-column>
+      <el-table-column prop="year" label="年度" width="200"> </el-table-column>
+      <el-table-column prop="enterpriseId" label="企业ID"></el-table-column>
+      <el-table-column
+        prop="value"
+        label="评估指标值"
+        width="200"
+      ></el-table-column>
+    </el-table>
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
 import { listBase_data_year } from "@/api/base_data_year/base_data_year";
 import { listIndustry } from "@/api/industry/industry"; // 导入行业数据的接口
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart",
     },
     width: {
       type: String,
-      default: '100%'
+      default: "100%",
     },
     height: {
       type: String,
-      default: '400px'
-    }
+      default: "400px",
+    },
   },
   data() {
     return {
@@ -58,34 +128,34 @@ export default {
       chartData: [],
       industryData: [],
       industryMap: new Map(),
-      selectedDataKey: 'funding', // 默认选择的字段
+      selectedDataKey: "funding", // 默认选择的字段
       selectedCode: null,
       dataKeys: [
-        'funding',
-        'energyConsume',
-        'paidTax',
-        'taxableIncome',
-        'totalIndustrialValue',
-        'powerConsume'
+        "funding",
+        "energyConsume",
+        "paidTax",
+        "taxableIncome",
+        "totalIndustrialValue",
+        "powerConsume",
       ], // 可选项
       keyToChinese: {
-        'landArea': '用地面积',
-        'totalIndustrialValue': '工业总产值',
-        'gdp': '工业增加值',
-        'taxableIncome': '应税收入',
-        'paidTax': '实缴税金',
-        'mainBusinessIncome': '主营业务收入',
-        'employeeNumber': '从业人员数',
-        'profit': '利润总额',
-        'ownerEquity': '所有者权益',
-        'funding': '研发经费',
-        'energyConsume': '能源消费量',
-        'powerConsume': '电力消费量',
+        landArea: "用地面积",
+        totalIndustrialValue: "工业总产值",
+        gdp: "工业增加值",
+        taxableIncome: "应税收入",
+        paidTax: "实缴税金",
+        mainBusinessIncome: "主营业务收入",
+        employeeNumber: "从业人员数",
+        profit: "利润总额",
+        ownerEquity: "所有者权益",
+        funding: "研发经费",
+        energyConsume: "能源消费量",
+        powerConsume: "电力消费量",
       },
       selectedYear: null,
       queryParams: {
         pageNum: 1,
-        pageSize: 2000000,  // 默认 2000000 条(全部一次性数据)
+        pageSize: 2000000, // 默认 2000000 条(全部一次性数据)
         enterpriseName: null,
         location: null,
         code: null,
@@ -102,7 +172,7 @@ export default {
         funding: null,
         energyConsume: null,
         year: null,
-        month: null
+        month: null,
       },
       industryQueryParams: {
         pageNum: 1,
@@ -112,12 +182,13 @@ export default {
       }, //  查询行业信息
       availableYears: [],
       selectedRange: 300, // 不能为 0
-    }
+      tableData: [],
+    };
   },
   mounted() {
     this.$nextTick(() => {
       this.fetchData();
-    })
+    });
   },
   beforeDestroy() {
     if (this.chart) {
@@ -126,34 +197,41 @@ export default {
   },
   methods: {
     fetchData() {
-      listBase_data_year(this.queryParams).then(response => {
-        this.chartData = response.rows;
-        this.availableYears = [...new Set(this.chartData.map(item => item.year))];
-        this.selectedYear = this.availableYears[0] || null;
-        this.selectedCode = [...new Set(this.chartData.map(item => item.code))][0];
-        this.initChart();
-      }).catch(error => {
-        console.error('Error fetching data:', error);
-      });
+      listBase_data_year(this.queryParams)
+        .then((response) => {
+          this.chartData = response.rows;
+          this.availableYears = [
+            ...new Set(this.chartData.map((item) => item.year)),
+          ];
+          this.selectedYear = this.availableYears[0] || null;
+          this.selectedCode = [
+            ...new Set(this.chartData.map((item) => item.code)),
+          ][0];
+          this.initChart();
+        })
+        .catch((error) => {
+          console.error("Error fetching data:", error);
+        });
 
-      listIndustry(this.industryQueryParams).then(response => {
-        this.industryData = response.rows;
-        console.log('industry_info' + this.industryData)
-        this.industryMap = this.industryData.reduce((map, item) => {
-          const key = `${item.code}`; // 键是行业代码
-          map.set(key, item.industryName); // 将键和对应的行业名称存储到Map中
-          return map;
-        }, new Map());
-
-      }).catch(error => {
-        console.error('Error fetching data:', error);
-      });
+      listIndustry(this.industryQueryParams)
+        .then((response) => {
+          this.industryData = response.rows;
+          // console.log("industry_info" + this.industryData);
+          this.industryMap = this.industryData.reduce((map, item) => {
+            const key = `${item.code}`; // 键是行业代码
+            map.set(key, item.industryName); // 将键和对应的行业名称存储到Map中
+            return map;
+          }, new Map());
+        })
+        .catch((error) => {
+          console.error("Error fetching data:", error);
+        });
     },
     initChart() {
       if (this.chart) {
         this.chart.dispose();
       }
-      this.chart = echarts.init(this.$refs.chart, 'macarons');
+      this.chart = echarts.init(this.$refs.chart, "macarons");
       this.updateChart();
     },
     updateChart() {
@@ -162,16 +240,26 @@ export default {
       }
       let filteredData = this.chartData;
       if (this.selectedYear) {
-        filteredData = filteredData.filter(item => item.year === this.selectedYear && item.code === this.selectedCode);
+        filteredData = filteredData.filter(
+          (item) =>
+            item.year === this.selectedYear && item.code === this.selectedCode
+        );
       }
-      const values = filteredData.map(item => item[this.selectedDataKey]);
+      const values = filteredData.map((item) => item[this.selectedDataKey]);
       const minVal = 0;
       const maxVal = Math.max(...values);
+      console.log(filteredData, values, this.selectedDataKey, 898);
+      if (
+        this.selectedRange === null ||
+        this.selectedRange === "" ||
+        isNaN(+this.selectedRange)
+      )
+        this.selectedRange = "100";
+      else if (Number(this.selectedRange) <= 0) this.selectedRange = "100";
 
-      if (this.selectedRange === null || this.selectedRange === '' || isNaN(+this.selectedRange)) this.selectedRange = '100';
-      else if (Number(this.selectedRange) <= 0) this.selectedRange = '100';
-
-      const binCount = Math.ceil((maxVal - minVal) / Number(this.selectedRange));
+      const binCount = Math.ceil(
+        (maxVal - minVal) / Number(this.selectedRange)
+      );
 
       let maxNum = -1;
 
@@ -182,9 +270,9 @@ export default {
         const x1 = Math.min(x0 + Number(this.selectedRange), maxVal);
         const label = `${x0}-${x1}`;
         let count = 0;
-        count += values.filter(value => value >= x0 && value < x1).length;
+        count += values.filter((value) => value >= x0 && value < x1).length;
         if (x1 === maxVal) {
-          count += values.filter(value => value === maxVal).length;
+          count += values.filter((value) => value === maxVal).length;
         }
 
         if (count > 0) {
@@ -195,21 +283,24 @@ export default {
         }
       }
 
-
-
-
-      const maxHistogramValue = Math.max(...histogramData.map(item => item.value));
-      const totalHistogramValue = histogramData.reduce((sum, item) => sum + item.value, 0);
+      const maxHistogramValue = Math.max(
+        ...histogramData.map((item) => item.value)
+      );
+      const totalHistogramValue = histogramData.reduce(
+        (sum, item) => sum + item.value,
+        0
+      );
 
       // const quadraticData = this.generateQuadraticData(binCount, maxHistogramValue, totalHistogramValue);
-
+      // littlegreen - 去掉line和scatter
       const option = {
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow'
+            type: "shadow",
           },
-          formatter: (params) => { // 使用箭头函数来保持 this 的上下文
+          formatter: (params) => {
+            // 使用箭头函数来保持 this 的上下文
             const seriesName = params[0].name; // 系列名称
             const dataIndex = params[0].dataIndex; // 数据索引
             const value = params[0].data; // 实际的数据值
@@ -217,71 +308,110 @@ export default {
             const yAxisLabel = params[0].seriesName;
             // 构建自定义的 tooltip 内容，包含年份
             return `${xAxisLabel}<br> ${yAxisLabel}: ${value}`;
-          }
+          },
         },
         legend: {
-          data: [`${this.selectedYear}年 ${this.keyToChinese[this.selectedDataKey]}企业数统计`]
+          data: [
+            `${this.selectedYear}年 ${
+              this.keyToChinese[this.selectedDataKey]
+            }企业数统计`,
+          ],
         },
         grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
         },
         xAxis: {
-          type: 'category',
-          name: '分布区间',
-          data: histogramData.map(item => item.name),
+          type: "category",
+          name: "分布区间",
+          data: histogramData.map((item) => item.name),
           axisLabel: {
             fontSize: 12,
             interval: 0,
             rotate: 30,
-          }
+          },
         },
         yAxis: {
-          name: '企业数',
-          type: 'value',
-          minInterval: 1
+          name: "企业数",
+          type: "value",
+          minInterval: 1,
         },
         series: [
           {
-            name: `${this.selectedYear}年 ${this.keyToChinese[this.selectedDataKey]}企业数统计`,
-            type: 'bar',
-            barWidth: '30%',
+            name: `${this.selectedYear}年 ${
+              this.keyToChinese[this.selectedDataKey]
+            }企业数统计`,
+            type: "bar",
+            barWidth: "30%",
             itemStyle: {
-              color: 'rgba(245,0,0,0.6)'
+              color: "rgba(245,0,0,0.6)",
             },
-            data: histogramData.map(item => item.value),
+            data: histogramData.map((item) => item.value),
             label: {
-              show: false // 将show属性设置为false，去掉柱子上的数字
-            }
-          },
-          {
-            type: 'scatter',
-            symbol: 'circle',
-            symbolSize: 10,
-            data: histogramData.map((item, index) => [index, item.value]),
-            itemStyle: {
-              color: 'red'
-            }
-          },
-          {
-            type: 'line',
-            data: histogramData.map((item, index) => [index, item.value]),
-            lineStyle: {
-              color: '#1a7cc8'
+              show: false, // 将show属性设置为false，去掉柱子上的数字
             },
-            symbol: 'none'
           },
-        ]
+          // {
+          //   type: "scatter",
+          //   symbol: "circle",
+          //   symbolSize: 10,
+          //   data: histogramData.map((item, index) => [index, item.value]),
+          //   itemStyle: {
+          //     color: "red",
+          //   },
+          // },
+          // {
+          //   type: "line",
+          //   data: histogramData.map((item, index) => [index, item.value]),
+          //   lineStyle: {
+          //     color: "#1a7cc8",
+          //   },
+          //   symbol: "none",
+          // },
+        ],
       };
       this.chart.setOption(option);
+      const that = this;
+      // littlegreen - chart增加点击事件，点击显示对应区间的企业列表
+      this.chart.on("click", function (param) {
+        //param参数包含的内容有：
+        //param.name：X轴的值
+        //param.data：Y轴的值
+        //param.value：Y轴的值
+        //param.type：点击事件均为click
+        //param.seriesName：legend的名称
+        //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个）
+        //param.dataIndex：数值序列（X轴上当前点是第几个点）
+        //alert(param.seriesName);  //legend的名称
+        // console.log(param.name); //X轴的值 0-600 1.用-分割获得确定最小值和最大值 2.筛选filteredData中this.selectedDataKey的值符合要求的
+        const result = param.name.split("-").map(Number);
+        const filteredArray = filteredData.filter((item) => {
+            const isMaxValEqual = result[1] === maxVal;
+            const lowerBoundCheck = item[that.selectedDataKey] >= result[0];
+            const upperBoundCheck = isMaxValEqual
+                ? item[that.selectedDataKey] <= result[1]
+                : item[that.selectedDataKey] < result[1];
+
+            return lowerBoundCheck && upperBoundCheck;
+        })
+        that.tableData = filteredArray.map(item => {
+          return {
+            industryName: item.code,
+            enterpriseId: item.enterpriseName,
+            year: item.year,
+            value: item[that.selectedDataKey]
+          }
+        })
+        console.log(filteredData, result, that.selectedDataKey, filteredArray); //获取自定义的值
+      });
     },
     generateQuadraticData(binCount, maxHistogramValue, totalHistogramValue) {
-      const a = -0.01; 
-      const h = binCount / 2; 
-      const k = maxHistogramValue * 0.75; 
-      const sideValue = maxHistogramValue * 0.15 / 2; 
+      const a = -0.01;
+      const h = binCount / 2;
+      const k = maxHistogramValue * 0.75;
+      const sideValue = (maxHistogramValue * 0.15) / 2;
 
       const data = [];
       for (let i = 0; i < binCount; i++) {
@@ -297,23 +427,23 @@ export default {
       }
       return data;
     },
-
   },
   watch: {
-    selectedDataKey() {
-      this.updateChart();
-    },
-    selectedYear() {
-      this.updateChart();
-    },
-    selectedRange() {
-      setTimeout(this.updateChart, 2500);
-    },
-    selectedCode() {
-      this.updateChart();
-    },
-  }
-}
+    // littlegreen - 关闭监测数值变化
+    // selectedDataKey() {
+    //   this.updateChart();
+    // },
+    // selectedYear() {
+    //   this.updateChart();
+    // },
+    // selectedRange() {
+    //   setTimeout(this.updateChart, 2500);
+    // },
+    // selectedCode() {
+    //   this.updateChart();
+    // },
+  },
+};
 </script>
 
 <style scoped>