update TechyBar

src/views/QualityManager/HomePage.vue

@@ -46,7 +46,7 @@
                       class="absolute top-0 left-0"
                       style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
                     >
-                      <new-bar
+                      <!-- <new-bar
                         chart-name="realtime-cost-production"
                         :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
                         :data-list="[
@@ -63,7 +63,8 @@
                             data: [162, 172, 122, 15, 82, 74]
                           }
                         ]"
-                      />
+                      /> -->
+                      <techy-bar />
                     </div>
                   </techy-box>
                 </div>
@@ -255,6 +256,7 @@ import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart
 import { mapGetters } from 'vuex'
 import screenfull from 'screenfull'
 import NewBar from './components/charts/newBar.vue'
+import TechyBar from './components/charts/TechyBar.vue'
 import NewLineStack from './components/charts/newLineStack.vue'
 
 import { qualityDatalist, qualityTableProps, qualityExceptionDatalist, qualityExceptionTableProps } from './mockData'
@@ -271,6 +273,7 @@ export default {
     // FaultCategoryChart,
     PlFaultAnalysisPieChart,
     NewBar,
+    TechyBar,
     NewLineStack
   },
   data() {

src/views/QualityManager/components/charts/TechyBar.vue

@@ -0,0 +1,261 @@
+<template>
+  <div ref="techyBar" class="techy-bar"></div>
+</template>
+
+<script>
+import echarts from 'echarts' // echarts theme
+import resize from '@/views/OperationalOverview/components/mixins/resize'
+import * as BottomPic from './bottom.png'
+
+export default {
+  name: 'TechyBar',
+  props: {},
+  mixins: [resize],
+  data() {
+    const color_gradients = [
+      /** 蓝 */
+      {
+        direction: 'to top',
+        from: '#49B2FF', // * 0.6 是底部颜色和顶部颜色
+        to: '#49B2FF00',
+        topAndBottom: '#49B2FF9F'
+      },
+      /** 绿 */
+      {
+        direction: 'to top',
+        from: '#49FBD6', // * 0.6 是底部颜色和顶部颜色
+        to: '#49FBD600',
+        topAndBottom: '#49FBD69F'
+      }
+    ]
+
+    const mock_data = [
+      {
+        color: [
+          /** top color **/
+          '#0b58ff',
+          /** bottom color **/
+          '#993f80'
+        ],
+        name: '产线A',
+        list: [100, 102, 104, 105, 100, 117]
+      },
+      {
+        color: [
+          /** top color **/
+          '#49FBD6',
+          /** bottom color **/
+          '#31A2FF'
+        ],
+        name: '产线B',
+        list: [110, 92, 124, 85, 100, 120]
+      }
+    ]
+
+    let result = []
+
+    mock_data.map((pl, index) => {
+      let topCircle = {
+        __position: 'top',
+        name: pl.name,
+        barGap: '10%',
+        barCategoryGap: '48%',
+        type: 'pictorialBar',
+        symbol: 'circle',
+        symbolPosition: 'end',
+        symbolOffset: ['25%', '-50%'],
+        // symbolSize: ['100%', 6],
+        symbolSize: ['200%', 6],
+        data: pl.list,
+        z: 10,
+        itemStyle: {
+          // color: color_gradients[index].topAndBottom
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: color_gradients[index].topAndBottom
+              },
+              {
+                offset: 1,
+                color: color_gradients[index].to
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      }
+      let bottomCircle = {
+        __position: 'top',
+        name: pl.name,
+        barGap: '10%',
+        barCategoryGap: '48%',
+        type: 'pictorialBar',
+        symbol: 'circle',
+        symbolOffset: ['-25%', '50%'],
+        symbolSize: ['200%', 6],
+        data: pl.list,
+        z: 10,
+        itemStyle: {
+          color: color_gradients[index].from
+        }
+      }
+
+      let mainBar = {
+        __position: 'main',
+        type: 'bar',
+        name: pl.name,
+        // barWidth: 20, // 不需要设置 barWidth
+        barGap: '10%',
+        barCategoryGap: '48%',
+        data: pl.list,
+        z: 0,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: color_gradients[index].from
+              },
+              {
+                offset: 0.15,
+                color: color_gradients[index].topAndBottom
+              },
+              {
+                offset: 1,
+                color: color_gradients[index].to
+              }
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      }
+
+      result.push(topCircle)
+      result.push(mainBar)
+      result.push(bottomCircle)
+    })
+
+    return {
+      BottomPic,
+      width: 0,
+      chart: null,
+      option: {
+        grid: {
+          left: '10%',
+          top: 36,
+          bottom: 28
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            onZero: false,
+            show: false,
+            lineStyle: {}
+          },
+          axisLabel: {
+            color: '#fff8'
+          },
+          data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
+        },
+        yAxis: {
+          type: 'value',
+          min: -25,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#31A2FF'
+            }
+          },
+          axisLabel: {
+            color: '#fff8',
+            /** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/
+            formatter: function(value, index) {
+              if (value < 0) {
+                return ''
+              }
+              return value
+            }
+          },
+          axisTick: { show: false },
+          splitLine: {
+            lineStyle: {
+              color: '#569acd',
+              type: 'dotted',
+              opacity: 0.2
+            }
+          }
+        },
+
+        series: result,
+
+        graphic: [
+          {
+            type: 'image',
+            left: 0,
+            bottom: 0,
+            // left: '10%',
+            // bottom: '5%',
+            style: {
+              image: 'image url',
+              height: 0,
+              width: 0
+            }
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.refreshOption)
+    if (!this.chart) this.chart = echarts.init(this.$refs.techyBar)
+
+    this.$nextTick(() => {
+      this.updateOption(this.option)
+      this.chart.setOption(this.option)
+    })
+  },
+  methods: {
+    updateOption(option) {
+      // console.log('option', this.BottomPic.default)
+      let width = this.$refs.techyBar.querySelector('div').clientWidth
+      let height = this.$refs.techyBar.querySelector('div').clientHeight
+      option.graphic[0].style.width = width * 0.85
+      option.graphic[0].style.height = height * 0.25
+      option.graphic[0].style.image = this.BottomPic.default
+      option.graphic[0].left = '10%'
+      option.graphic[0].bottom = 28
+    },
+    refreshOption() {
+      this.updateOption(this.option)
+      this.chart.setOption(this.option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.techy-bar {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.techy-bar >>> div {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>

src/views/QualityManager/components/charts/newBar.vue

@@ -10,6 +10,7 @@
 <script>
 import echarts from 'echarts' // echarts theme
 import resize from '@/views/OperationalOverview/components/mixins/resize'
+import * as BottomPic from './bottom.png'
 
 export default {
   name: 'OverviewBar',
@@ -42,6 +43,7 @@ export default {
   },
   data() {
     return {
+      BottomPic,
       chart: null,
       series: []
     }
@@ -56,30 +58,33 @@ export default {
     }
   },
   mounted() {
+    console.log('BottomPic, ', this.BottomPic)
+
     if (this.dataList.length > 1) {
       this.series = [
         {
           // 柱体
           name: this.dataList[0].name,
           type: 'bar',
-          barWidth: 20,
+          barWidth: 16,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: this.dataList[0].topColor },
               { offset: 1, color: this.dataList[0].bottomColor }
             ])
           },
-          data: this.dataList[0].data
+          data: this.dataList[0].data,
+          barCategoryGap: '20%'
         },
         {
           // 柱顶
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          barWidth: 20,
+          barWidth: 16,
           symbol: 'circle',
           symbolPosition: 'end',
           symbolOffset: ['-70%', '-50%'],
-          symbolSize: [20, 6],
+          symbolSize: [16, 6],
           zlevel: 2,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -99,41 +104,44 @@ export default {
             offset: [-12, 10],
             position: 'top',
             vertialAlign: 'bottom'
-          }
+          },
+          barCategoryGap: '20%'
         },
         {
           // 柱底
           name: this.dataList[0].name,
           type: 'pictorialBar',
-          barWidth: 20,
+          barWidth: 16,
           symbol: 'circle',
           symbolOffset: ['-62%', '50%'],
-          symbolSize: [20, 6],
+          symbolSize: [16.5, 5],
           itemStyle: { color: this.dataList[0].bottomColor },
-          data: this.dataList[0].data
+          data: this.dataList[0].data,
+          barCategoryGap: '20%'
         },
         {
           // 柱体
           name: this.dataList[1].name,
           type: 'bar',
-          barWidth: 20,
+          barWidth: 16,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: this.dataList[1].topColor },
               { offset: 1, color: this.dataList[1].bottomColor }
             ])
           },
-          data: this.dataList[1].data
+          data: this.dataList[1].data,
+          barCategoryGap: '20%'
         },
         {
           // 柱顶
           name: this.dataList[1].name,
           type: 'pictorialBar',
-          barWidth: 20,
+          barWidth: 16,
           symbol: 'circle',
           symbolPosition: 'end',
           symbolOffset: ['66%', '-50%'],
-          symbolSize: [20, 6],
+          symbolSize: [16, 6],
           zlevel: 2,
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -150,21 +158,23 @@ export default {
                 ? '#31a2ff'
                 : '#fff9',
             show: true,
-            offset: [12, 10],
+            offset: [12, 5],
             position: 'top',
             vertialAlign: 'bottom'
-          }
+          },
+          barCategoryGap: '20%'
         },
         {
           // 柱底
           name: this.dataList[1].name,
           type: 'pictorialBar',
-          barWidth: 20,
+          barWidth: 16,
           symbol: 'circle',
           symbolOffset: ['66%', '50%'],
-          symbolSize: [20, 6],
+          symbolSize: [16, 6],
           itemStyle: { color: this.dataList[1].bottomColor },
-          data: this.dataList[1].data
+          data: this.dataList[1].data,
+          barCategoryGap: '20%'
         }
       ]
     } else {
@@ -239,6 +249,9 @@ export default {
     this.chart = null
   },
   methods: {
+    calcSize(size /** px */) {
+      // const beilv =
+    },
     initChart() {
       this.chart = echarts.init(this.$refs.chartContainer)
       this.chart.setOption({
@@ -341,7 +354,16 @@ export default {
           //   type: 'value'
           // }
         ],
-        series: this.series
+        series: this.series,
+        graphic: [
+          {
+            type: 'image',
+            id: 'bottom-pic',
+            bottom: '12%',
+            left: '10%',
+            style: { image: BottomPic.default, width: 380, height: 50 }
+          }
+        ]
       })
     }
   }
@@ -354,13 +376,9 @@ export default {
   /* position: relative !important; */
 }
 
-.fault-category-chart >>> div::before {
+/* .fault-category-chart >>> div::before {
-  /* .fault-category-chart::before { */
   content: '';
   position: absolute;
-  /* bottom: calc(100vh/1920 * 80);
-  left: calc(100vw/1920 * 48); */
-  /* bottom: calc(10% + 100vh/1920 * 28); */
   bottom: 25px;
   left: 9%;
   height: 52px;
@@ -370,7 +388,6 @@ export default {
   z-index: 0;
 }
 .process-fault-chart >>> div::before {
-  /* .process-fault-chart::before { */
   content: '';
   position: absolute;
   bottom: 26px;
@@ -382,7 +399,6 @@ export default {
   z-index: 0;
 }
 .realtime-production-cost-chart >>> div::before {
-  /* .fault-category-chart::before { */
   content: '';
   position: absolute;
   bottom: 12%;
@@ -390,9 +406,8 @@ export default {
   height: 30px;
   width: 90%;
   border-radius: 3px;
-  /* border: 1px solid #49fbd7; */
   background: linear-gradient(to top, #49fbd789 5%, transparent);
   transform: skew(-35deg);
   z-index: 0;
-}
+} */
 </style>