echarts柱状图动态与静态

华为云博客 技术博客 16433 63

首先搭建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对应之前的数据
效果一样
图片.png

再次改造

网络请求

加入axios发送请求
我用spring boot写了一个小后台 读取数据
图片.png

在这里插入图片描述
本地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
	}]
}

在浏览器中如下
图片.png

axios.get()
在axios的源码文件里面
图片.png

图片.png

我们可以向请求里面填入这些参数 不用全填 根据需求即可
我们请求本地文件

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

浏览器 检查元素 网络
可以看到
图片.png

改造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);
		 },

当然记得销毁定时器
效果如下
在这里插入图片描述





（完）