cannot be rendered using echarts in vue
<template>
<div id="app" class="login_area">
<div id="myChart" class="echarts"></div>
</div>
</template>
<script>
export default {
name: "second",
data () {
return {
dataList:[],
time:[],
datas:[]
}
},
created: function () {
this.$axios.get("xxxx").then(res => {
this.dataList=res.data.result.group;
this.dataList.sort((a,b)=>{
return b.index - a.index
});
for(var value of this.dataList){
this.time.push(value.recharge_day)
this.datas.push(Number(value.mount))
}
});
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
let that=this;
console.log(that.time)
console.log(that.datas)
let myChart = this.$echarts.init(document.getElementById("myChart"));
myChart.setOption({
color: ["-sharp90bcf3"],
tooltip: {
trigger: "axis"
},
legend: {
data: ["/"],
left: 20,
top: 20,
textStyle: {
color: ["-sharp90bcf3"]
}
},
toolbox: {
show: false,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ["line", "bar", "stack", "tiled"]},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: "category",
name: "",
boundaryGap: false,
data: that.time,
axisLine: {
lineStyle: {
color: ["-sharp90bcf3"]
}
},
axisLabel: {
textStyle: {
color: ["-sharp000"]
}
}
}
],
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: ["-sharp90bcf3"]
}
},
axisLabel: {
textStyle: {
color: ["-sharp000"]
}
}
}
],
series: [
{
name: "/",
type: "line",
smooth: true,//
stack: "",
data: that.datas
}
]
});
}
}
}
</script>
<style scoped>
.echarts{
width: 700px;
height: 300px;
}
</style>
print data:
:
ask the boss for advice on what went wrong?