我再前端页面做了个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);
echarts可以先init,在ajax获取到数据后再setOption