echarts 折线图与后台进行的交互

最新推荐文章于 2024-06-28 18:13:57 发布

会篮球的程序猿

最新推荐文章于 2024-06-28 18:13:57 发布

阅读量1.1w

点赞数 1

分类专栏：折线图前端后台文章标签： js jquery thinkphp

本文链接：https://blog.csdn.net/weixin_44944193/article/details/103435334

版权

后台同时被 3 个专栏收录

102 篇文章 1 订阅

订阅专栏

前端

37 篇文章 1 订阅

订阅专栏

折线图

1 篇文章 0 订阅

订阅专栏

效果图；//这里06代表日期

代码；（这里我请求的是我的后台，记得换一下）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折线图（服务器）</title>
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<!-- 引入 echarts.js -->
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
		<link rel="icon" href="img/favicon.ico" sizes="32x32">
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 100%;height:550px;"></div>
	</body>
</html>

<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '堆叠区域图'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{}],
		yAxis: [{
			type: 'value'
		}],
		series: [{
			type: 'line',
		}, ]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	var names = []; //消费量是多少
	var nums = []; //几号日子
	var userid = localStorage.getItem('userid');
	//用户id
	(function() {
		$.ajax({
			type: "post",
			url: "http://tp5-shopxo.likeball.top/index.php?s=/index/earnings/index",
			data: {
				userid: userid
			},
			dataType: 'json',
			success: function(data) {
				//				console.log(data);
				for (var i = 0; i < data[0].length; i++) {
					names.push(data[0][i]);
				}
				for (var y = 0; y < data[1].length; y++) {
					nums.push(data[1][y]);
				}
				nums.sort(); //进行排序有小到大
				myChart.hideLoading(); //隐藏加载动画
				myChart.setOption({ //加载数据图表
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: nums
					},
					series: [{
						type: 'line',
						areaStyle: {},
						// 根据名字对应到相应的系列
						name: '消费金额',
						data: names
					}]
				});
			},
			error: function(error) {
				console.log('error');
			}
		});
	})();
</script>

死数据简单例子

效果：鼠标放上去没提示

代码；

<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
	</head>
	<body style="height: 100%; margin: 0">
		<div id="container" style="height: 100%"></div>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [820, 932, 901, 934, 1290, 1330, 1320],
					type: 'line'
				}]
			};;
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		</script>
	</body>
</html>

会篮球的程序猿

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
echarts 折线图与后台进行的交互

下载js 文件引入我下面这些不用引入，只要去官网上面下载一个js文件就可以了，然后引入一下，我下面这些是为了更多数据的显示所以引入的多个文件一般就是<script src="js/echarts.min.js"></script> 这一个就可以；具体代码在 “最” 下方引入一个文件效果图引如多个效果图大...
复制链接

扫一扫

专栏目录