wpjg表格

src/views/cockpit/wpjg.vue

@@ -5,39 +5,33 @@
     </template>
     <div class="stacontent">
       <div class="item">
-        <span class="dlabel">图斑变化数量：</span>
-        <span class="dvalue">{{ sdata.xzqdm_num || 0 }}个</span>
+        <span class="dlabel">图斑面积：</span>
+        <span class="dvalue">{{ sdata.xzqdm_num || 0 }}㎡</span>
       </div>
       <div class="item">
-        <span class="dlabel"> 图斑变化面积：</span>
-        <span class="dvalue">{{ sdata.jcmj || 0 }}亩</span>
+        <span class="dlabel"> 图斑格数：</span>
+        <span class="dvalue">{{ sdata.jcmj || 0 }}个</span>
+      </div>
+      <div class="item">
+        <span class="dlabel">违法占地：</span>
+        <span class="dvalue">{{ sdata.xzqdm_num || 0 }}㎡</span>
+      </div>
+      <div class="item">
+        <span class="dlabel"> 违法率：</span>
+        <span class="dvalue">{{ sdata.jcmj || 0 }}%</span>
       </div>
     </div>
-    <sankey id="wpjp_echart" ref="echartRef"></sankey>
+    <div id="wpjg_echart"></div>
   </borderTemplate>
 </template>
 
 <script>
 import borderTemplate from "./borderTemplate.vue";
-import sankey from "../../components/echartsTemplate/sankey.vue";
 import { QueryList } from "../../api/cockpitNew";
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-let colors = [
-  "#1677CA",
-  "#5BB57A",
-  "#B1651F",
-  "#62ADED",
-  "#F26094",
-  "#FCED66",
-  "#75FF93",
-  "#E375FF",
-  "#62ECEC",
-  "#FF7F48",
-  "#1E803A",
-  "#D4E0FF",
-];
+
 export default {
-  components: { borderTemplate, sankey },
+  components: { borderTemplate },
   data() {
     return {
       sdata: {},
@@ -49,6 +43,246 @@ export default {
   watch: {},
 
   methods: {
+    init_wpjg_echart() {
+      var tdsc_my_chart = window.echarts.init(document.getElementById('wpjg_echart'));
+
+
+      tdsc_my_chart.getZr().on('click', (params) => {
+        // 这个部分照抄，你想通过点击拿到的当前柱条的数据，都可以在下面这些属性中拿到，如果我注释没有你想要的，需要console一下charts.getOption()查找对应的属性名
+        // let pointInPixel = [params.offsetX, params.offsetY]
+        // if (tdsc_my_chart.containPixel('grid', pointInPixel)) {
+        //   let xIndex = tdsc_my_chart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
+        //   console.log(xIndex)
+        // }
+
+
+        const actionObj = params.topTarget
+        console.log('actionObj', actionObj)
+        const myKey = Object.keys(actionObj).sort().filter(_ => _.indexOf('ec_inner') !== -1)[0]
+        console.log('myKey', myKey)
+        const res = actionObj[myKey]
+        console.log(`当前点击了第${res.dataIndex}组数据中的第${res.seriesIndex}个柱子`)
+        var pointInPixel = [params.offsetX, params.offsetY];
+        if (tdsc_my_chart.containPixel('grid', pointInPixel)) {
+          /*此处添加具体执行代码*/
+          var pointInGrid = tdsc_my_chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
+          //X轴序号
+          var xIndex = pointInGrid[0];
+          console.log('点击了横纵坐标', pointInPixel)
+          console.log('【点击了第几组数据，纵坐标】', pointInGrid)
+          //获取当前图表的option
+          var op = tdsc_my_chart.getOption();
+          console.log('数据信息', op)
+          //获得图表中我们想要的数据---下面就不简写了，默认说我们的折现有2条吧
+          var xValue = op.xAxis[0].data[xIndex];
+          console.log('x轴所对应的名字', xValue)
+
+        }
+      });
+      const legendType = 'center'
+      let option = {
+        backgroundColor: 'rgba(0,0,0,0)',
+        grid: {
+          containLabel: true,
+          bottom: '1%',
+          top: '40%',
+          left: '5%',
+          right: legendType === 'center' ? '5%' : '25%',
+        },
+        tooltip: {
+          show: false,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          orient: legendType === 'center' ? '' : 'vertical',
+          bottom: "80%",
+          right: legendType === 'center' ? 'center' : '2%',
+          // data: ['监测图斑', '占用耕地', '占用永久基本农田', '违法占地'],
+
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 20,
+          icon: "rect",
+          textStyle: {
+            fontSize: 12,
+            color: '#fff',
+            padding: [5, 0, 0, 2],
+            rich: {
+              a: {
+                verticalAlign: 'middle',
+              },
+            },
+          },
+
+        },
+        xAxis: {
+          triggerEvent: true,
+          data: ['崖州区', '育才区', '天崖区', '吉阳区', '海棠区'],
+          axisLabel: {
+            show: true,
+            fontSize: 12,
+            color: '#fff',
+            align: 'center',
+            verticalAlign: 'top',
+          },
+          axisLine: {
+            show: true,
+
+            lineStyle: {
+              width: 1,
+              color: 'rgba(239, 247, 253, .7)'
+            }
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: [
+          {
+            name: "单位/㎡",
+            nameTextStyle: {
+              color: "#fff",
+              fontSize: 12,
+              padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
+            },
+            axisLabel: {
+              interval: 0,
+              show: true,
+              fontSize: 10,
+              color: '#fff',
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(239, 247, 253, .1)'
+              }
+            },
+          },
+        ],
+        series: [
+          {
+            name: '监测图斑',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  let colorItem = ['#3b93e3', '#186bb8'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [120, 75, 90, 100, 25],
+          },
+          {
+            name: '占用耕地',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+
+                  let colorItem = ['#efc943', '#ec9a1b'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [120, 75, 90, 100, 123],
+          },
+          {
+            name: '占用永久基本农田',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  let colorItem = ['#4ee1ac', '#12a972'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [102, 130, 80, 100, 34],
+          }, {
+            name: '违反占地',
+            type: 'bar',
+            barWidth: 12,
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  let colorItem = ['rgb(236,128,141)', 'rgb(236,128,141)'];
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
+                    [
+                      {
+                        offset: 0,
+                        color: colorItem[0]
+                      },
+                      {
+                        offset: 1,
+                        color: colorItem[1]
+                      }
+                    ],
+                    false
+                  );
+                }
+              }
+            },
+            data: [102, 130, 80, 100, 45],
+          }
+        ],
+      }
+
+
+      tdsc_my_chart.setOption(option);
+    },
     setData(datas) {
       this.GetQueryListztsh(datas);
       this.getQueryListyelx(datas);
@@ -95,12 +329,17 @@ export default {
       });
     },
   },
-  mounted() {},
+  mounted() {
+    this.$nextTick((res) => {
+      this.init_wpjg_echart();
+    })
+  },
 };
 </script>
 <style lang="scss" scoped>
 .wpjg {
   top: calc(66.6% + 10px) !important;
+
   .stacontent {
     width: 100%;
     height: 24px;
@@ -129,11 +368,12 @@ export default {
     line-height: 16px;
     text-align: left;
   }
+}
 
-  #wpjp_echart {
-    width: 100%;
-    height: calc(100% - 24px);
-    position: relative;
-  }
+#wpjg_echart {
+  left: -1rem;
+  top: 1rem;
+  width: 26rem;
+  height: 12rem;
 }
 </style>