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

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

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

export default {
  name: 'PlFaultAnalysisPieChart',
  mixins: [resize],
  props: {},
  data() {
    return {
      chart: null,
      configs: {
        color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        // legend: {
        //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
        grid: {
          top: '15%',
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#ffffff66'
              }
            },
            axisTick: { show: false },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,1)' //
              },
              margin: 20
            },
            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
          }
        ],
        yAxis: [
          {
            name: '成品率',
            type: 'value',
            nameTextStyle: {
              color: 'rgba(255,255,255,0.7)',
              fontSize: 10,
              align: 'right'
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                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)'
              }
            }
          }
        ],
        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]
          },
          {
            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]
          },
          {
            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]
          },
          {
            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]
          },
          {
            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]
          }
        ]
      }
    }
  },
  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: {}
}
</script>

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