<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="chart3Line" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import test3data from './test3data'
export default {
  data () {
    return test3data
  },
  mounted () {
    this.initChartLine()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize()
    }
  },
  methods: {
    // 折线图
    initChartLine () {
      var option = {
        title: {
          text: '折线图'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: { // 折线图内边距
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {},
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [
          // 轴放大
          {
            type: 'inside',
            start: 0,
            end: 100
          },
          {
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            yAxisIndex: 0,
            start: 0,
            end: 100
          },
          {
            show: true,
            yAxisIndex: 0,
            realtime: true,
            left: 6,
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            name: '折线',
            type: 'line',
            lineStyle: {
              color: '#5470c6'
            },
            endLabel: {
              formatter: '折线',
              show: true
            },
            data: this.list.map(item => {
              return item.value
            })
          },
          {
            name: 'LCL',
            type: 'line',
            step: 'middle',
            lineStyle: {
              color: '#91cc75'
            },
            endLabel: {
              formatter: 'LCL',
              show: true
            },
            data: this.list.map(item => {
              return item.controlLimit.lcl
            })
          },
          {
            name: 'CL',
            type: 'line',
            step: 'middle',
            lineStyle: {
              color: '#ee6666'
            },
            endLabel: {
              formatter: 'CL',
              show: true
            },
            data: this.list.map(item => {
              return item.controlLimit.cl
            })
          },
          {
            name: 'UCL',
            type: 'line',
            step: 'middle',
            lineStyle: {
              color: '#fac858'
            },
            endLabel: {
              formatter: 'UCL',
              show: true
            },
            data: this.list.map(item => {
              return item.controlLimit.ucl
            })
          }
        ]
      }
      this.chartLine = echarts.init(document.getElementById('chart3Line'))
      this.chartLine.setOption(option)
      window.addEventListener('resize', () => {
        this.chartLine.resize()
      })
    }
  }
}
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>
