echarts图怎么用从后台获取的数据

Question

我再前端页面做了个echarts图，都写在了mounted里

页面看起来是这样的

当然数据都是我后台给的默认值。

我现在想把我从后台获取到的data.data.list里面的h_00到h_24的数据全部取出来放在echarts图里的data里。

所以要怎么取出来放进去。

取出来的是

mounted() {

this.chartLine = echarts.init(this.$refs.input1);
// 指定图表的配置项和数据
var option = {
  tooltip: {
    //设置tip提示
    trigger: "axis"
  },
  legend: {
    //设置区分（哪条线属于什么）
    data: ["预报名", "浏览量"]
  },
  //设置区分（每条线是什么颜色，和 legend 一一对应）
  color: ["#3f9abf", "#74c9b4"],
  xAxis: {
    //设置x轴
    type: "category",
    //坐标轴两边不留白
    boundaryGap: false,
    data: [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12",
      "13",
      "14",
      "15",
      "16",
      "17",
      "18",
      "19",
      "20",
      "21",
      "22",
      "23",
      "24"
    ],
    //X轴 name
    name: "时间",
    nameTextStyle: {
      //坐标轴名称的文字样式
      color: "#74c9b4",
      fontSize: 16,
      padding: [0, 0, 0, 20]
    },
    axisLine: {
      //坐标轴轴线相关设置。
      lineStyle: {
        color: "#74c9b4"
      }
    }
  },
  yAxis: {
    //设置Y轴
    name: "人数   ",
    nameTextStyle: {
      //坐标轴名称的文字样式
      color: "#74c9b4",
      fontSize: 16,
      padding: [0, 0, 10, 0]
    },
    axisLine: {
      //坐标轴轴线相关设置
      lineStyle: {
        color: "#74c9b4"
      }
    },
    type: "value"
  },
  series: [
    {
      name: "预报名",
      data: [
        23,
        34,
        45,
        56,
        67,
        118,
        129,
        21,
        67,
        89,
        90,
        53,
        13,
        22,
        25,
        56,
        14,
        120,
        111,
        209,
        23,
        35,
        230,
        240
      ],
      // 类型为折线图
      type: "line",

      //填充底部颜色
      areaStyle: {
        normal: {}
      },

      lineStyle: {
        // 线条样式 => 必须使用normal属性
        normal: {
          color: "#3f9abf"
        }
      }
    },
    {
      name: "浏览量",
      data3: [
        23,
        34,
        45,
        56,
        67,
        118,
        129,
        21,
        67,
        89,
        90,
        53,
        13,
        22,
        25,
        56,
        14,
        120,
        111,
        209,
        23,
        35,
        230,
        240
      ],
      type: "line",
      //填充底部颜色
      areaStyle: {
        normal: {}
      },

      lineStyle: {
        normal: {
          color: "#74c9b4"
        }
      }
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
this.chartLine.setOption(option);

Answer 1

echarts可以先init，在ajax获取到数据后再setOption

Answer 2

冒昧的问下啊，整个问题看下来，题主想要的是不是就是把接口返回来的数据整理成两个数组分别放入this.option.xAxis.data和 this.option.yAxis.data 里？

是不是把返回结果list中的字段keyh_开头和对于的value分成两组数据吗？？

还是说是别的意思？

按照题主的意思，我模拟了一组数据，简单的处理了下。你可以看看是不是你要的。

 var obj = {
        h_00:'0',
        h_01:'1',
        h_02:'2',
        h_03:'3',
        h_04:'4',
        h_05:'0',
        h_06:'0',
        h_07:'0',
        h_08:'0',
        h_09:'0',
        h_010:'0',
        h_011:'0',
        h_012:'0',
        h_013:'0',
        h_014:'0',
        h_015:'0',
        h_016:'0',
        h_017:'0',
        h_018:'0',
        h_019:'0',
        h_020:'0',
        h_021:'0',
        h_022:'0',
        h_023:'0',
        h_024:'0',
    };
    var timeArr = [];//时间数组
    var peopleCount = [];//人数数组
    let prefix = 'h_';//key前缀，可以更改

    for(let key in obj){
        if(key.indexOf('h_')!==-1){
            timeArr.push(parseInt(key.split('_')[1]));
            peopleCount.push(parseInt(obj[key]));
        }
    }
    
    console.log(timeArr);
    console.log(peopleCount

//打印出来的结果，然后可以把值赋值给this.option.xAxis.data和this.option.yAxis.data
[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]

[0,1,2,3,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]