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

<script>
import * as echarts from 'echarts'
import testdata from './testdata'
export default {
  data () {
    return testdata
  },
  mounted () {
    this.initChartLine()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize()
    }
  },
  methods: {
    // 折线图
    initChartLine () {
      var option = {
        title: {
          text: '折线图'
        },
        tooltip: { // 悬浮提示框
          trigger: 'axis',
          boundaryGap: false,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: e => {
            return `
               点位坐标: ${e[0].data.position}<br/>
               ${e[0].marker} 数值: ${e[0].data.value}<br/>
               ${e[0].marker} 报警: ${e[0].data.sRule || '无'}
                `
          }
        },
        grid: { // 折线图内边距
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {},
        xAxis: {
          show: false,
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          boundaryGap: false,
          min: 66.5
        },
        visualMap: { // 折线颜色修改
          type: 'piecewise',
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [],
          outOfRange: {
            // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
            color: 'blue'
          }
        },
        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: [
          {
            type: 'line',
            smooth: true,
            symbol: 'emptyDiamond', // 设定为实心点
            symbolSize: 10,
            lineStyle: {
              // color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
              width: 1
            },
            markLine: {
              // 最大值最小值均值线
              symbol: 'none',
              label: {
                position: 'end'
              },
              data: [
                {
                  lineStyle: {
                    color: 'red',
                    type: 'solid'
                  },
                  yAxis: this.highLine
                },
                {
                  lineStyle: {
                    color: 'black',
                    type: [5, 10],
                    dashOffset: 5
                  },
                  yAxis: 67.4
                },
                {
                  lineStyle: {
                    color: '#6ca4ea',
                    type: 'solid'
                  },
                  yAxis: this.lowLine
                }
              ]
            },
            markPoint: {
              // 最大值最小值点
              // 标记
              data: [
                { name: '最小值', type: 'min' },
                { name: '最大值', type: 'max' }
              ],
              symbolSize: 80, // 标记的大小
              label: {
                // 标记单位
                formatter: '{c}' // 单位
              }
            },
            markArea: {
              // 以y轴分割的区域
              silent: false,
              itemStyle: {
                color: '#BCE7B1'
              },
              data: [
                [
                  {
                    name: '',
                    yAxis: 67.4
                  },
                  {
                    yAxis: 67.7
                  }
                ]
              ]
            },
            // areaStyle: {},
            data: this.msdGraphEntity.list.map(item => {
              const obj = {
                position: item.position,
                value: item.xbar,
                sRule: item.sUnsatisfiedRules.join(',')
              }
              return obj
            })
          }
        ]
      }
      this.msdGraphEntity.list.forEach((item, index) => {
        if (item.sUnsatisfiedRules.length) {
          option.visualMap.pieces.push({
            gte: index,
            lt: index + 1,
            color: 'red'
          })
        }
      })
      this.chartLine = echarts.init(document.getElementById('chartLine'))
      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>
