<template>
  <el-row>
    <div id="index4" ref="echartD" style="width:110%;margin-left:-5%;height:110%;"></div>
  </el-row>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: ["resData"],
  data() {
    return {};
  },
  watch: {
    resData() {
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let myChart = echarts.init(document.getElementById("index4"));
      let data = this.resData;
      let option = {
        legend: {
          itemGap: 20, // 图例每项之间的间隔。
          icon: "stack",
          right: 40,
          top:6,
          padding: 0, // 图例内边距
          textStyle: {
            color: "#000",
            align: "center"
          }
        },
        title: {
          x:'center',
          text: data[2].name,
          textStyle:{ //设置主标题风格
            color:data[2].color,//设置主标题字体颜色
          },
        },
        color: ["#FF0087" , "#80FFA5" ],
        xAxis: {
            type: 'time',
            splitLine:{
              show:false
            },
            axisLine: {
              // show:false,
              lineStyle: {
                  type:  'solid' ,
                  color:  '#ccc' , //左边线的颜色
                  width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
                textStyle: {
                    color:  '#fff' , //坐标值得具体的颜色
                }
            }
        },
        yAxis: [{
            name:"剩\n余\n电\n量",
            type: 'value',
            splitLine:{
              show:false
            },
            nameLocation: 'left',
            nameTextStyle: {
              fontSize: 14,
              padding: [0, 80, 0, 0]
            },
            axisLine: {
                lineStyle: {
                    type:  'solid' ,
                    color:  '#FF0087' , //左边线的颜色
                    width: '1' //坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color:  '#FF0087' , //坐标值得具体的颜色
                }
            }
        }, {
            name:"无\n线\n信\n号",
            type: 'value',
            splitLine:{
              show:false
            },
            nameLocation: 'left',
            nameTextStyle: {
              fontSize: 14,
              padding: [0, 0, 0, 80]
            },
            axisLine: {
                lineStyle: {
                    type:  'solid' ,
                    color:  '#80FFA5' , //左边线的颜色
                    width: '1' //坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color:  '#80FFA5' , //坐标值得具体的颜色
                }
            }
        }],
        series: [{
            name: "剩余电量",
            type: 'line',
            stack: 'Total',
            smooth: true,
            axisLine: {
              lineStyle: {
                color: 'red',
                width: 0, //这里是为了突出显示加上的  
              }
            },
            showSymbol: false,
            emphasis: {
              focus: 'series'
            },
            data: data[0],
            yAxisIndex: 0,  // 通过这个判断左右
        }, {
          name: "信号",
          type: 'line',
          stack: 'Total',
          smooth: true,
          axisLine: {
            lineStyle: {
                color: '#ccc',
                width: 0, //这里是为了突出显示加上的  
            }
          },
          showSymbol: false,
          emphasis: {
            focus: 'series'
          },
          data: data[1],
          yAxisIndex: 1,
            
        }]
      };
      


    

      




        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    }
  }
};
</script>

<style lang="scss" scoped></style>
