首页 tooltip 格式化

manpower/js/data.js

@@ -4,15 +4,15 @@ const companyList = [
   { name: '华阳新材' },
   { name: '潞安化工' },
   { name: '华新燃气' },
-  { name: '太原重工' },
+  { name: '太重集团' },
   { name: '国际能源' },
   { name: '华远陆港' },
-  { name: '水务控股' },
-  { name: '山西文旅' },
-  { name: '山西交控' },
-  { name: '山西航产' },
+  { name: '水控集团' },
+  { name: '文旅集团' },
+  { name: '交控集团' },
+  { name: '航产集团' },
   { name: '山西建投' },
-  { name: '山西汾酒' },
+  { name: '汾酒集团' },
   { name: '大地控股' },
   { name: '云时代' },
   { name: '华舰体育' },

manpower/js/index.js

@@ -6,6 +6,7 @@ let app = new Vue({
     return {
       showTip: false,
       tipNum: '',
+      tipData: tipData,
       time: '',
       year: '2022',
       config1: {
@@ -70,8 +71,12 @@ let app = new Vue({
         },
         tooltip: {
           trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
+          textStyle: { fontSize: 18 },
+          axisPointer: { 
+              type: 'cross', 
+              label: { 
+                fontSize: 18
+              }
           },
         },
         grid: {
@@ -285,24 +290,38 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartL2'])
       let option = {
         ..._.cloneDeep(this.commonOption),
+        color: ['#69c0ff'],
         series: [
           {
             name: '当前共享服务中心/事业部数',
             type: 'bar',
             barWidth: 15,
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: '#69c0ff',
-                  },
-                  {
-                    offset: 1,
-                    color: '#082550',
-                  },
-                ]),
-              },
+              color: params => {
+                if( params.value > dataL2[1][params.dataIndex]) {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: 'red',
+                    },
+                    {
+                      offset: 1,
+                      color: '#082550',
+                    },
+                  ])
+                } else {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                          {
+                            offset: 0,
+                            color: '#69c0ff',
+                          },
+                          {
+                            offset: 1,
+                            color: '#082550',
+                          },
+                        ])
+                }
+            },
             },
             data: dataL2[0]
           },
@@ -345,7 +364,6 @@ let app = new Vue({
     },
     initChartL3 () {
       let myChart = echarts.init(this.$refs['echartL3'])
-      console.log(this.commonOption, "this.commonOption")
       let option = {
         ..._.cloneDeep(this.commonOption),
         series: [
@@ -453,6 +471,7 @@ let app = new Vue({
           },
         },
       })
+      option.tooltip.formatter = '{a0}：{c0}' +'<br/>'+ '{a1}：{c1}' + '%'
       myChart.setOption(option)
     },
     initChartL4 () {
@@ -604,6 +623,7 @@ let app = new Vue({
           },
         },
       })
