Vue+echarts绘制折线图

效果图：

<template>
  <div class="mod-demo-echarts">
    <div v-if="date.length>0" id="chartLineBox" class="chart-box" style="width: 90%;height: 70vh;"></div>
  </div>
</template>



<script>
import echarts from "echarts";

export default {
  props:{
    driverNo:{
      type:String
    },
    time:{
      type:String
    }
  },
  data() {
    return {
      //请求后端
      date: [],
      zl: [],
      qx: [],
      tl:[]
    };
  },
  mounted() {
    this.getLine()
    //这是为了解决请求异步问题
    setTimeout(() => {
      this.initChartPie();
    }, 1000);



  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    // if (this.chartPie) {
    //   this.chartPie.resize();
    // }
  },
  methods: {
    getLine() {
      this.$http({
        url: this.$http.adornUrl(``),
        method: "get",
        params: this.$http.adornParams({
          time:this.time,
          driverNo:this.driverNo
        }),
      }).then(({ data }) => {
        console.log(data.list);
        for(let i=0;i<data.list.length;i++){
          this.date.push(data.list[i].swTimeDate)
          this.zl.push(data.list[i].zlValue)
          this.qx.push(data.list[i].qxValue)
          this.tl.push(data.list[i].tlValue)
        }
      });
    },
    initChartPie() {
      this.chartLine = echarts.init(document.getElementById('chartLineBox'));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {              //设置tip提示
          trigger: 'axis'
        },
        legend: {               //设置区分（哪条线属于什么）
          data:['智力值','情绪值','体力值']
        },
        color: ['#8AE09F', '#FA6F53', '#4c82ff'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {                //设置x轴
          type: 'category',
          boundaryGap: false,     //坐标轴两边不留白
          data: this.date,
          name: '',           //X轴 name
          nameTextStyle: {        //坐标轴名称的文字样式
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {             //坐标轴轴线相关设置。
            lineStyle: {
              color: '#FA6F53',
            }
          }
        },
        yAxis: {
          name: '',
          nameTextStyle: {
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#FA6F53',
            }
          },
          type: 'value'
        },
        series: [
          {
            name: '智力值',
            data:  this.zl,
            type: 'line',               // 类型为折线图
            lineStyle: {                // 线条样式 => 必须使用normal属性
              normal: {
                color: '#8AE09F',
              }
            },
          },
          {
            name: '情绪值',
            data: this.qx,
            type: 'line',
            lineStyle: {
              normal: {
                color: '#FA6F53',
              }
            },
          },
          {
            name: '体力值',
            data: this.tl,
            type: 'line',
            lineStyle: {
              normal: {
                color: '#4c82ff',
              }
            },
          }
        ]
      };
      this.chartLine.setOption(option);
    },
  },
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 200px;
    min-width: 200px;
  }
}
</style>