11-mes-new/src/views/QualityManager/components/charts/newBar.vue

<template>
  <div
    ref="chartContainer"
    class="chartContainer"
    :class="bindClass"
    style="position: relative; width: 100%; height: calc(100% - 36px)"
  />
</template>

<script>
import echarts from 'echarts' // echarts theme
import resize from '@/views/OperationalOverview/components/mixins/resize'

export default {
  name: 'OverviewBar',
  mixins: [resize],
  props: {
    chartName: {
      type: String,
      default: ''
    },
    xlabelFontSize: {
      type: Number,
      default: 12
    },
    xlabelRotate: {
      type: Number,
      default: 0
    },
    nameList: {
      type: Array,
      default: () => []
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      series: []
    }
  },
  computed: {
    bindClass() {
      return {
        'fault-category-chart': this.chartName === 'fault-category',
        'process-fault-chart': this.chartName === 'process-fault'
      }
    }
  },
  mounted() {
    if (this.dataList.length > 1) {
      const barWidth = 400 / 2 / this.dataList[0].data.length
      this.series = [
        {
          // 柱体
          name: this.dataList[0].name,
          type: 'bar',
          barWidth,
          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
        },
        {
          // 柱顶
          name: this.dataList[0].name,
          type: 'pictorialBar',
          barWidth,
          symbol: 'diamond',
          symbolPosition: 'end',
          symbolOffset: [0, '-50%'],
          symbolSize: [30, 12],
          zlevel: 2,
          itemStyle: { color: this.dataList[0].topColor },
          data: this.dataList[0].data
        },
        {
          // 柱底
          name: this.dataList[0].name,
          type: 'pictorialBar',
          barWidth,
          symbol: 'diamond',
          symbolOffset: [0, '50%'],
          symbolSize: [30, 15],
          itemStyle: { color: this.dataList[0].bottomColor },
          data: this.dataList[0].data
        },
        {
          // 柱体
          name: this.dataList[1].name,
          type: 'bar',
          barWidth,
          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
        },
        {
          // 柱顶
          name: this.dataList[1].name,
          type: 'pictorialBar',
          barWidth,
          symbol: 'diamond',
          symbolPosition: 'end',
          symbolOffset: [0, '-50%'],
          symbolSize: [30, 12],
          zlevel: 2,
          itemStyle: { color: this.dataList[1].topColor },
          data: this.dataList[1].data
        },
        {
          // 柱底
          name: this.dataList[1].name,
          type: 'pictorialBar',
          barWidth,
          symbol: 'diamond',
          symbolOffset: [0, '50%'],
          symbolSize: [30, 15],
          itemStyle: { color: this.dataList[1].topColor },
          data: this.dataList[1].data
        }
      ]
    } else {
      const barWidth = 400 / 2 / this.dataList[0].data.length
      this.series = [
        {
          // 柱体
          name: this.dataList[0].name,
          type: 'bar',
          // barWidth: 26,
          barWidth: barWidth,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: this.dataList[0].topColor },
              { offset: 1, color: this.dataList[0].bottomColor }
            ])
            // borderWidth: 1,
            // borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度
          },
          data: this.dataList[0].data
          // backgroundStyle: {
          //   // borderColor: this.dataList[0].bottomColor,
          //   borderColor: '#ff0000',
          //   borderWidth: 1
          // }
        },
        {
          // 柱顶
          name: this.dataList[0].name,
          type: 'pictorialBar',
          // barWidth: 26,
          barWidth: barWidth,
          symbol: 'circle',
          symbolPosition: 'end',
          symbolOffset: [0, '-50%'],
          symbolSize: [barWidth, 6],
          zlevel: 2,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(59, 76, 118, 0)' },
              { offset: 1, color: '#2c6e7d' }
            ])
          },
          label: {
            color: this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : '#31a2ff',
            show: true,
            offset: [0, 10],
            position: 'top',
            vertialAlign: 'bottom'
          },
          data: this.dataList[0].data
        },
        {
          // 柱底
          name: this.dataList[0].name,
          type: 'pictorialBar',
          // barWidth: 26,
          barWidth: barWidth,
          symbol: 'circle',
          symbolOffset: [0, '50%'],
          symbolSize: [barWidth, 6],
          itemStyle: { color: '#2c6e7d' },
          data: this.dataList[0].data
        }
      ]
    }
    this.$nextTick(() => {
      console.log('on Mounted(): ')
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer)
      this.chart.setOption({
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              fontSize: this.xlabelFontSize,
              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
            },
            margin: 20,
            rotate: this.xlabelRotate
          },
          data: this.nameList
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: this.dataList[0].bottomColor,
              // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
              width: '1' // 坐标线的宽度
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: 'rgba(119, 255, 242, 0.2)'
            }
          },
          type: 'value'
        },
        series: this.series
      })
    }
  }
}
</script>
<style scoped>
.chartContainer >>> div {
  width: 100% !important;
  height: 100% !important;
  /* position: relative !important; */
}

.fault-category-chart >>> div::before {
  /* .fault-category-chart::before { */
  content: '';
  position: absolute;
  bottom: calc(30px * var(--beilv));
  left: 9%;
  height: calc(32px * var(--beilv));
  width: 90%;
  background: linear-gradient(to top, #31a2ff6d, transparent);
  transform: skew(-35deg);
  z-index: 0;
}
.process-fault-chart >>> div::before {
  /* .process-fault-chart::before { */
  content: '';
  position: absolute;
  bottom: 12%;
  left: 8%;
  height: calc(32px * var(--beilv));
  /* bottom: calc(20px * var(--beilv));
  left: calc(36px * var(--beilv));
  height: calc(32px * var(--beilv)); */
  width: 90%;
  background: linear-gradient(to top, #49fbd789, transparent);
  transform: skew(-35deg);
  z-index: 0;
}
</style>