Visualización de datos simple de Vue --- combinada con echarts para realizar histograma
Hola a todos, soy un code husky, un estudiante de ingeniería de redes en la Facultad de Software, porque soy un "perro" y puedo comer carne a miles de kilómetros. Quiero compartir lo que aprendí en la universidad y progresar con todos. Sin embargo, debido al nivel limitado, inevitablemente habrá algunos errores en el blog. Si hay alguna omisión, ¡házmelo saber! Por el momento, solo actualice en la plataforma csdn, la página de inicio del blog: https://blog.csdn.net/qq_42027681 .
未经本人允许，禁止转载
Primero construya el proyecto Vue. Los amigos que
no lo olvidarán se mudarán aquí para construir el proyecto Vue.
本次主要讲将数据展示成柱状图，不封装axios不封装echarts，直接引用，大佬勿喷
Descarga los paquetes axios y echarts
npm install axios --save
npm install echarts --save
descarga está completa
Nueva pagina
Los archivos About y Home se proporcionan para crear proyectos y no es necesario
configurar el enrutamiento
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;
Página de configuración
Crear un archivo de página devuelto
por el manual oficial dado que la entrada manual
se puede ver primero crear un div también puede hablar aquí, por supuesto, canvas div show
<template>
<div>
<div ref="echartestOne" style="width: 500px;height: 400px;"></div>
</div>
</template>
Histograma encontrado (de acuerdo con las preferencias) echarts instancias oficiales en
la base actual usando el histograma. Ejemplos de entrada
copie el ejemplo de código dado
js myChart declarado en una
instancia de echarts de destino de salida en la impresión para ser salida La
opción myCharts.setOption es Ejemplo
<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>
Luego de hacer esto, introducimos una imagen estática
, luego la transformaremos.
<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>
Nótese que hemos declarado dos variables xAx, yAy corresponden a los datos anteriores, el
efecto es el mismo,
transformar nuevamente
Solicitud de red
Únase a axios para enviar la solicitud.
Escribí un pequeño fondo para leer datos con spring boot. La
interfaz api local es http: // localhost: 8084 / test / getDatas.
Vamos a llamar.
Por supuesto, si no hay antecedentes, puede usar el archivo json en su lugar. El
método es el siguiente
Cree un nuevo archivo json y escriba en el archivo
{
"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
}]
}
En el navegador, como sigue
axios.get ()
En el archivo de código fuente de axios,
podemos completar estos parámetros en la solicitud. No es necesario que los complete todos . Podemos
solicitar un archivo local.
axios.get('testJson/test.json');
El navegador comprueba la red de elementos y
puede ver la
transformación de la función setTest
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 se pasan en forma de parámetros de paso.
A continuación, extrae los datos que necesitamos
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);
})
});
}
En la consola, ya podemos ver que hay solicitudes. Por supuesto, podemos imprimir xAx, yAy y también podemos ver que hay datos.
Transformar de nuevo
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)
});
},
Después de cargar los datos, produciremos el
código completo del histograma.
<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>
Entonces, tienes una página que simplemente lee datos de la base de datos y crea un gráfico de barras.
Puedes agregar un botón para actualizar los datos.
Aquí es para solicitar mi interfaz de back-end para obtener datos.
<button @click="getDataAndsetTest">刷新</button>
Actualización programada
También puede agregar un temporizador
Lo ejecutamos cada segundo con regularidad
mounted() {
this.timer = setInterval(this.getDataAndsetTest, 1000);
},
beforeDestroy() {
clearInterval(this.timer);
},
Por supuesto, recuerda destruir el temporizador. El
efecto es el siguiente. En
este artículo, los amigos interesados pueden probarlo. Hablaremos sobre el uso de otros gráficos más adelante.
Se lanzará más tarde
Front-end: js entrada vue entrada vue applet de desarrollo, etc.
Volver final: java entrada entrada springboot, etc.
Servidor: instrucciones simples servidores de entrada mysql servidor de la nube para ejecutar el proyecto
de pitón: recomendado no se caliente el fuego, asegúrese de ver
el uso de algunos plug-ins, etc.
El camino de la universidad también está en uno mismo, estudiar mucho, juventud
con pasión. Si te interesa la programación, puedes unirte a nuestro grupo qq para comunicarnos juntos: 974178910
Si tiene alguna pregunta, puede dejar un mensaje a continuación, le responderé si lo ve