echarts在vue中使用，并从后台获取数据（后台数组对象的相同属性合并为数组）

后台数据

[
  {  
    'time': '01:00',
    'power': '0'                        
  },
  {  
    'time': '02:00',
    'power': '0'                        
  },
  {  
    'time': '03:00',
    'power': '0'                        
  },
  {  
    'time': '04:00',
    'power': '0'                        
  },
  {  
    'time': '05:00',
    'power': '0'                        
  },
  {  
    'time': '06:00',
    'power': '4'                        
  }
]

目标数据

{
  'time': ['01:00','02:00','03:00','04:00','05:00','06:00'],
  'power': [2,7,8,3,13,18]
}

实现代码

<template>
    <div id="main"></div>
</template>

<script>
import { getList } from '@/api/product'
var echarts = require('echarts');

export default {
  data() {
    return {
      timeData: [],
      xData: []
    }
  },
  mounted() {
     getList().then(res => {
        var itemsData = res.data.items
        var timeStr = itemsData.map(function(obj,index){
          return obj.time;
        }).join(",");
        this.timeData = timeStr.split(",")   //['01:00','02:00','03:00','04:00','05:00','06:00']
        var powerStr = itemsData.map(function(obj,index){
          return obj.power;
        }).join(",");
        this.xData = powerStr.split(",").map(Number)   //[2,7,8,3,13,18]
        let seriesList = [{
          name: '销量',
          type: 'line',
          data: [],
          smooth: true
        }]
        seriesList[0].data = this.xData
        this.drawLine(seriesList,this.timeData);
     })
  }
  methods: {
    drawLine(seriesList,xData){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 绘制图表
      myChart.setOption({
          title: {
            left: 'center',
            text: '日销量曲线'
          },
          backgroundColor: '#F5F7FA',
          tooltip: {},
          color: '#1488F5',
          legend:{
            data:['销量'],
            bottom: 10
          },
          xAxis: {
              data: xData
          },
          yAxis: {},
          series: seriesList
      })
    }
  }
}
</script>

<style scoped>
  #main{
    width: 80%;
    height: 400px;
    /* border: 1px solid red; */
    margin: 0 auto;
    margin-top: 40px;
  }
</style>