this is the error message
there should be a table
paste the source code
< template >
<div class="table" style="height: 100%;">
<div>
<el-card class="box-card">
<div slot="header">
</div>
<div class="text item" @click="tabId=0" :class="[tabId==0 ? "active" : ""]"></div>
<div class="text item" @click="tabId=1" :class="[tabId==1 ? "active" : ""]"></div>
</el-card>
<div class="tablebox" v-show="tabId==0">
<el-card class="table-card" style="height: 650px;overflow-y: auto">
<v-ClassifyTree @handleClick="handleNodeClick"></v-ClassifyTree>
</el-card>
<div class="handle-box" v-if="nowShow">
<div style="height: 80px;padding: 20px 10px;">
<p style="background-color:-sharp29a8cd;text-align: center;line-height: 50px">
</div>
</div>
<div class="handle-box" v-if="boxShow">
<div>
<el-card>
<div slot="header">
<el-row><span style="font-size:20px"></span><el-date-picker v-model="value4" type="month" placeholder="">
</el-date-picker></el-row>
</div>
<div id="charts" style="width: 100%;height: 250px;"></div>
</el-card>
</div>
</div>
</div>
<div class="tablebox" v-show="tabId==1">
<el-card class="table-card" style="height: 650px;overflow-y: auto">
<v-ClassifyTree @handleClick="handleNodeClick"></v-ClassifyTree>
</el-card>
<div class="handle-box">
<div v-if="nowShow" style="height: 80px;padding: 20px 10px;">
<p style="background-color:-sharp29a8cd;text-align: center;line-height: 50px">
</div>
<div v-if="boxShow">
<el-card>
<div slot="header">
<el-row><span style="font-size:20px"></span><el-date-picker v-model="value2" type="month" placeholder="">
</el-date-picker></el-row>
</div>
<div id="charts2" style="width: 100%;height: 250px;"></div>
</el-card>
</div>
</div>
</div>
</div>
</div>
< / template >
< script >
import vClassifyTree from "../common/ClassifyTree.vue";
let echarts = require("echarts/lib/echarts");
require("echarts/map/js/china");
require("echarts/lib/chart/pie");
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
export default {
data() {
return {
tabId:0,
value3:"",
value4:"",
value2:"",
value1:"",
boxShow:false,
nowShow:true,
node:"",
show:"",
carArchives:[],
}
},
components:{
vClassifyTree
},
mounted() {
this.drawLine();
this.drawLine2();
},
methods: {
drawLine(){
let myChart = echarts.init(document.getElementById("charts"));
var option = {
color: ["-sharp3398DB"],
tooltip : {
trigger: "axis",
axisPointer : { //
type : "shadow" // :"line" | "shadow"
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis : [
{
type : "category",
name:"",
data : ["1", "2", "3", "4", "5", "6", "7","8", "9", "10", "11", "12", "13", "14"],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : "value",
name:""
}
],
series : [
{
name:"",
type:"bar",
barWidth: "60%",
data:[10, 52, 200, 334, 390, 330, 220,10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.setOption(option);
},
drawLine2(){
let myChart = echarts.init(document.getElementById("charts2"));
var option = {
title : {
text: "",
x:"center"
},
tooltip : {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [
{
name: "",
type: "pie",
radius : "55%",
center: ["50%", "60%"],
data:[
{value:335, name:""},
{value:310, name:""},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
myChart.setOption(option);
myChart.resize();
},
},
//
handleNodeClick(childs) {
this.nowShow=false;
this.boxShow=true;
this.node=childs;
var this_ = this;
if(this.node.leaf) {
this_.show = true;
this.$axios.post("api/achives/achivesInfo", {
"LicencePlate": this.node.name
}).then((res) => {
this.carArchives.push(res.data.achivesInfo);
console.log(this.carArchives);
});
} else {
console.log("");
}
}
}
}
< / script >
has been working on it all day