lilei 2 years ago
parent
commit
1b1b88d477
1 changed files with 136 additions and 98 deletions
  1. 136 98
      src/views/bigScreen/realTimeSalesReport/right-top.vue

+ 136 - 98
src/views/bigScreen/realTimeSalesReport/right-top.vue

@@ -80,52 +80,17 @@ export default {
       })
       })
     },
     },
     init (xData, yData, yData2) {
     init (xData, yData, yData2) {
+      const colorList = ['#ffaa00', '#34c2ff', '#fe9a8b', '#F56948', '#9E87FF']
       this.option = {
       this.option = {
-        xAxis: {
-          type: 'category',
-          data: xData,
-          boundaryGap: false, // 不留白,从原点开始
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(31,99,163,.2)'
-            }
-          },
-          axisLine: {
-            // show:false,
-            lineStyle: {
-              color: 'rgba(31,99,163,.1)'
-            }
-          },
-          axisLabel: {
-            color: '#7EB7FD',
-            fontWeight: '500'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(31,99,163,.2)'
-            }
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(31,99,163,.1)'
-            }
-          },
-          axisLabel: {
-            color: '#7EB7FD',
-            fontWeight: '500'
-          }
-        },
         tooltip: {
         tooltip: {
           trigger: 'axis',
           trigger: 'axis',
           backgroundColor: 'rgba(0,0,0,.6)',
           backgroundColor: 'rgba(0,0,0,.6)',
           borderColor: 'rgba(147, 235, 248, .8)',
           borderColor: 'rgba(147, 235, 248, .8)',
           textStyle: {
           textStyle: {
             color: '#FFF'
             color: '#FFF'
+          },
+          formatter: function (params) {
+            return params[0].seriesName + ': ' + (params[0].value / 10000).toFixed(2) + '万元' + '<br>' + params[1].seriesName + ': ' + params[1].value
           }
           }
         },
         },
         legend: {
         legend: {
@@ -133,76 +98,149 @@ export default {
           top: '0',
           top: '0',
           left: 'center',
           left: 'center',
           textStyle: {
           textStyle: {
-            color: '#7EB7FD'
+            color: '#eee'
           }
           }
         },
         },
         grid: {
         grid: {
           // 布局
           // 布局
           show: true,
           show: true,
-          left: '10px',
-          right: '30px',
-          bottom: '10px',
-          top: '28px',
+          left: '5px',
+          right: '5px',
+          bottom: '5px',
+          top: '35px',
           containLabel: true,
           containLabel: true,
-          borderColor: '#1F63A3'
+          borderColor: 'rgba(31,99,163,.1)'
+        },
+        xAxis: [{
+          type: 'category',
+          data: xData,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(31,99,163,1)'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#eee',
+              fontWeight: '500'
+            },
+            // 默认x轴字体大小
+            fontSize: 12,
+            // margin:文字到x轴的距离
+            margin: 15
+          },
+          boundaryGap: false
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '销售金额',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: colorList[0]
+            }
+          },
+          axisLabel: {
+            color: colorList[0],
+            fontWeight: '500',
+            formatter: function (value) {
+              return (value / 10000) + '万'
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        }, {
+          type: 'value',
+          position: 'right',
+          name: '销售数量',
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: colorList[1],
+            fontWeight: '500',
+            formatter: '{value}'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: colorList[1]
+            }
+          },
+          splitLine: {
+            show: false
+          }
+        }],
+        series: [{
+          name: '销售金额',
+          type: 'line',
+          data: yData,
+          symbolSize: 1,
+          symbol: 'circle',
+          smooth: true,
+          yAxisIndex: 0,
+          showSymbol: false,
+          lineStyle: {
+            width: 1,
+            color: new graphic.LinearGradient(0, 1, 0, 0, [{
+              offset: 0,
+              color: colorList[0]
+            },
+            {
+              offset: 1,
+              color: colorList[0]
+            }
+            ]),
+            shadowColor: 'rgba(158,135,255, 0.3)',
+            shadowBlur: 10,
+            shadowOffsetY: 20
+          },
+          itemStyle: {
+            normal: {
+              color: colorList[0],
+              borderColor: colorList[0]
+            }
+          }
         },
         },
-        series: [
-          {
-            data: yData,
-            type: 'line',
-            smooth: true,
-            symbol: 'none', // 去除点
-            name: '销售金额',
-            color: 'rgba(252,144,16,.7)',
-            areaStyle: {
-              // 右,下,左,上
-              color: new graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: 'rgba(252,144,16,.7)'
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(252,144,16,.0)'
-                  }
-                ],
-                false
-              )
+        {
+          name: '销售数量',
+          type: 'line',
+          data: yData2,
+          symbolSize: 1,
+          yAxisIndex: 1,
+          symbol: 'circle',
+          smooth: true,
+          showSymbol: false,
+          lineStyle: {
+            width: 1,
+            color: new graphic.LinearGradient(0, 0, 1, 0, [{
+              offset: 0,
+              color: colorList[1]
+            },
+            {
+              offset: 1,
+              color: colorList[1]
             }
             }
+            ]),
+            shadowColor: 'rgba(254,154,139, 0.3)',
+            shadowBlur: 10,
+            shadowOffsetY: 20
           },
           },
-          {
-            data: yData2,
-            type: 'line',
-            smooth: true,
-            symbol: 'none', // 去除点
-            name: '销售数量',
-            color: 'rgba(9,202,243,.7)',
-            areaStyle: {
-              // 右,下,左,上
-              color: new graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: 'rgba(9,202,243,.7)'
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(9,202,243,.0)'
-                  }
-                ],
-                false
-              )
+          itemStyle: {
+            normal: {
+              color: colorList[1],
+              borderColor: colorList[1]
             }
             }
           }
           }
+        }
         ]
         ]
       }
       }
     }
     }