deviceManager/src/views/components/fireInternetInfo/index4.vue

<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,//设置主标题字体颜色
          },
        },
        tooltip: {
          trigger: "axis",
          confine: true,
          textStyle: {
            fontSize: 12
          }
        },
        color: ["#FF0087" , "#80FFA5" ],
        xAxis: {
            show:true,//false
            boundaryGap:false,// true | ['30%', '20%']，x轴两边是否留白,true留白，false不留白
            axisLabel:{//x坐标轴刻度标签
                show:true,
                color:'#ccc',//'#ccc'，设置标签颜色
                // rotate: -45,
            },
            axisLine:{//x坐标轴轴线
                show:true,
                lineStyle:{//x坐标轴轴线样式
                    color:'#ccc',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
                }
            },
            data:data[3]
        },
        yAxis: [{
            // min:0,  //取0为最小刻度
            // max: 100,
            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' , //坐标值得具体的颜色
                }
            },

        }, {
            // min:0,  //取0为最小刻度
            // max: 5,
            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, //这里是为了突出显示加上的
              }
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: 'rgb(128, 255, 165)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(1, 191, 236)'
                  }
              ])
            },
            showSymbol: false,
            emphasis: {
              focus: 'series'
            },
            data: data[1],
            yAxisIndex: 0,  // 通过这个判断左右
        }, {
          name: "剩余电量",
          type: 'line',
          stack: 'Total',
          smooth: true,
          axisLine: {
            lineStyle: {
                color: '#ccc',
                width: 0, //这里是为了突出显示加上的
            }
          },
          areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                  {
                      offset: 0,
                      color: 'rgb(255, 0, 135)'
                    },
                    {
                      offset: 1,
                      color: 'rgb(135, 0, 157)'
                    }
                ])
              },
          showSymbol: false,
          emphasis: {
            focus: 'series'
          },
          data: data[0],
          yAxisIndex: 1,

        }]
      };

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

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