浏览代码

修改图标样式

fengxu 2 年之前
父节点
当前提交
467b8c54ea
共有 3 个文件被更改,包括 103 次插入38 次删除
  1. 1 1
      cokingCoal/index.html
  2. 101 37
      cokingCoal/js/newIndex.js
  3. 1 0
      cokingCoal/styles/newIndex.css

+ 1 - 1
cokingCoal/index.html

@@ -265,7 +265,7 @@
                 </div>
                 <div class="flex_column right_user_box">
                     <dv-border-box-6 :color="['#2169a3','#277099']"
-                        style="padding: 10px 40px 30px;box-sizing: border-box;">
+                        style="padding: 10px 40px 15px;box-sizing: border-box;">
                         <div class="right_item_else flex_column">
                             <div class="title_else"><span>人才市场</span></div>
                             <div class="w_100_right flex_column">

+ 101 - 37
cokingCoal/js/newIndex.js

@@ -392,7 +392,7 @@ let app = new Vue({
       let industry = this.$refs.industry
       this.initOrganizationElse(industry, "", this.industry, "")
       let sequence = this.$refs.sequence
-      this.initBarEcharts(sequence, { x: ["管理序列", "技术序列", "操作序列"], y1: [34242, 18547, 134012], y2: [28993, 19411, 126807] }, ["当前数", "同期数"])
+      this.initBarEcharts(sequence, { x: ["管理序列", "技术序列", "操作序列"], y1: [34242, 18547, 134012], y2: [28993, 19411, 126807] }, ["当前数"])
       let serviceAge = this.$refs.serviceAge
       this.initLineEcharts(serviceAge, { x: this.ageListX[this.saTimeIndex], y: this.ageListY[this.saTimeIndex] })
       let level = this.$refs.level
@@ -987,6 +987,7 @@ let app = new Vue({
             show: false,
           },
           axisLine: {
+            show: false,
             lineStyle: {
               fontSize: 30,
               color: '#fff',
@@ -1005,7 +1006,7 @@ let app = new Vue({
         yAxis: {
           type: "value",
           splitLine: {
-            show: true,
+            show: false,
             lineStyle: {
               color: "#204561",
               width: 1,
@@ -1016,6 +1017,7 @@ let app = new Vue({
             show: false,
           },
           axisLine: {
+            show: false,
             lineStyle: {
               color: "#7ECEF4",
             },
@@ -1338,6 +1340,7 @@ let app = new Vue({
             show: false,
           },
           axisLine: {
+            show: false,
             lineStyle: {
               color: "#7ECEF4",
             },
@@ -2363,7 +2366,16 @@ let app = new Vue({
       let chart = echarts.init(el);
       var scale = 2;
       var singleData = data.y1;
-      var multipleData = data.y2;
+      let max = 0
+      var multipleData = []
+      data.y1.forEach(item=>{
+        max = max + item
+      })
+      data.y1.forEach(item=>{
+        let num = ((item / max) * 100).toFixed(2)
+        multipleData.push(num)
+      })
+      console.log(max);
       var color = "#fff";
       option = {
         tooltip: {
@@ -2375,28 +2387,30 @@ let app = new Vue({
           },
           axisPointer: { // 坐标轴指示器,坐标轴触发有效
             type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
-          }
-        },
-        legend: {
-          data: nameList,
-          align: 'left',
-          itemGap: 50,
-          // x: 'right',
-          right: '1%',
-          y: '1%',
-          icon: 'rect',
-          itemWidth: 15 * scale, // 图例图形宽度
-          itemHeight: 15 * scale, // 图例图形高度
-          textStyle: {
-            color: "#3fdaff",
-            fontSize: 16 * scale
-          }
+          },
+          formatter: "{a}: {c}</br>{a1}: {c1} %"
         },
+        // legend: {
+        //   data: nameList,
+        //   align: 'left',
+        //   itemGap: 50,
+        //   // x: 'right',
+        //   right: '1%',
+        //   y: '1%',
+        //   icon: 'rect',
+        //   itemWidth: 15 * scale, // 图例图形宽度
+        //   itemHeight: 15 * scale, // 图例图形高度
+        //   textStyle: {
+        //     color: "#3fdaff",
+        //     fontSize: 16 * scale
+        //   }
+        // },
         grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
+          left: '20%',
+          right: '10%',
+          bottom: '13%',
+          top: "7%",
+          // containLabel: true
         },
         textStyle: {
           fontSize: 30,
@@ -2407,6 +2421,7 @@ let app = new Vue({
           data: data.x,
           axisLabel: {
             // inside: true,
+            interval: 0,
             padding: [15, 0, 0, 0],
             textStyle: {
               color: "#fff",
@@ -2421,6 +2436,7 @@ let app = new Vue({
             }
           },
           axisLine: {
+            show: false,
             lineStyle: {
               color: color,
             }
@@ -2434,6 +2450,45 @@ let app = new Vue({
         }],
         yAxis: [{
           type: 'value',
+          name:"当前数",
+          axisLabel: {
+            // inside: true,
+            padding: [0, 15, 0, 0],
+            textStyle: {
+              color: color,
+              fontSize: 28,
+            }
+          },
+          axisTick: {
+            show: false,
+            lineStyle: {
+              color: color,
+            }
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: color,
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#fff',
+              type: 'dashed'
+            },
+            show: false,
+          },
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 16 * scale,
+            padding: [0, 0, 10, 0]
+          }
+        },{
+          type: 'value',
+          name:"占比",
+          min: 0,
+          max: 100,
+
           axisLabel: {
             // inside: true,
             padding: [0, 15, 0, 0],
@@ -2443,6 +2498,7 @@ let app = new Vue({
             }
           },
           axisTick: {
+            show: false,
             lineStyle: {
               color: color,
             }
@@ -2470,7 +2526,6 @@ let app = new Vue({
           type: 'bar',
           barWidth: '15%',
           barGap: '40%',
-
           itemStyle: {
             normal: {
               color: 'rgba(94,218,255,0.4)',
@@ -2478,19 +2533,22 @@ let app = new Vue({
           },
           data: singleData
         },
-        {
-          name: nameList[1],
-          type: 'bar',
-          barWidth: '15%',
-          barGap: '40%',
+          {
+            name: "占比",
+            yAxisIndex: 1,
+            type: 'line',
+            barWidth: '15%',
+            barGap: '40%',
 
-          itemStyle: {
-            normal: {
-              color: '#ffc72b',
-            }
-          },
-          data: multipleData
-        }]
+            itemStyle: {
+              normal: {
+                color: '#ffc72b',
+
+              }
+            },
+            data: multipleData
+          }
+        ]
       };
       chart.setOption(option);
       tools.loopShowTooltip(chart, option, {
@@ -2709,6 +2767,7 @@ let app = new Vue({
         xAxis: [{
           type: "category",
           axisLine: {
+            show: false,
             lineStyle: {
               color: '#fff'
             }
@@ -3578,6 +3637,7 @@ let app = new Vue({
           type: 'category',
           data: data.x,
           axisLine: {
+            show: false,
             lineStyle: {
               color: 'rgba(255,255,255,0.12)'
             }
@@ -3600,6 +3660,9 @@ let app = new Vue({
               fontSize: 28,
             },
           },
+          axisTick: {
+            show: false
+          },
           axisLine: {
             show: false,
             lineStyle: {
@@ -3607,6 +3670,7 @@ let app = new Vue({
             }
           },
           splitLine: {
+            show: false,
             lineStyle: {
               color: 'rgba(255,255,255,0.12)'
             }
@@ -4264,7 +4328,7 @@ let app = new Vue({
 
     handleChangeTitle(item, index) {
       let that = this
-      if(item == that.titleList[0]){
+      if (item == that.titleList[0]) {
         return
       }
       this.studentEcharts.dispose()

+ 1 - 0
cokingCoal/styles/newIndex.css

@@ -834,6 +834,7 @@ img {
 .main_item_echarts {
     width: 100%;
     height: calc(100% - 90px);
+    background-color: var(--bg);
 }