<!--suppress ALL -->
<template>
  <el-dialog :close-on-click-modal="false" title="时间速度曲线" :visible.sync="dialogFormVisible" append-to-body width="700px">
    <el-row>
      <div ref="chart" :style="{width: '700px', height: '400px'}"></div>
    </el-row>
  </el-dialog>
</template>

<script>
import { speedLine } from '@/api/overview'
import echarts from 'echarts'
export default {
  name: 'TrailStatic',
  data() {
    return {
      deptShow: true,
      xdata: [],
      ydata: [],
      dialogFormVisible: false, // 对话框是否显示
    }
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogFormVisible, row, name ) {
      this.dialogFormVisible = dialogFormVisible
      speedLine(row).then(response => {
        this.xdata = []
        this.ydata = []
        for(var i=0;i<response.data.length;i++){
          this.xdata.push(response.data[i].upTime)
          this.ydata.push(Number(response.data[i].speed))
        }
        console.log(this.xdata)
        console.log(this.ydata)
        this.chart = echarts.init(this.$refs.chart)
        this.chart.setOption({
          title: {
            text: name,
            left: 'center',
            align: 'right'
          },
          grid: {
            bottom: 80
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              animation: false,
              label: {
                backgroundColor: '#505765'
              }
            }
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              start: 0,
              end: 100
            },
            {
              type: 'inside',
              realtime: true,
              start: 0,
              end: 100
            }
          ],
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: false},
            data: this.xdata.map(function (str) {
              return str.replace(' ', '\n');
            })
          },
          yAxis: {
            name: '速度(km/h)',
            type: 'value'
          },
          series: [ {
            name: '速度',
            type: 'line',
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            },
            data: this.ydata
          }]
        })
        this.chart.resize()
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $tableTitleHeight: 40px;
  .el-form-item {
    margin-bottom: 22px;
  }
  .el-select{
    width: 100%;
  }
  .table-title {
    background-color: rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
    .title-header {
      line-height: $tableTitleHeight;
      color: #606266;
      font-size: 14px;
      font-weight: bold;
      i {
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
</style>