Recently, when I was working on a front-end separation project, in order to test the effect of obtaining data in the back-end part I wrote, I also learned some knowledge of vue and also took a lot of tricks in obtaining json information.
Here are some of the json information I returned:
{
"house_basic": [
{
"HOUSE_ID": "00001",
"HOUSE_NAME": "Yingcui Huating 122A apartment type",
"HOUSE_AREA": "122",
"HOUSE_STATE": 0,
"HOUSE_SPECIAL": "Good lighting, transparent north and south"
},
{
"HOUSE_ID": "00002",
"HOUSE_NAME": "Beihai Central Middle House",
"HOUSE_AREA": "92",
"HOUSE_STATE": 0,
"HOUSE_SPECIAL": "Good lighting, the living room facing south"
}
]
}The script part of vue:
<script>
// Basic script part frameworkimport axios from 'axios';
export default {
created() {
('http://<ip>:9999/vote/api')
.then((res) = > {
(res);
})
}
}
</script> Let's print it and what we get is:
{
{
"score": [
{
"HOUSE_ID": "00001",
"HOUSE_VOTE": 5,
"HOUSE_NAME": "Yingcui Huating 122A apartment type"
},
{
"HOUSE_ID": "00002",
"HOUSE_VOTE": 22,
"HOUSE_NAME": "Beihai Central Middle House"
}
]}，
// Skip the unimportant information}We print it again and we get the array we want:
[
{
"HOUSE_ID": "00001",
"HOUSE_VOTE": 5,
"HOUSE_NAME": "Yingcui Huating 122A apartment type"
},
{
"HOUSE_ID": "00002",
"HOUSE_VOTE": 22,
"HOUSE_NAME": "Beihai Central Middle House"
}
]
Output one of the subentries to see [0].HOUSE_ID: 00001.
After figuring out the returned data, you can write the script part to obtain and save the data.
<template>
<div id='main'></div>
</template>
<script>
//
import axios from 'axios';
export default {
name: 'barChart',
methods :{
initChart() {
var echarts = require('echarts');
let myChart = (('main'));
// Here you need an empty div tag with id main. Note that it must be an empty tag var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
}
},
xAxis: {
type: 'category',
name: 'id', //The name of the x-axis data: ,
},
yAxis: {
type: 'value',
name: 'vote',
// data: ,
// It doesn't seem that data is not put in much effect },
series: [{
data: ,
type: 'bar',
}]
}
(option); // Set icon style }
},
created() {
// Here is the voting interface as an example ('http://<ip>:9999/vote/api')
.then((res) => {
= [];
= [];
if ( == 200) {
let temp = ;
for (let i in temp) {
(temp[i].HOUSE_ID);
(temp[i].HOUSE_VOTE);
}
}
();
})
},
mounted() {
();
}
}
</script>This is the article about Vue+echart displaying the data obtained by the backend. For more related Vue echart displaying backend data, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!