vue简单数据可视化---结合echarts实现柱状图

r囧r小猫 2022-11-20 03:54 205阅读 0赞

### vue简单数据可视化---结合echarts实现柱状图 ###

*  下载axios和echarts包
 *  新建页面
 *  配置页面
 *  网络请求
 *  定时刷新

>   大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：[https://blog.csdn.net/qq\_42027681][https_blog.csdn.net_qq_42027681]。

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

首先搭建vue项目  
不会或者忘记的小伙伴移步这里 [Vue项目搭建][Vue]

> `本次主要讲将数据展示成柱状图，不封装axios不封装echarts，直接引用，大佬勿喷`

# 下载axios和echarts包 #

npm install axios --save  
npm install echarts --save  
下载完成即可

# 新建页面 #

![在这里插入图片描述][20201113202529762.png_pic_center]  
About 和Home文件为创建项目自带不用管  
配置路由  
![在这里插入图片描述][20201113202621338.png_pic_center]

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;

# 配置页面 #

返回创建的页面文件  
通过官方给出的手册 [手册入口][Link 1]  
可以看出首先要创建一个div当然canvas也可以 这里讲div展示

在echarts官方实例中找到 柱状图的(可以根据喜好选择)  
本次使用基础柱状图 [实例入口][Link 2]  
复制实例给出的代码  
js中 myChart声明一个echarts的输出对象  
myCharts.setOption中将实例打印到输出对象  
option为实例

做好这些我们就引入了一个静态的图  
![在这里插入图片描述][2020111321183180.gif_pic_center]  
接下来我们改造下它

注意我们声明了两个变量 xAx,yAy对应之前的数据  
效果一样  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]  
再次改造

# 网络请求 #

加入axios发送请求  
我用spring boot写了一个小后台 读取数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][2020111321241862.png_pic_center]  
本地api接口为http://localhost:8084/test/getDatas  
我们来调用  
当然没有后台的可以用json文件代替  
方法如下  
![在这里插入图片描述][20201113214225647.png_pic_center]

新建一个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
    	}]
    }

在浏览器中如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 2]  
axios.get()  
在axios的源码文件里面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 4]我们可以向请求里面填入这些参数 不用全填 根据需求即可  
我们请求本地文件

axios.get('testJson/test.json');

浏览器 检查元素 网络  
可以看到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 5]改造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也可以看出来有数据  
再次改造

数据加载完成我们就生产柱状图  
完整代码

<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>

这样你就有了一个简单的从数据库读取数据且做成柱状图的页面了  
可以加个按钮刷新数据  
此处为请求我的后端接口获取数据

![在这里插入图片描述][20201113222313200.gif_pic_center]

# 定时刷新 #

也可以加个定时器

我们定时每秒执行一次

mounted() {
    			 this.timer = setInterval(this.getDataAndsetTest, 1000);
    		},
    		beforeDestroy() {
    		   clearInterval(this.timer);
    		 },

当然记得销毁定时器  
效果如下  
![在这里插入图片描述][20201113223013430.gif_pic_center]  
本文讲到这里 有兴趣的小伙伴可以尝试下哦 后面我们会讲别的图形的使用

后续会推出

前端：js入门 vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 3] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 6]

有问题可以下方留言，看到了会回复哦

[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: /images/20221120/82d4b47bd89d43d896cfd8543c3d449b.png
[Vue]: https://blog.csdn.net/qq_42027681/article/details/109497258
[20201113202529762.png_pic_center]: /images/20221120/b7a98b67f8f74dae8f474158b5e7bf58.png
[20201113202621338.png_pic_center]: /images/20221120/fde2b9921ec04923bb88c22ea6bcd5dd.png
[Link 1]: https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
[Link 2]: https://echarts.apache.org/examples/zh/editor.html?c=bar-background
[2020111321183180.gif_pic_center]: /images/20221120/9ae49e2a8e374a2baec81a863434b5ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/50530f463ee34ffd928234cb78aacb28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/ae073151da0c4addb1874d505e77e525.png
[2020111321241862.png_pic_center]: /images/20221120/45133faa4f4142bfa3d4dfa6804b4276.png
[20201113214225647.png_pic_center]: /images/20221120/8bc44f224e3646eaab74cbd078fcf1a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/424bd29371bf434093996401dfbc3467.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/709b37a27ff44873aa95be53a7073e39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/75a4d18e9d884490b42d43a42d3b57ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/378d22063e044749839a87ba63a57c9b.png
[20201113222313200.gif_pic_center]: /images/20221120/daf43e4c7a7a4c2db4df554e969db48b.png
[20201113223013430.gif_pic_center]: /images/20221120/3089cd7b8ab14d1193a7f26f0beb0979.png
[Link 3]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/bc4a4698ae30482cb6a917121f3e3323.png