Changes

src/views/dashboard-screen/qb-dlsbxjdx/index.vue

@@ -31,7 +31,7 @@ export default {
 
   methods: {
     async getOption() {
-      window['tis'] = this
+
       let keys = []
       const maxs = []
       const values = []
@@ -52,6 +52,9 @@ export default {
       }
       window['max'] = maxs.reverse()
       window['values'] = values.reverse()
+
+      const cubeW = 6;
+      const cubeH = 12;
       const CubeLeft = echarts.graphic.extendShape({
         shape: {
           x: 0,
@@ -60,8 +63,8 @@ export default {
         buildPath: (ctx, shape) => {
           const yAxisPoint = shape.yAxisPoint
           const c0 = [shape.x, shape.y]
-          const c1 = [shape.x + 9, shape.y - 9]
-          const c2 = [yAxisPoint[0] + 9, yAxisPoint[1] - 9]
+          const c1 = [shape.x + cubeW, shape.y - cubeW]
+          const c2 = [yAxisPoint[0] + cubeW, yAxisPoint[1] - cubeW]
           const c3 = [yAxisPoint[0], yAxisPoint[1]]
           ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
         }
@@ -75,8 +78,8 @@ export default {
           const yAxisPoint = shape.yAxisPoint
           const c1 = [shape.x, shape.y]
           const c2 = [yAxisPoint[0], yAxisPoint[1]]
-          const c3 = [yAxisPoint[0] + 9, yAxisPoint[1] + 18]
-          const c4 = [shape.x + 9, shape.y + 18]
+          const c3 = [yAxisPoint[0] + cubeW, yAxisPoint[1] + cubeH]
+          const c4 = [shape.x + cubeW, shape.y + cubeH]
           ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
         }
       })
@@ -87,9 +90,9 @@ export default {
         },
         buildPath: function(ctx, shape) {
           const c1 = [shape.x, shape.y]
-          const c2 = [shape.x + 9, shape.y + 18]
-          const c3 = [shape.x + 18, shape.y + 9]
-          const c4 = [shape.x + 9, shape.y - 9]
+          const c2 = [shape.x + cubeW, shape.y + cubeH]
+          const c3 = [shape.x + cubeH, shape.y + cubeW]
+          const c4 = [shape.x + cubeW, shape.y - cubeW]
           ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
         }
       })
@@ -154,171 +157,174 @@ export default {
             fontSize: this.EchartfontSize(10)
           }
         },
-        series: [{
-          type: 'custom',
-          renderItem: function(params, api) {
-            const location = api.coord([api.value(0), api.value(1)])
+        series: [
+          {
+            type: 'custom',
+            renderItem: function (params, api) {
+              const location = api.coord([api.value(0), api.value(1)])
 
-            return {
-              type: 'group',
-              children: [{
-                type: 'CubeLeft',
-                shape: {
-                  api,
-                  xValue: api.value(0),
-                  yValue: api.value(1),
-                  x: location[0],
-                  y: location[1],
-                  yAxisPoint: api.coord([0, api.value(1)])
-                },
-                style: {
-                  fill: 'rgb(19, 39, 46) '
-                }
-              }, {
-                type: 'CubeRight',
-                shape: {
-                  api,
-                  xValue: api.value(0),
-                  yValue: api.value(1),
-                  x: location[0],
-                  y: location[1],
-                  yAxisPoint: api.coord([0, api.value(1)])
-                },
-                style: {
-                  fill: 'rgb(19, 39, 46) '
-                }
-              }, {
-                type: 'CubeTop',
-                shape: {
-                  api,
-                  xValue: api.value(0),
-                  yValue: api.value(1),
-                  x: location[0],
-                  y: location[1],
-                  yAxisPoint: api.coord([0, api.value(1)])
-                },
-                style: {
-                  fill: 'rgb(19, 39, 46)'
-                }
-              }]
-            }
-          },
-          data: MAX
-        },
-        {
-          type: 'custom',
-          renderItem: (params, api) => {
-            const location = api.coord([api.value(0), api.value(1)])
-            return {
-              type: 'group',
-              children: [{
-                type: 'CubeLeft',
-                shape: {
-                  api,
-                  xValue: api.value(0),
-                  yValue: api.value(1),
-                  x: location[0],
-                  y: location[1],
-                  yAxisPoint: api.coord([0, api.value(1)])
-                },
-                style: {
-                  fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
-                    offset: 0,
-                    color: '#50B9E0'
+              return {
+                type: 'group',
+                children: [{
+                  type: 'CubeLeft',
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    yAxisPoint: api.coord([0, api.value(1)])
                   },
-                  {
-                    offset: 1,
-                    color: '#88DDF2'
+                  style: {
+                    fill: 'rgb(19, 39, 46) '
                   }
-                  ])
-                }
-              }, {
-                type: 'CubeRight',
-                shape: {
-                  api,
-                  xValue: api.value(0),
-                  yValue: api.value(1),
-                  x: location[0],
-                  y: location[1],
-                  yAxisPoint: api.coord([0, api.value(1)])
-                },
-                style: {
-                  fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
-                    offset: 0,
-                    color: '#399AB2'
+                }, {
+                  type: 'CubeRight',
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    yAxisPoint: api.coord([0, api.value(1)])
                   },
-                  {
-                    offset: 1,
-                    color: '#6BCAD9'
+                  style: {
+                    fill: 'rgb(19, 39, 46) '
                   }
-                  ])
-                }
-              }, {
-                type: 'CubeTop',
-                shape: {
-                  api,
-                  xValue: api.value(0),
-                  yValue: api.value(1),
-                  x: location[0],
-                  y: location[1],
-                  yAxisPoint: api.coord([0, api.value(1)])
-                },
-                style: {
-                  fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
-                    offset: 0,
-                    color: 'rgba(127,217,254,0.78)'
+                }, {
+                  type: 'CubeTop',
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    yAxisPoint: api.coord([0, api.value(1)])
                   },
-                  {
-                    offset: 1,
-                    color: '#7FD9FE'
+                  style: {
+                    fill: 'rgb(19, 39, 46)'
                   }
-                  ])
-                }
-              }]
-            }
+                }]
+              }
+            },
+            data: MAX
           },
