<template>
  <e-charts ref="chart1" :options="orgOptions" :auto-resize='true' ></e-charts>
</template>

<script>
import ECharts  from "vue-echarts"
import "echarts/lib/chart/line";
import "echarts/lib/component/legend";
import "echarts/lib/component/tooltip";
export default {
  name: "VeLine",
  props:["option","data","fields","ymax","ymin","tooltip","grid"],
  components:{ECharts},
  data(){
    return {

    }
  },
  computed:{
    orgOptions(){

      if(!this.data || this.data.length == 0){
        return {}
      }else {
        let xlist = [];
        let series = [];
        this.fields.forEach(item =>{
          series.push({
            data: [],
            name:item,
            type: 'line'})
        })
        this.data.forEach(item => {
          xlist.push(item.type);
          this.fields.forEach((item2,index2) =>{
            series[index2].data.push(item[item2]);
          })
        })

        let optionThe = {
          xAxis: {
            type: 'category',
            data: xlist
          },
          color:["#40a9ff"],
          legend:{
            data:this.fields
          },
          tooltip: this.tooltip?this.tooltip:null,
          yAxis: {
            type: 'value',
            max:(this.ymax?this.ymax:null),
            min:(this.ymin?this.ymin:null),
            splitLine:false
          },
          series: series
        }
        if(this.grid){
          optionThe["grid"] = this.grid;
        }
        return optionThe;
      }
    }

  }
}
</script>

<style scoped>

</style>
