vue简单数据可视化---结合echarts实现柱状图
大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：https://blog.csdn.net/qq_42027681。
未经本人允许，禁止转载
首先搭建vue项目
不会或者忘记的小伙伴移步这里 Vue项目搭建
本次主要讲将数据展示成柱状图，不封装axios不封装echarts，直接引用，大佬勿喷
下载axios和echarts包
npm install axios --save
npm install echarts --save
下载完成即可
新建页面
About 和Home文件为创建项目自带不用管
配置路由
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;
配置页面
返回创建的页面文件
通过官方给出的手册 手册入口
可以看出首先要创建一个div当然canvas也可以 这里讲div展示
<template>
<div>
<div ref="echartestOne" style="width: 500px;height: 400px;"></div>
</div>
</template>
在echarts官方实例中找到 柱状图的(可以根据喜好选择)
本次使用基础柱状图 实例入口
复制实例给出的代码
js中 myChart声明一个echarts的输出对象
myCharts.setOption中将实例打印到输出对象
option为实例
<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>
做好这些我们就引入了一个静态的图
接下来我们改造下它
<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>
注意我们声明了两个变量 xAx,yAy对应之前的数据
效果一样
再次改造
网络请求
加入axios发送请求
我用spring boot写了一个小后台 读取数据
本地api接口为http://localhost:8084/test/getDatas
我们来调用
当然没有后台的可以用json文件代替
方法如下
新建一个json文件 在文件中写入
{
"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
}]
}
在浏览器中如下
axios.get()
在axios的源码文件里面
我们可以向请求里面填入这些参数 不用全填 根据需求即可
我们请求本地文件
axios.get('testJson/test.json');
浏览器 检查元素 网络
可以看到
改造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为传参形式传入
接下来提取我们需要的数据
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);
})
});
}
在控制台我们已经可以看到有请求 当然我们打印xAx,yAy也可以看出来有数据
再次改造
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)
});
},
数据加载完成我们就生产柱状图
完整代码
<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>
这样你就有了一个简单的从数据库读取数据且做成柱状图的页面了
可以加个按钮刷新数据
此处为请求我的后端接口获取数据
<button @click="getDataAndsetTest">刷新</button>
定时刷新
也可以加个定时器
我们定时每秒执行一次
mounted() {
this.timer = setInterval(this.getDataAndsetTest, 1000);
},
beforeDestroy() {
clearInterval(this.timer);
},
当然记得销毁定时器
效果如下
本文讲到这里 有兴趣的小伙伴可以尝试下哦 后面我们会讲别的图形的使用
后续会推出
前端：js入门 vue入门 vue开发小程序 等
后端： java入门 springboot入门等
服务器：mysql入门 服务器简单指令 云服务器运行项目
python：推荐不温卜火 一定要看哦
一些插件的使用等
大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910
有问题可以下方留言，看到了会回复哦