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

<template>
  <div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: 100%;" />
</template>

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

export default {
  name: 'PlFaultAnalysisPieChart',
  mixins: [resize],
  props: {
    dataUpdateToken: {
      type: String,
      default: 'default-token'
    }
  },
  data() {
    return {
      chart: null,
      configs: {
        color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
        tooltip: {
          trigger: 'axis',
          extraCssText: 'width: 180px !important; ',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: '25%',
          left: '2%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#ffffff66'
              }
            },
            axisTick: { show: false },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,1)' //
              },
              margin: 12
            },
            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
          }
        ],
        yAxis: [
          {
            name: '成品率',
            type: 'value',
            min: 'dataMin',
            splitNumber: 4,
            nameTextStyle: {
              color: 'rgba(255,255,255,0.7)',
              fontSize: 12,
              align: 'right'
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
                width: '1' // 坐标线的宽度
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: '{value} %',
              textStyle: {
                color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dotted',
                color: 'rgba(119, 255, 242, 0.2)'
              }
            }
          }
        ],
        series: [
          {
            name: 'A1下片机',
            type: 'line',
            symbol: 'none',
            areaStyle: {
              // color: 'rgba(50,145,152,0.5)'
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#FB418C66' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'transparent' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [11, 199, 140, 63, 185, 5, 78].map(_ => {
              let v = Math.floor(Math.random() * 100)
              while (v < 80) {
                v = Math.floor(Math.random() * 100)
              }
              return v
            })
          },
          {
            name: '磨边机',
            type: 'line',
            symbol: 'none',

            areaStyle: {
              // color: 'rgba(50,145,152,0.5)'
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#DDB11266' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'transparent' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
              let v = Math.floor(Math.random() * 100)
              while (v < 80) {
                v = Math.floor(Math.random() * 100)
              }
              return v
            })
          },
          {
            name: '镀膜机',
            type: 'line',
            symbol: 'none',

            areaStyle: {
              // color: 'rgba(50,145,152,0.5)'
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#1A99FF66' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'transparent' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [58, 3, 67, 100, 42, 96, 124].map(_ => {
              let v = Math.floor(Math.random() * 100)
              while (v < 80) {
                v = Math.floor(Math.random() * 100)
              }
              return v
            })
          },
          {
            name: '包装纸',
            type: 'line',
            symbol: 'none',

            areaStyle: {
              // color: 'rgba(50,145,152,0.5)'
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#A691FF66' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'transparent' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [92, 88, 122, 169, 108, 130, 147].map(_ => {
              let v = Math.floor(Math.random() * 100)
              while (v < 80) {
                v = Math.floor(Math.random() * 100)
              }
              return v
            })
          },
          {
            name: '丝印',
            type: 'line',
            symbol: 'none',

            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {
              // color: 'rgba(50,145,152,0.5)'
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#49FBD666' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'transparent' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [44, 40, 118, 197, 123, 95, 96].map(_ => {
              let v = Math.floor(Math.random() * 100)
              while (v < 80) {
                v = Math.floor(Math.random() * 100)
              }
              return v
            })
          }
        ]
      }
    }
  },

  watch: {
    dataUpdateToken(val) {
      this.refreshData()
    }
  },

  mounted() {
    window.addEventListener('resize', function() {
      if (this.chart) {
        this.chart.resize()
      }
    })

    this.$nextTick(() => {
      // if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
      if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)

      this.chart.setOption(this.configs)
      this.chart.resize()
    })
  },
  methods: {
    refreshData() {
      this.configs.series.forEach(item => {
        item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
          let v = Math.floor(Math.random() * 100)
          while (v < 80) {
            v = Math.floor(Math.random() * 100)
          }
          return v
        })
      })
      if (this.chart) this.chart.setOption(this.configs)
    }
  }
}
</script>

<style scoped>
.chartContainer >>> div {
  width: 100% !important;
}

.diy-linestack-tooltip {
  color: red;
}
</style>