<template>
  <div id="lineCmp3">
    <cmpTitle title="告警工单处理趋势" position="absolute"></cmpTitle>
    <div id="lineCmp4" style="width: 100%;height:100%;"></div>
  </div>
</template>
<script>
  import cmpTitle from "../common/cmpTitle.vue"
  export default {
    components:{
        cmpTitle
      },
    name: 'lineCmp3',
    data () {
      return {
        option :{
            // backgroundColor: '#080b30',
            // title: {
            //     text: '多线图',
            //     textStyle: {
            //         align: 'center',
            //         color: '#fff',
            //         fontSize: 20,
            //     },
            //     top: '5%',
            //     left: 'center',
            // },
            legend: {
                show: true,
                icon: "rect",
                itemWidth: 14,
                itemHeight: 5,
                itemGap: 10,
                left: "20%",
                top: 0,
                textStyle: {
                    fontSize: 10,
                    color: "#ccc"
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 255, 233,0)'
                            }, {
                                offset: 0.5,
                                color: 'rgba(255, 255, 255,1)',
                            }, {
                                offset: 1,
                                color: 'rgba(0, 255, 233,0)'
                            }],
                            global: false
                        }
                    },
                },
            },
            grid: {
                top: '5%',
                left: '5%',
                right: '5%',
                bottom: '20%',
                // containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true
                },
                splitArea: {
                    // show: true,
                    color: '#f00',
                    lineStyle: {
                        color: '#f00'
                    },
                },
                axisLabel: {
                    color: '#A1D5FF'
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: [            '09/02', '10/02', '11/02', '12/02', '01/02',],

            }],

            yAxis: [{
                type: 'value',
                min: 0,
                // max: 140,
                splitNumber: 4,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                    margin: 20,
                    textStyle: {
                        color: '#A1D5FF',

                    },
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [{
                    name: '未处理',
                    type: 'line',
                    smooth: true, //是否平滑
                    showAllSymbol: false,
                    // symbol: 'image://./static/images/guang-circle.png',
                    symbol: 'circle',
                    symbolSize: 2,
                    lineStyle: {
                        normal: {
                            color: "#00b3f4",
                        },
                    },
                    itemStyle: {
                        color: "#00b3f4",
                    },
                    tooltip: {
                        show: true
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0,179,244,0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,179,244,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(0,179,244, 0.9)',
                            shadowBlur: 20
                        }
                    },
                    data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
                },
                {
                    name: '已处理',
                    type: 'line',
                    smooth: true, //是否平滑
                    showAllSymbol: false,
                    // symbol: 'image://./static/images/guang-circle.png',
                    symbol: 'circle',
                    symbolSize: 2,
                    lineStyle: {
                        normal: {
                            color: "#00ca95",
                        },
                    },
                    itemStyle: {
                        color: "#00ca95",
                    },
                    tooltip: {
                        show: true
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0,202,149,0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,202,149,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(0,202,149, 0.9)',
                            shadowBlur: 20
                        }
                    },
                    data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
                },
            ]
        },
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {
      drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('lineCmp4'))
          // 绘制图表
          myChart.setOption(this.option);
      },

    }
  }
</script>

<style lang="less">
  #lineCmp3{
    width: 100%;
    height:100%;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
  }
</style>
