<template>
  <div id="lineCmp3">
    <cmpTitle title="消防通道堵塞事件趋势" position="absolute"></cmpTitle>
    <div id="cmps" style="width: 100%;height:100%;"></div>
  </div>
</template>
<script>
  import cmpTitle from "../common/cmpTitle.vue"
  export default {
    components:{
        cmpTitle
      },
    name: 'lineCmp3',
    data () {
      return {
        option : {
            // title: {
            //     text: "近30天采集量走势",
            //     left: 40,
            //     top: 20,
            //     textStyle: {
            //         fontSize: 30,
            //         color: '#fff'
            //     }
            // },
            // backgroundColor: "#000360",
            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: '20%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#A1D5FF'
                    }
                },
                splitArea: {
                    color: '#f00',
                    lineStyle: {
                        color: '#f00'
                    },
                },
                axisLabel: {
                    color: '#A1D5FF'
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],

            }],

            yAxis: [{
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#A1D5FF'
                    },
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#A1D5FF'
                    }
                },
            }],
            series: [{
                    name: '注册总量',
                    type: 'line',
                    // smooth: true, //是否平滑
                    showAllSymbol: true,
                    symbol: 'circle',
                    symbolSize: 7,
                    lineStyle: {
                        normal: {
                            color: "rgba(3,221,255,0.8)",
                            shadowColor: 'rgba(0, 0, 0, .3)',
                            shadowBlur: 0,
                            shadowOffsetY: 1,
                            shadowOffsetX: 1,
                        },
                    },
                    itemStyle: {
                        color: "rgba(3,221,255,0.8)",
                        borderColor: "#A1D5FF",
                        borderWidth: 1,
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 1,
                        shadowOffsetX: 1,
                    },
                    tooltip: {
                        show: false
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(108,80,243,0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(108,80,243,0)'
                                }
                            ], false),
                            shadowColor: 'rgba(3,221,255,0.8)',
                            shadowBlur: 20
                        }
                    },
                    data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02,123 ]
                }
            ]
        },
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {
      drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('cmps'))
          // 绘制图表
          myChart.setOption(this.option);
      },

    }
  }
</script>

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