<template>
  <!-- 单线图表 -->
  <label class="el-form-item-label">
    <div id="main" style="height: 300px; width: 100%" />
  </label>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    valueData: {
      type: Object
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.getMain()
    console.log(this.valueData, 'compoint')
  },

  methods: {
    getMain() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          data: this.valueData.time
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.valueData.value,
            type: 'line'
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// #main {
//   width: 100%;
//   height: 300px;
// }
</style>