-          data: VALUE
-        },
-        {
-          type: 'bar',
-          label: {
-
-            normal: {
-              show: true,
-              position: [0, '10%'],
-              formatter: (e) => {
-                return e.name
-              },
-              fontSize: this.EchartfontSize(14),
-              color: '#fff'
-            }
-          },
-          itemStyle: {
-            color: 'transparent'
+          {
+            type: 'custom',
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)])
+              return {
+                type: 'group',
+                children: [
+                  {
+                    type: 'CubeLeft',
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      yAxisPoint: api.coord([0, api.value(1)])
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                        offset: 0,
+                        color: '#50B9E0'
+                      },
+                        {
+                          offset: 1,
+                          color: '#88DDF2'
+                        }
+                      ])
+                    }
+                  },
+                  {
+                    type: 'CubeRight',
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      yAxisPoint: api.coord([0, api.value(1)])
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                        offset: 0,
+                        color: '#399AB2'
+                      },
+                        {
+                          offset: 1,
+                          color: '#6BCAD9'
+                        }
+                      ])
+                    }
+                  }, {
+                    type: 'CubeTop',
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      yAxisPoint: api.coord([0, api.value(1)])
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                        offset: 0,
+                        color: 'rgba(127,217,254,0.78)'
+                      },
+                        {
+                          offset: 1,
+                          color: '#7FD9FE'
+                        }
+                      ])
+                    }
+                  }]
+              }
+            },
+            data: VALUE
           },
-          data: VALUE
-        },
-        {
-          type: 'bar',
-          label: {
+          {
+            type: 'bar',
+            label: {
 
-            normal: {
-              show: true,
-              position: ['80%', '-100%'],
-              formatter: (e) => {
-                const ret = `${values[e.dataIndex]}/${maxs[e.dataIndex]}`
-                return ret
-              },
-              fontSize: this.EchartfontSize(14),
-              color: '#fff'
-            }
-          },
-          itemStyle: {
-            color: 'transparent'
+              normal: {
+                show: true,
+                position: [0, '-10%'],
+                formatter: (e) => {
+                  return e.name
+                },
+                fontSize: this.EchartfontSize(14),
+                color: '#fff'
+              }
+            },
+            itemStyle: {
+              color: 'transparent'
+            },
+            data: VALUE
           },
-          data: MAX,
-          zlevel: 2
-        }
+          {
+            type: 'bar',
+            label: {
+
+              normal: {
+                show: true,
+                position: ['80%', '-125%'],
+                formatter: (e) => {
+                  const ret = `${values[e.dataIndex]}/${maxs[e.dataIndex]}`
+                  return ret
+                },
+                fontSize: this.EchartfontSize(14),
+                color: '#fff'
+              }
+            },
+            itemStyle: {
+              color: 'transparent'
+            },
+            data: MAX,
+            zlevel: 2
+          }
         ]
       }
     }