图表样式处理

components/bussiness/charts/chart-column-horizontal-tc-long.vue

 <!-- 柱状图-竖向 -->
 <template>
-  <div class="chart-column-vtc">
-    <div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
+  <div>
+    <div class="chart-column-vtc">
+      <div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
+    </div>
+    <CommonNoMore></CommonNoMore>
   </div>
 </template>
 <script>
 let vm = null;
+import CommonNoMore from "@/components/common/common-no-more";
 // let chartColumn = null;
 export default {
+  components: {
+    CommonNoMore
+  },
   props: {
     id: {
       type: String,
@@ -32,7 +39,7 @@ export default {
   data() {
     return {
       chartWidth: "100%",
-      chartHeight: "350px"
+      chartHeight: "200px"
     };
   },
   watch: {
@@ -56,37 +63,40 @@ export default {
             document.body.clientWidth ||
             document.documentElement.clientWidth;
           this.chartWidth = clientWidth + "px";
-          // this.chartHeight = 54 * 3 + "px";
-          this.chartHeight = 43 * this.dataList.length + "px";
+          this.chartHeight = 53 * this.dataList.length + "px";
           this.drawColumn(yAxisData, series0Data, series1Data);
         }
-        // this.drawColumn(yAxisData, series0Data, series1Data);
       },
-      deep: false
+      deep: true
     }
   },
 
   created() {
-
+        if (process.client) {
+          // vm = this;
+          // this.drawColumn([], [], []);
+        }
   },
   mounted() {
     vm = this;
-
   },
   methods: {
     // 画
     drawColumn(yAxisData, series0Data, series1Data) {
       let chartColumn = this.$echarts.init(document.getElementById(this.id));
+
+      // let chartColumn = this.$echarts.init(document.getElementById("myChart1"));
       // 基于准备好的dom，初始化echarts实例
       // 绘制图表
       let options = {
-        color: vm.colors,
+        color: vm.colors || [],
         tooltip: {
           trigger: "axis",
           axisPointer: {
             // 坐标轴指示器，坐标轴触发有效
             type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
-          }
+          },
+          formatter: "{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%"
         },
         legend: {
           show: false,
@@ -112,6 +122,7 @@ export default {
         xAxis: {
           axisTick: false,
           type: "value",
+          minInterval: 1,
           axisLabel: {
             show: false,
             formatter: "{value}",
@@ -187,6 +198,14 @@ export default {
         ]
       };
       chartColumn.setOption(options);
+
+      let autoHeight = this.dataList.length * 53; // counst.length为柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
+      chartColumn.getDom().style.height = autoHeight + "px";
+      chartColumn.getDom().childNodes[0].style.height = autoHeight + "px";
+      chartColumn.getDom().childNodes[0].childNodes[0].setAttribute("height",autoHeight);
+      chartColumn.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px";
+      chartColumn.resize(); 
+
     },
     shortName: function (value, length = 5, append = '...') {
       if (value && value.length > length) {

components/bussiness/charts/chart-column-horizontal-tc.vue

@@ -108,6 +108,7 @@ export default {
           max: 100,
           axisTick: false,
           type: "value",
+          minInterval: 1,
           axisLabel: {
             formatter: "{value}%",
             textStyle: {

components/bussiness/charts/chart-column-stack.vue

@@ -139,6 +139,9 @@ export default {
           color: "#676869"
         },
         xAxis: {
+          // min: 0,
+          // max: 'dataMax',
+          minInterval: 1,
           axisTick: false,
           type: "value",
           axisLabel: {
@@ -152,6 +155,15 @@ export default {
               color: "#efefef",
               width: 1
             }
+          },
+          //设置网格线颜色
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ["#efefef"],
+              width: 1,
+              type: "solid"
+            }
           }
         },
         yAxis: {
@@ -174,7 +186,16 @@ export default {
               color: "#efefef",
               width: 1
             }
-          }
+          },
+          // //设置网格线颜色
+          // splitLine: {
+          //   show: true,
+          //   lineStyle: {
+          //     color: ["#efefef"],
+          //     width: 1,
+          //     type: "solid"
+          //   }
+          // }
         },
         series: vm.seriesData
         // series: [

components/bussiness/charts/chart-column-vertical-score.vue

@@ -64,6 +64,7 @@ export default {
         yAxis: {
           axisTick: false,
           type: "value",
+          minInterval: 1,
           axisLabel: {
             formatter: "{value}",
             textStyle: {

components/bussiness/charts/chart-column-vertical-tc.vue

@@ -110,6 +110,7 @@ export default {
         yAxis: {
           axisTick: false,
           type: "value",
+          minInterval: 1,
           axisLabel: {
             formatter: "{value}%",
             textStyle: {

components/bussiness/charts/chart-column-vertical-times.vue

@@ -66,6 +66,7 @@ export default {
         yAxis: {
           axisTick: false,
           type: "value",
+          minInterval: 1,
           axisLabel: {
             formatter: "{value}",
             textStyle: {

components/bussiness/charts/chart-column-vertical.vue

@@ -66,6 +66,7 @@ export default {
         yAxis: {
           axisTick: false,
           type: "value",
+          minInterval: 1,
           axisLabel: {
             formatter: "{value}",
             textStyle: {

components/bussiness/charts/chart-pie-cert.vue

@@ -62,22 +62,10 @@ export default {
       // 绘制图表
       let options = {
         color: echartColors,
-        // title: {
-        //   text: "总人数: 1,339,220人",
-        //   // subtext: "纯属虚构",
-        //   top: '20%',
-        //   left: '60%',
-        //   textStyle: {
-        //     fontSize: 12,
-        //     fontWeight: "bolder",
-        //     color: "#000000"
-        //   }
-        // },
         tooltip: {
           trigger: "item",
           formatter: "{a} <br/>{b} : {c} ({d}%)"
         },
-
         legend: {
           type: "scroll",
           orient: "vertical",
@@ -98,12 +86,13 @@ export default {
         },
         series: [
           {
-            name: "证书分布情况",
+            name: "证书分布情况1",
             type: "pie",
             label: {
               position: "inner",
               formatter: function(config) {
-                return `${config.percent}%`;
+                // alert(JSON.stringify(config))
+                return `${config}%`;
               }
             },
             radius: "65%",

components/bussiness/charts/chart-pie-edu.vue

@@ -28,7 +28,8 @@ export default {
       chartHeight: "1000px",
       handledData: {},
       legendData: [],
-      seriesData: {}
+      seriesData: {},
+      count: 0
       // 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
     };
   },
@@ -63,6 +64,11 @@ export default {
       this.seriesData = pieData.map( item => {
         return { name: item.name, value: item.value}
       })
+      let count = 0
+      pieData.forEach( item => {
+        count += item.value;
+      })
+      this.count = count;
     },
     // 画饼图
     drawPie() {
@@ -71,9 +77,21 @@ export default {
       // 绘制图表
       let options = {
         color: echartColors,
+        title: {
+          text: "总人数: " + vm.count,
+          // subtext: "纯属虚构",
+          top: '10%',
+          left: '60%',
+          textStyle: {
+            fontSize: 12,
+            fontWeight: "bolder",
+            color: "#000000"
+          }
+        },
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)"
+          // formatter: "{a} <br/>{b} : {c} ({d}%)"
+          formatter: "{b}{c}人"
         },
 
         legend: {
@@ -83,7 +101,7 @@ export default {
           itemWidth: 9,
           itemHeight: 9,
           borderRadius: 9,
-          top: '10%',
+          top: '20%',
           left: '60%',
           bottom: 20,
           data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
@@ -104,7 +122,8 @@ export default {
             label: {
               position: "inner",
               formatter: function(config) {
-                return `${config.percent}%`;
+                // return `${config.percent}%`;
+                return `${config.percent.toFixed(1)}%`;
               }
             },
             radius: "65%",

components/bussiness/charts/chart-pie-title.vue

@@ -35,18 +35,12 @@ export default {
       chartHeight: "1000px",
       handledData: {},
       legendData: [],
-      seriesData: {}
+      seriesData: {},
+      count: 0
       // 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
     };
   },
   watch: {
-    // pieData: {
-    //   handler(newValue, oldValue) {
-    //     this.handlePieData(newValue);
-    //     this.drawPie();
-    //   },
-    //   deep: true
-    // },
     dataList: {
       handler(newValue, oldValue) {
         if (process.client) {
@@ -77,6 +71,11 @@ export default {
       this.seriesData = pieData.map(item => {
         return { name: item.name, value: item.value };
       });
+      let count = 0
+      pieData.forEach( item => {
+        count += item.value;
+      })
+      this.count = count;
     },
     // 画饼图
     drawPie() {
@@ -85,31 +84,32 @@ export default {
       // 绘制图表
       let options = {
         color: echartColors,
-        // title: {
-        //   text: "总人数: 1,339,220人",
-        //   // subtext: "纯属虚构",
-        //   top: '20%',
-        //   left: '60%',
-        //   textStyle: {
-        //     fontSize: 12,
-        //     fontWeight: "bolder",
-        //     color: "#000000"
-        //   }
-        // },
+        title: {
+          text: "总人数: " + vm.count,
+          // subtext: "纯属虚构",
+          top: '10%',
+          left: '60%',
+          textStyle: {
+            fontSize: 12,
+            fontWeight: "bolder",
+            color: "#000000"
+          }
+        },
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)"
+          // formatter: "{a} <br/>{b} : {c} ({d}%)"
+          formatter: "{b}{c}人"
         },
 
         legend: {
-          // type: "scroll",
+          type: "scroll",
           type: "plain", // 普通图例
           orient: "vertical",
           itemWidth: 9,
           itemHeight: 9,
           borderRadius: 20,
           // orient:'horizontal',
-          top: '10%',
+          top: '20%',
           left: "60%",
           bottom: 20,
           data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
@@ -159,7 +159,8 @@ export default {
             label: {
               position: "inner",
               formatter: function(config) {
-                return `${config.percent}%`;
+                // return `${config.percent}%`;
+                return `${config.percent.toFixed(1)}%`;
               }
             },
             radius: "65%",

components/bussiness/charts/chart-pie.vue

@@ -67,20 +67,10 @@ export default {
       // 绘制图表
       options = {
         color: echartColors,
-        // title: {
-        //   text: "总人数: 1,339,220人",
-        //   // subtext: "纯属虚构",
-        //   top: '20%',
-        //   left: '60%',
-        //   textStyle: {
-        //     fontSize: 12,
-        //     fontWeight: "bolder",
-        //     color: "#000000"
-        //   }
-        // },
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)"
+          // formatter: "{a} <br/>{b} : {c} ({d}%)"
+          formatter: "{b}{c}人"
         },
 
         legend: {
@@ -109,7 +99,8 @@ export default {
             label: {
               position: "inner",
               formatter: function(config) {
-                return `${config.percent}%`;
+                // alert(JSON.stringify(config))
+                return `${config.percent.toFixed(1)}%`;
               }
             },
             radius: "65%",

nuxt.config.js

@@ -10,7 +10,7 @@ module.exports = {
       { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui' },
       { name: 'screen-orientation', content: 'portrait' },
       { name: 'apple-mobile-web-app-capable', content: 'yes' },
-      { name: 'format-detection', content: 'telephone=yes' },
+      { name: 'format-detection', content: 'telephone=no' },
       { name: 'full-screen', content: 'yes' },
       { name: 'x5-fullscreen', content: 'true' },
       { name: 'x5-fullscreen', content: 'true' },

pages/index.vue

@@ -104,7 +104,6 @@
     <PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
     <CommonLoading v-show="false"></CommonLoading>
     <PopTips :tipsContent="tipsContent" @clickTips="clickTips" v-show="isShowTips"></PopTips>
-    <a href="tel:13817237261">打电话：13817237261</a>
   </section>
 </template>
 

pages/klgpoint.vue

@@ -4,7 +4,6 @@
     <TitleKLGPoint :title="title"></TitleKLGPoint>
     <TipsInfo :content="tipsContent"></TipsInfo>
     <ChartColumnHorizontalTCLong :dataList="knowledgeEffectList" class="mt-10"></ChartColumnHorizontalTCLong>
-    <CommonNoMore></CommonNoMore>
   </section>
 </template>
 <script>
@@ -13,7 +12,6 @@ import { getStudyEffect } from "@/service";
 
 import CommonHeader from "@/components/common/common-header";
 import TitleKLGPoint from "@/components/bussiness/title-klg-point";
-import CommonNoMore from "@/components/common/common-no-more";
 import TipsInfo from '@/components/bussiness/tips-info'
 import ChartColumnHorizontalTCLong from "@/components/bussiness/charts/chart-column-horizontal-tc-long";
 
@@ -39,13 +37,12 @@ export default {
         }
       },
       tipsContent: '报告数据来源仅包含摸底考和正式考的课程培训',
-      knowledgeEffectList: []
+      knowledgeEffectList: [],
     };
   },
   components: {
     CommonHeader,
     TitleKLGPoint,
-    CommonNoMore,
     ChartColumnHorizontalTCLong,
     TipsInfo
   },