Vue simple data visualization---combined with echarts to realize histogram
Hello everyone, I am a code husky, a student of network engineering in the Software College, because I am a "dog", and I can eat meat for thousands of miles. I want to share what I learned during university and make progress with everyone. However, due to the limited level, there will inevitably be some mistakes in the blog. If there are any omissions, please let me know! For the time being, only update on the csdn platform, the blog homepage: https://blog.csdn.net/qq_42027681 .
未经本人允许，禁止转载
First build the Vue project. Friends who
will not or forget move here to build the Vue project.
本次主要讲将数据展示成柱状图，不封装axios不封装echarts，直接引用，大佬勿喷
Download the axios and echarts packages
npm install axios --save
npm install echarts --save
download is complete
New page
About and Home files are provided for creating projects and do not need to
configure routing
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Echartest from "../views/Echartest.vue"
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
},
{
path: "/echart",
name: "Echarts",
component: Echartest
}
];
const router = new VueRouter({
routes
});
export default router;
Configuration page
Create a page file returned
by the official handbook given manual entry
can be seen first create a div can also speak here of course canvas div show
<template>
<div>
<div ref="echartestOne" style="width: 500px;height: 400px;"></div>
</div>
</template>
Found histogram (according to preferences) echarts official instances in
the current basis using the histogram Examples inlet
copy the code example given
js myChart declared in a output target echarts
instance in the print to be output myCharts.setOption
option is Instance
<script>
import echarts from 'echarts'
export default{
mounted() {
this.setTest();
},
methods:{
setTest(){
let myChart = echarts.init(this.$refs.echartestOne);
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
myChart.setOption(option);
}
}
}
</script>
After doing this, we introduced a static picture.
Next, we will transform it.
<script>
import echarts from 'echarts'
export default{
mounted() {
this.setTest();
},
methods:{
setTest(){
let xAx:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let yAy:[120, 200, 150, 80, 70, 110, 130];
let myChart = echarts.init(this.$refs.echartestOne);
let option = {
xAxis: {
type: 'category',
data: this.xAx
},
yAxis: {
type: 'value'
},
series: [{
data: this.yAy,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
myChart.setOption(option);
}
}
}
</script>
Note that we have declared two variables xAx, yAy correspond to the previous data, the
effect is the same,
transform again
Network request
Join axios to send the request.
I wrote a small background to read data with spring boot. The
local api interface is http://localhost:8084/test/getDatas.
Let’s call.
Of course, if there is no background, you can use json file instead. The
method is as follows
Create a new json file and write in the file
{
"status": 200,
"msg": "哈喽帅哥",
"data": [{
"dataId": 0,
"dataX": "one",
"dataY": 100
}, {
"dataId": 1,
"dataX": "two",
"dataY": 200
}, {
"dataId": 2,
"dataX": "three",
"dataY": 150
}, {
"dataId": 3,
"dataX": "four",
"dataY": 300
}]
}
In the browser, as follows
axios.get()
In the source file of axios,
we can fill in these parameters in the request. You don’t need to fill in all of them . We can
request local files.
axios.get('testJson/test.json');
The browser checks the element network and
you can see the
transformation of the setTest function
setTest(xAx,yAy){
let myChart = echarts.init(this.$refs.echartestOne);
let option = {
xAxis: {
type: 'category',
data: xAx
},
yAxis: {
type: 'value'
},
series: [{
data: yAy,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
myChart.setOption(option);
}
xAx, yAy are passed in in the form of passing parameters.
Next, extract the data we need
getDataAndsetTest(){
let xAx=[];
let yAy=[];
axios.get('testJson/test.json').then(res=>{
let resp = res.data.data;
resp.forEach((item)=>{
xAx.push(item.dataX)
yAy.push(item.dataY);
})
});
}
In the console, we can already see that there are requests. Of course, we can print xAx, yAy and we can also see that there is data.
Transform again
getDataAndsetTest(){
let xAx=[];
let yAy=[];
axios.get('testJson/test.json').then(res=>{
let resp = res.data.data;
resp.forEach((item)=>{
xAx.push(item.dataX)
yAy.push(item.dataY);
})
this.setTest(xAx,yAy)
});
},
After the data is loaded, we will produce the histogram
complete code
<template>
<div>
<div ref="echartestOne" style="width: 500px;height: 400px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import axios from 'axios'
export default{
mounted() {
this.getDataAndsetTest();
},
methods:{
getDataAndsetTest(){
let xAx=[];
let yAy=[];
axios.get('testJson/test.json').then(res=>{
let resp = res.data.data;
resp.forEach((item)=>{
xAx.push(item.dataX)
yAy.push(item.dataY);
})
this.setTest(xAx,yAy)
});
},
setTest(xAx,yAy){
let myChart = echarts.init(this.$refs.echartestOne);
let option = {
xAxis: {
type: 'category',
data: xAx
},
yAxis: {
type: 'value'
},
series: [{
data: yAy,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
myChart.setOption(option);
}
}
}
</script>
<style>
</style>
So you have a page that simply reads data from the database and makes a bar graph.
You can add a button to refresh the data.
Here is to request my back-end interface to get data.
<button @click="getDataAndsetTest">刷新</button>
Timed refresh
You can also add a timer
We execute it every second regularly
mounted() {
this.timer = setInterval(this.getDataAndsetTest, 1000);
},
beforeDestroy() {
clearInterval(this.timer);
},
Of course, remember to destroy the timer. The
effect is as follows. In
this article, interested friends can try it. We will talk about the use of other graphics later.
Will be launched later
Front end: js entry vue entry vue development applet, etc.
Back end: java entry springboot entry, etc.
Server: mysql entry server simple instructions cloud server to run the project
python: recommended not to warm up the fire, be sure to see
the use of some plug-ins, etc.
The way of university is also in oneself, study hard, youth
with passion. If you are interested in programming, you can join our qq group to communicate together: 974178910
If you have any questions, you can leave a message below, I will reply if you see it