柱状图重写

src/assets/scss/modules/index.scss

@@ -356,28 +356,14 @@
         height: calc(100% - 30px);
         width: 100%;
         overflow: hidden;
-
+        display: flex;
+        flex-direction: column;
         .cnt {
             margin-top: 20px;
             display: flex;
             overflow: hidden;
             height: 100%;
-
-            .echart {
-                max-width: 115%;
-                max-height: 100%;
-                left: -30px;
-                top: 10px;
-                // margin-left: -50px;
-                position: absolute;
-                
-                user-select: none;
-                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-                padding: 0px;
-                margin: 0px;
-                border-width: 0px;
-            }
-
+            flex: 1;
             .cnt-left {
                 box-sizing: border-box;
                 padding: 16px;

src/views/modules/home/index.vue

@@ -93,7 +93,7 @@
             </div>
             <div class="cnt">
               <!-- 树状图 -->
-              <div class="echart" id="mychart" :style="myChartStyle"></div>
+              <div class="echart" id="myBarchart"  style="width: 100%; height: 100%;"></div>
               <!-- 树状图end -->
 
               <!-- <div class="cnt-left">
@@ -336,8 +336,8 @@ export default {
       noticeData: [],
       activeName: "resi",
       myChart: {},
+      myBarchart:{},
       agencyLevel: '',
-      xData: ["党员", "残疾人", "退役军人", "失业人员", "低保人员", "保障房人员", "特殊人员", "慢病人员", "老年人"],
       yData: [
         // {
         //   value: 720,
@@ -396,12 +396,13 @@ export default {
   mounted() {
     // this.ehso();
     //图形
-    this.initEcharts();
 
 
     this.getApiData();
     this.$nextTick(() => {
       this.initChart()
+      this.initEcharts();
+
     })
     this.agencyLevel = localStorage.getItem("level", data.level);
     console.log(
@@ -484,6 +485,7 @@ export default {
     handleWindowResize() {
       if (this.myChart) {
         this.myChart.resize();
+        this.myBarChart.resize();
       }
     },
     searchDataTab(str) {
@@ -684,128 +686,62 @@ export default {
 
     initEcharts() {
       this.$http.get("/actual/base/residentIntegrity/resiCategoryStats/byOrg/query4Org").then(({ data: { data } }) => {
-        this.myChart = echarts.init(document.getElementById("my_chart"));
-
-        this.yData = data.categoryStatsDatas.map(item => {
-          const total = Number(item.total);
-          const nonIntegratedNum = Number(item.nonIntegratedNum);
-          let ratio = '';
-          if (total !== 0) {
-            ratio = nonIntegratedNum / total;
-          }
-          // console.log("nonIntegratedNum", nonIntegratedNum)
-          // console.log("total", total)
-          return {
-            value: total,
-            itemStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  { offset: 0, color: '#2D7DF2' },
-                  { offset: ratio, color: '#7EB1FE' },
-                  { offset: ratio, color: '#EFB632' },
-                  { offset: 1, color: '#FDD77D' }
-                ],
-                global: false
-              },
-              shadowColor: "#91cc75",
-              borderType: "dashed",
-              // opacity: 0.5
+        this.myBarchart = echarts.init(document.getElementById("myBarchart"));
+        let xData = data.categoryStatsDatas.map(item => item.resiCategoryName)
+        let resiToal = data.categoryStatsDatas.map(item => item.total)
+        let nonIntegratedNum = data.categoryStatsDatas.map(item => item.nonIntegratedNum)
+        let option = {
+          backgroundColor: '#fff',
+          color: ['#f7ca60', '#448cf6', ],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
             }
-          };
-        });
-        // 基本柱状图
-        const option = {
-          xAxis: {
-            type: 'category',
-            axisLabel: {
-              // rotate: -45,
-              textStyle: {
-                fontSize: 10
+          },
+          legend: {
+            x: 'center',
+            bottom: '8%',
+            data: ['分类居民总数', '分类信息不完整数']
+          },
+          grid: { //图表的位置
+            top: '5%',
+            left: '3%',
+            right: '4%',
+            bottom: '20%',
+            containLabel: true
+          },
+          yAxis: [{
+            type: 'value',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ['#f2f2f2']
               }
             },
-            axisTick: {
-              show: false, // 不显示x轴刻度线
-            },
-            data: this.xData,
-
-          },
-          yAxis: {},
-          graphic: [{ // 添加自定义的文字块
-            type: 'group',
-            left: 'center',
-            bottom: 20,
-            z: 100,
-            children: [
-              {
-                type: 'rect',
-                left: 0,
-                // top: 'middle',
-                shape: {
-                  width: 30,
-                  height: 6,
-                },
-                style: {
-                  fill: '#0056D6', // 蓝色方块
-                },
-              },
-              {
-                type: 'text',
-                left: 35,
-                // top: 'middle',
-                style: {
-                  text: '分类居民总数',
-                  fill: '#333',
-                  fontSize: 12,
-                  // fontWeight: 'bold',
-                },
-              },
-              {
-                type: 'rect',
-                left: 130,
-                // top: 'middle',
-                shape: {
-                  width: 30,
-                  height: 6,
-                },
-                style: {
-                  fill: '#FFDB84 ', // 橙色方块
-                },
-              },
-              {
-                type: 'text',
-                left: 170,
-                // top: 'middle',
-                style: {
-                  text: '分类信息不完整数',
-                  fill: '#333',
-                  fontSize: 12,
-                  // fontWeight: 'bold',
-                },
-              },
-            ],
           }],
-          series: [
-            {
-              type: "bar",
-              barWidth: '30%',
-              barGap: '20%',
-              data: this.yData,
-            },
-          ],
+          xAxis: [{
+            type: 'category',
+            data: xData
+          }],
+          series: [{
+            name: '分类居民总数',
+            type: 'bar',
+            stack: '总量',
+            barWidth: '30px',
+            data:resiToal ,
+          },
+          {
+            name: '分类信息不完整数',
+            type: 'bar',
+            stack: '总量',
+            data:nonIntegratedNum,
+          }
+          ]
         };
-        const myChart = echarts.init(document.getElementById("mychart"));
-        myChart.setOption(option);
-        //随着屏幕大小调节图表
-        window.addEventListener("resize", () => {
-          myChart.resize();
-        });
-        myChart.on("click", (e) => {
-          console.log("123123123112", e.name);
+        this.myBarchart.setOption(option);
+        window.addEventListener("resize", this.handleWindowResize);
+        myBarchart.on("click", (e) => {
           this.$router.push({
             path: "/main/base-resi",
             query: {