添加一级单位数量组件

src/views/tj/compoent/BarDataNum.vue

@@ -0,0 +1,200 @@
+<template>
+  <div ref="dom" style="width:calc(100% - 0px);height:20rem;">
+  </div>
+
+</template>
+
+<script>
+import * as echarts from "echarts";
+import {loadCategoryData} from "@api/api";
+
+
+export default {
+  name: "BarData",
+  data() {
+    return {
+      a: [],
+      b: [],
+    }
+  },
+  props: {
+    resultXData: {
+
+    },
+    seriesName:{
+      type:String,
+    },
+    titleText: {
+      type: String,
+    },
+    dw: {
+      type: String,
+    },
+  },
+  mounted() {
+    this.initDictConfig()
+    /*setTimeout(() => {
+      this.getPie();
+    }, 1000)*/
+  },
+  watch: {
+    resultXData: {
+      handler(newVal) {
+        this.$nextTick(function() {
+          this.resultYData = newVal;
+          this.getPie();
+        })
+      },
+      deep: true,
+      immediate: true
+
+    },
+  },
+  methods: {
+    initDictConfig() {
+      loadCategoryData({code: 'A04'}).then((res) => {
+        if (res.success) {
+          this.sjyt = res.result
+        }
+      })
+    },
+    getPie() {
+      const _this = this
+      // 绘制图表
+      /* this.$nextTick(() => {*/
+      //定义数据间隔
+      const 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: '2%',
+          right: '1%',
+          bottom: '1%',
+          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',
+            name: this.dw,
+            splitLine: {
+              lineStyle: {
+                type: 'dashed'
+              }
+            },
+            axisLabel: {
+              // 轴文字
+
+            }
+          }
+        ],
+        series: [
+          {
+            name: this.seriesName,
+            type: 'bar',
+            barWidth: '50%',
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {
+                fontSize: 9,
+              },
+            },
+            data: this.resultYData.num,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [10, 10, 0, 0],
+                color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#00C0FA',
+                  },
+                    {
+                      offset: 1,
+                      color: '#2F95FA'
+                    }
+                  ]
+                )
+              }
+            }
+          }
+        ]
+
+      }
+
+      // 使用刚指定的配置项和数据显示图表。
+      var myChart = echarts.init(this.$refs.dom)
+      myChart.on('click',(params)=>{
+        _this.$emit('visible',{sysOrgCode:params.name,sfsb:"3"});
+
+      })
+
+      myChart.setOption(option);
+      myChart.resize();
+      /*window.addEventListener("resize", myChart.resize);*/
+
+      //  })
+
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+
+</style>