+      option.tooltip.formatter = '{a0}：{c0}' +'<br/>'+ '{a1}：{c1}' + '%'
       myChart.setOption(option)
     },
     initChartL6 () {
@@ -674,6 +694,7 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartL7'])
       let option = {
         ..._.cloneDeep(this.commonOption),
+        color: ['#b889ea'],
         series: [
           {
             name: '人数变化',
@@ -704,15 +725,16 @@ let app = new Vue({
             smooth: true, //平滑曲线显示
             showAllSymbol: true, //显示所有图形。
             symbol: 'circle', //标记的图形为实心圆
-            symbolSize: 8, //标记的大小
+            symbolSize: 15, //标记的大小
             smooth: false,
             itemStyle: {
-              //折线拐点标志的样式
-              color: '#b889ea',
-              borderColor: '#b889ea',
-              width: 2,
-              shadowColor: '#b889ea',
-              shadowBlur: 4,
+              color: params => {
+                if( dataL7[0][params.dataIndex] > 0 && params.value < 0) {
+                  return 'red'
+                }else {
+                  return '#b889ea'
+                } 
+              }
             },
             lineStyle: {
               color: '#b889ea',
@@ -726,10 +748,20 @@ let app = new Vue({
       option.legend.data = ['人数变化', '劳动生产率同比变化']
       option.legend.show = true
       option.yAxis[0].axisLabel.formatter = '{value} %',
-        option.yAxis.push({
-          type: 'value',
-          axisLine: {
-            show: false,
+      option.tooltip.formatter = '{a0}：{c0}' + '%' +'<br/>'+ '{a1}：{c1}' + '%'
+      option.yAxis.push({
+        type: 'value',
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          formatter: '{value} %',
+          textStyle: {
+            color: 'rgba(250,250,250,0.6)',
           },
           splitLine: {
             show: false,
@@ -741,7 +773,8 @@ let app = new Vue({
               color: 'rgba(250,250,250,0.6)',
             },
           },
-        })
+        }
+      })
 
       myChart.setOption(option)
     },
@@ -749,6 +782,7 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartL8'])
       let option = {
         ..._.cloneDeep(this.commonOption),
+        color: ['#b889ea'],
         series: [
           {
             name: '人数变化',
@@ -778,15 +812,16 @@ let app = new Vue({
             smooth: true, //平滑曲线显示
             showAllSymbol: true, //显示所有图形。
             symbol: 'circle', //标记的图形为实心圆
-            symbolSize: 8, //标记的大小
+            symbolSize: 15, //标记的大小
             smooth: false,
             itemStyle: {
-              //折线拐点标志的样式
-              color: '#b889ea',
-              borderColor: '#b889ea',
-              width: 2,
-              shadowColor: '#b889ea',
-              shadowBlur: 4,
+              color: params => {
+                if( dataL8[0][params.dataIndex] > 0 && params.value < 0) {
+                  return 'red'
+                }else {
+                  return '#b889ea'
+                } 
+              }
             },
             lineStyle: {
               color: '#b889ea',
@@ -800,19 +835,46 @@ let app = new Vue({
       option.legend.data = ['人数变化', '人工成本利润率同比变化']
       option.legend.show = true
       option.yAxis[0].axisLabel.formatter = '{value} %',
-        myChart.setOption(option)
+      option.tooltip.formatter = '{a0}：{c0}' + '%' +'<br/>'+ '{a1}：{c1}' + '%'
+      myChart.setOption(option)
     },
     // 中间图表---------------------------------------------开始
     initChartC1 () {
       let myChart = echarts.init(this.$refs['echartC1'])
       let option = {
         ..._.cloneDeep(this.commonOption),
-
+        color: ['#69c0ff'],
         series: [
           {
             name: '全员劳动生产率（万/人）',
             type: 'bar',
-            barWidth: 12,
+            barWidth: 15,
+            itemStyle: {
+              color: params => {
+                  if( params.value < 0 && c2[0][params.dataIndex] < 0) {
+                    return 'red'
+                  } else if(params.value < 0 ) {
+                    return 'yellow'
+                  } else {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                              offset: 0,
+                              color: '#69c0ff',
+                            },
+                            {
+                              offset: 1,
+                              color: '#082550',
+                            },
+                          ])
+                  }
+              },
+            },
+            data: c1[0]
+          },
+          {
+            name: '全员劳动生产率同比',
+            type: 'line',
+            yAxisIndex: 1, 
             smooth: true, //平滑曲线显示
             showAllSymbol: true, //显示所有图形。
             symbol: 'circle', //标记的图形为实心圆
@@ -820,30 +882,16 @@ let app = new Vue({
             smooth: false,
             itemStyle: {
               //折线拐点标志的样式
-              color: '#69c0ff',
-              borderColor: '#69c0ff',
+              color: '#B889EA',
+              borderColor: '#B889EA',
               width: 2,
-              shadowColor: '#69c0ff',
+              shadowColor: '#B889EA',
               shadowBlur: 4,
             },
             lineStyle: {
-              color: '#69c0ff',
+              color: '#B889EA',
               width: 2,
             },
-            // data: [60, 50, 80, 80, 90, 55, 40, 60, 50, 80, 90, 55, 40, 60, 50, 90, 55, 40],
-            data: c1[0],
-
-
-          },
-          {
-            name: '全员劳动生产率同比',
-            yAxisIndex: 1,
-            type: 'line',
-            itemStyle: {
-              normal: {
-                color: '#B889EA',
-              },
-            },
             markLine: {
               data: [
                 {
@@ -900,6 +948,7 @@ let app = new Vue({
       option.legend.data = ['全员劳动生产率同比', '全员劳动生产率（万/人）']
       option.legend.show = true
       option.grid.right = '15%'
+      option.tooltip.formatter = '{a0}：{c0}' +'<br/>'+ '{a1}：{c1}' + '%'
       option.yAxis.push({
         type: 'value',
         axisLine: {
@@ -916,6 +965,27 @@ let app = new Vue({
           },
         },
       })
+      // option.yAxis.push({
+      //   type: 'log',
+      //   min: -1,
+      //   logBase: 10,
+      //   axisLine: {
+      //     show: false,
+      //   },
+      //   splitLine: {
+      //     show: false,
+      //   },
+      //   axisLabel: {
+      //     show: true,
+      //     formatter: function(value) {
+      //       console.log(value,"value")
+      //       // return value === 1 ? 0 : value
+      //     },
+      //     textStyle: {
+      //       color: 'rgba(250,250,250,0.6)',
+      //     },
+      //   },
+      // })
       myChart.setOption(option)
       tools.loopShowTooltip(myChart, option, {
         nterval: 2000,
@@ -926,9 +996,10 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartC2'])
       let option = {
         ..._.cloneDeep(this.commonOption),
+        color: ['#69c0ff'],
         series: [
           {
-            name: '人工成本利润同比',
+            name: '人工成本利润率同比',
             type: 'line',
             yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
             smooth: true, //平滑曲线显示
@@ -948,9 +1019,12 @@ let app = new Vue({
               color: '#B889EA',
               width: 2,
             },
-
-            // data: [60, 50, 80, 80, 90, 55, 40, 60, 50, 80, 90, 55, 40, 60, 50, 90, 55, 40],
             data: c2[0],
+          },
+          {
+            name: '人工成本利润率',
+            type: 'bar',
+            barWidth: 15,
             markLine: {
               data: [
                 {
@@ -982,34 +1056,24 @@ let app = new Vue({
                 distance: [20, 8],
               },
             },
-          },
-          {
-            name: '人工成本利润率',
-            type: 'bar',
-            barWidth: 15,
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: '#69c0ff',
-                  },
-                  {
-                    offset: 1,
-                    color: '#082550',
-                  },
-                ]),
-              },
-            },
             itemStyle: {
               color: params => {
-                if (params.value < 0 && c2[0][params.dataIndex] < 0) {
-                  return 'red'
-                } else if (c2[0][params.dataIndex] < 0) {
-                  return 'yellow'
-                } else {
-                  return '#69c0ff'
-                }
+                  if( params.value < 0 && c2[0][params.dataIndex] < 0) {
+                    return 'red'
+                  } else if(params.value < 0 ) {
+                    return 'yellow'
+                  } else {
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                              offset: 0,
+                              color: '#69c0ff',
+                            },
+                            {
+                              offset: 1,
+                              color: '#082550',
+                            },
+                          ])
+                  }
               },
             },
             data: c2[1]
@@ -1017,18 +1081,26 @@ let app = new Vue({
         ],
       }
       option.title.text = '人工成本利润率'
-      option.legend.data = ['人工成本利润同比', '人工成本利润率']
       option.legend.show = true
       option.grid.right = '15%'
       option.yAxis[0].axisLabel.formatter = '{value} %',
-        option.yAxis.push({
-          splitLine: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
+      option.tooltip.formatter = '{a0}：{c0}' + '%' +'<br/>'+ '{a1}：{c1}' + '%'
+      option.yAxis.push({
+        type: 'value',
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          formatter: '{value} %',
+          textStyle: {
+            color: 'rgba(250,250,250,0.6)',
           },
-        })
+        },
+      })
       myChart.setOption(option)
       tools.loopShowTooltip(myChart, option, {
         nterval: 2000,
@@ -1048,7 +1120,7 @@ let app = new Vue({
       dataR1[1].forEach(item => {
         dataTemp2.push(item + 1);
       });
-
+    
       let option = {
         ..._.cloneDeep(commonOptions),
         series: [
@@ -1098,9 +1170,9 @@ let app = new Vue({
       option.title.text = '当前各省属企业招聘需求公示人次'
       option.legend.data = ['招聘需求公告次数', '招聘需求公告累计招聘人次']
       option.legend.show = true
-      option.tooltip.formatter = function (value) {
-        return value[0].axisValue + ':' + (value[0].value - 1) + '<br>' +
-          value[1].axisValue + ':' + (value[1].value - 1)
+      option.tooltip.formatter = function(value){
+        return value[0].axisValue+'：'+ (value[0].value -1)+'<br>'+
+        value[1].axisValue+'：'+ (value[1].value-1)
       }
       option.yAxis[0] = {
         type: 'log',
@@ -1128,6 +1200,14 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartR2'])
       let commonOptions = this.commonOption
       commonOptions.yAxis[0].splitNumber = 2
+      let dataTemp = []
+      let dataTemp2 = []
+      dataR2[0].forEach(item => {
+          dataTemp.push(item+1);
+      });
+      dataR2[1].forEach(item => {
+        dataTemp2.push(item+1);
+      });
       let option = {
         ..._.cloneDeep(commonOptions),
         series: [
@@ -1149,7 +1229,7 @@ let app = new Vue({
                 ]),
               },
             },
-            data: dataR2[0],
+            data: dataTemp,
           },
           {
             name: '录用结果公示累计公示人数',
@@ -1169,7 +1249,7 @@ let app = new Vue({
                 ]),
               },
             },
-            data: dataR2[1],
+            data: dataTemp2,
           },
 
         ],
@@ -1177,6 +1257,10 @@ let app = new Vue({
       option.title.text = '当前各省属企业录用结果公示人次'
       option.legend.data = ['录用结果公示次数', '录用结果公示累计公示人数']
       option.legend.show = true
+      option.tooltip.formatter = function(value){
+        return value[0].axisValue+'：'+ (value[0].value -1)+'<br>'+
+        value[1].axisValue+'：'+ (value[1].value-1)
+      }
       option.yAxis[0] = {
         type: 'log',
         min: 1,
@@ -1411,6 +1495,7 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartR6'])
       let option = {
         ..._.cloneDeep(this.commonOption),
+        color: ['#69c0ff'],
         series: [
           {
             name: '2022年利润累计涨幅率',
@@ -1438,20 +1523,32 @@ let app = new Vue({
           {
             name: '2022年薪酬累计涨幅率',
             type: 'line',
-            barWidth: 15,
+            smooth: true, //平滑曲线显示
+            showAllSymbol: true, //显示所有图形。
+            symbol: 'circle', //标记的图形为实心圆
+            symbolSize: 12, //标记的大小
+            smooth: false,
             itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: '#69C0FF',
-                  },
-                  {
-                    offset: 1,
-                    color: '#082550',
-                  },
-                ]),
-              },
+              color: params => {
+                if( params.value > 0 && fjxdataL2[0][params.dataIndex] < 0) {
+                  return 'yellow'
+                } else {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                          {
+                            offset: 0,
+                            color: '#69c0ff',
+                          },
+                          {
+                            offset: 1,
+                            color: '#082550',
+                          },
+                        ])
+                }
+            },
+            },
+            lineStyle: {
+              color: '#69C0FF',
+              width: 2,
             },
             data: fjxdataL2[1],
           },
@@ -1459,14 +1556,8 @@ let app = new Vue({
       }
       option.title.text = '各省属企业月利润与月薪酬变动情况'
       option.legend.data = ['2022年利润累计涨幅率', '2022年薪酬累计涨幅率']
-      option.yAxis.push({
-        splitLine: {
-          show: false,
-        },
-        axisLine: {
-          show: false,
-        },
-      })
+      option.tooltip.formatter = '{a0}：{c0}' + '%' +'<br/>'+ '{a1}：{c1}' + '%'
+      option.yAxis[0].axisLabel.formatter = '{value} %',
       myChart.setOption(option)
     },
     initChartR7 () {
@@ -1497,15 +1588,9 @@ let app = new Vue({
         ],
       }
       option.title.text = '各省属企业全员绩效考核'
-      // option.legend.data = ['劳动合同签约完成率', '目标值']
-      option.yAxis.push({
-        splitLine: {
-          show: false,
-        },
-        axisLine: {
-          show: false,
-        },
-      })
+      option.legend.show = false
+      option.tooltip.formatter = '{a0}：{c0}' + '%'
+      option.yAxis[0].axisLabel.formatter = '{value} %',
       myChart.setOption(option)
     },
     initChartR8 () {
@@ -1535,15 +1620,10 @@ let app = new Vue({
           },
         ],
       }
-      option.title.text = '各省属企业任期制考核'
-      option.yAxis.push({
-        splitLine: {
-          show: false,
-        },
-        axisLine: {
-          show: false,
-        },
-      })
+      option.title.text = '各省属企业任期制契约化完成率'
+      option.legend.show = false
+      option.tooltip.formatter = '{a0}：{c0}' + '%'
+      option.yAxis[0].axisLabel.formatter = '{value} %',
       myChart.setOption(option)
     },
   },