11-mes-new/src/views/3DOverview/components/TechyBar.vue

<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: 'TechyBarFor3DPage',
  props: {
    datainfo: {
      type: Array,
      default: () => [
        {
          name: '产线A',
          list: [100, 102, 104, 105, 100, 117]
        },
        {
          name: '产线B',
          list: [110, 92, 124, 85, 100, 120]
        }
      ]
    },
    unitName: {
      type: String,
      default: ''
    },
    extraSpaceBetweenZero: {
      type: Number,
      default: 25
    }
  },
  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'
      }
    ]

    let result = []

    this.datainfo.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
          }
        },
        label: {
          show: true,
          position: 'top',
          color: '#fff8',
          fontSize: 8,
          offset: [0, 6]
        }
      }

      result.push(topCircle)
      result.push(mainBar)
      result.push(bottomCircle)
    })

    return {
      BottomPic,
      width: 0,
      chart: null,
      option: {
        legend: {
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          top: '2%',
          right: '10%',
          textStyle: {
            color: '#fff8'
          },
          data: this.datainfo.map(item => item.name)
        },
        grid: {
          top: 24,
          left: '8%',
          bottom: 24
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            onZero: false,
            show: false,
            lineStyle: {}
          },
          axisLabel: {
            color: '#fff8',
            fontSize: 10
          },
          data: ['产线A', '产线B', '产线C', '产线D', '产线E', '产线F']
        },
        yAxis: {
          type: 'value',
          // min: -25,
          min: this.extraSpaceBetweenZero * -1,
          name: this.unitName,
          nameTextStyle: {
            color: '#fff8',
            fontSize: 8,
            verticalAlign: 'top',
            align: 'right'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#31A2FF'
            }
          },
          axisLabel: {
            color: '#fff8',
            fontSize: 10,
            /** 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,
            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.88
      option.graphic[0].style.height = height * 0.3
      option.graphic[0].style.image = this.BottomPic.default
      option.graphic[0].left = '8%'
      option.graphic[0].bottom = 24
    },
    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>