将json值传递给echarts.js图像表（不用vue）

最新推荐文章于 2024-07-25 20:29:35 发布

仲夏月二十八

最新推荐文章于 2024-07-25 20:29:35 发布

阅读量848

点赞数

分类专栏：笔记文章标签： node.js

本文链接：https://blog.csdn.net/m0_49652369/article/details/124635191

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在很多项目当中，我们需要借助图像或者表格来存放或者展示数据。这个时候echarts就突显出了其重要地位。

示例

后台数据
在这里插入图片描述
需求： 需要将后台的json数据传递给前端，并且通过echarts呈现为折线图

前端：通过axios来获取其josn数据，将值传递给echarts，做图像展示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>w3cschool (www.w3cschool.cn) </title>
  <!-- 引入 echarts.js -->
  <script src="js/echarts.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
	<script src="vue.js"></script>
	<script src="js/axios.min.js"></script> //导入axios的js文件
	<script src="js/jquery.min.js"></script>
</head>
<body>
			<div id="main" style="400px;height:400px;"></div>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<script>
		var ur1= "http://localhost:8082/";
		var myChart = echarts.init(document.getElementById('main'));
		var option = {
			xAxis: {
				type: 'category',
				data: ['en', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
			},
			yAxis: {
				type: 'value',
			},
			series: [
				{
					data: [820, 932, 901, 934, 1290, 1330, 1320],
					type: 'line',
				},
			],
		};
		/* 		axios.get(url).then((res)=>{
					console.log(res.data);
				});
				 */
		myChart.setOption(option);
		var a =[];
		var b = [];
		var li = ur1+"/itcast/userproportion"; //请求路径
		axios.get(li).then((res)=>{ //通过axios来获取后端数据
			console.log(res); //打印数据
			for(var i=1;i<8;i++){ //for循环来或者其字段
				a.push(res.data.data[i].address); //获取地址
				b.push(res.data.data[i].population); //获取人数
			}
			console.log(b);
			console.log(a);
			myChart.setOption({
				xAxis:{
					data: a //将原先值给覆盖，用地址为x轴。
				},
				series: [
					{
						data: b
					}
				]
			})
			console.log(a);
		});
	</script>
</body>
</html>

效果展示
在这里插入图片描述

仲夏月二十八

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
将json值传递给echarts.js图像表（不用vue）

在很多项目当中，我们需要借助图像或者表格来存放或者展示数据。这个时候echarts就突显出了其重要地位。示例后台数据需求：需要将<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>w3cschool (www.w3cschool.cn) </title>  <script src=
复制链接

扫一扫

专栏目录