添加各地市区域土地情况数量柱状图组件

src/views/tj/compoent/BarDobuleDataNum.vue

@@ -0,0 +1,200 @@
+<template>
+  <div ref="dom" style="width:calc(100% - 0px);height:300px;">
+  </div>
+
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+
+export default {
+  name: "BarDobuleDataNum",
+  data() {
+    return {
+      a: [],
+      b: []
+    }
+  },
+  props: {
+    resultXData: {},
+    titleText: {
+      type: String,
+    }
+  },
+  mounted() {
+    /*setTimeout(() => {
+      this.getPie();
+    }, 1000)*/
+  },
+  watch: {
+    resultXData: {
+      handler(newVal) {
+        this.resultYData = newVal
+        this.getPie()
+      }
+
+    },
+  },
+  methods: {
+    getPie() {
+      var _this = this
+
+      // 绘制图表
+      /* this.$nextTick(() => {*/
+      var option = {
+        // title: {
+        //   text: this.titleText,
+        //   x: 'left',              //标题位置
+        //   // textStyle: { //标题内容的样式
+        //   //   color: '#000',
+        //   //   fontStyle: 'normal',
+        //   //   fontWeight: 100,
+        //   //   fontSize: 16 //主题文字字体大小，默认为18px
+        //   // },
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.resultYData.name,
+            axisTick: {
+              alignWithLabel: true
+            },
+            axisLabel: {
+              interval: 0,
+              // rotate: 20
+              formatter:function(value){
+                let str = ''
+                let num = 3; //每行显示字数
+                let valLength = value.length; //该项x轴字数
+                let rowNum = Math.ceil(valLength / num); // 行数
+
+                if(rowNum > 1) {
+                  for(let i = 0; i < rowNum; i++) {
+                    let temp = "";
+                    let start = i * num;
+                    let end = start + num;
+
+                    temp = value.substring(start, end) + "\n";
+                    str += temp;
+                  }
+                  return str;
+                } else {
+                  return value;
+                }
+              }
+            }
+          }
+        ],
+        legend: {
+          top: '5%', // 控制 板块控制器的位置
+          right: 'center',
+          // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
+          // itemWidth: 10,  // 设置宽度
+          // itemHeight: 4, // 设置高度
+          itemGap: 40, // 设置两个legend之间的间距
+        },
+        yAxis: [
+          {
+            type: 'log',
+            min: 1,
+            name: "单位（亩）",
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+              },
+            },
+            axisLabel: {
+              formatter: function (value) {
+                return value === 1 ? 0 : value;//第2步，将y轴最小值1变成从0开始；
+              }
+            },
+          }
+        ],
+        series: [
+          {
+            name: '实际占用土地面积',
+            type: 'bar',
+            barWidth: 15,
+            symbolSize: 8,
+            label: {
+              show: true,
+              position: 'top',
+            },
+            data: this.resultYData.value,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [5, 5, 0, 0],
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#00C0FA'
+                  },
+                    {
+                      offset: 1,
+                      color: '#c631ef'
+                    }
+                  ]
+                )
+              }
+            }
+          },
+          {
+            name: '闲置低效土地面积',
+            type: 'bar',
+            symbolSize: 8,
+            barWidth: 15,
+            label: {
+              show: true,
+              position: 'top',
+            },
+            data: this.resultYData.value2,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [5, 5, 0, 0],
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#eecc49'
+                  },
+                    {
+                      offset: 1,
+                      color: '#42cb7d'
+                    }
+                  ]
+                )
+              }
+            }
+          }
+        ]
+
+      }
+
+      // 使用刚指定的配置项和数据显示图表。
+      var myChart = echarts.init(this.$refs.dom)
+      myChart.on('click', (params) => {
+        _this.$emit('visible', {xzqh: params.name,sfsb:"3"});
+      })
+      myChart.setOption(option);
+      myChart.resize();
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+
+</style>