前端数据可视化插件echart.js的使用

最新推荐文章于 2024-04-18 09:36:30 发布
最新推荐文章于 2024-04-18 09:36:30 发布
阅读量601 收藏 4
点赞数
分类专栏： 4.技术细节 文章标签： js 数据可视化 jquery typescript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44071138/article/details/122184349
版权

在开发中，我们会遇到需要在前端显示图表的业务需求。在本文中将介绍如何使用echart插件绘制业务需求的图表，包括：“绘制饼状图”、“绘制折线图”、“绘制柱状图”。

1、绘制饼状图。

前端HTML代码：

<div class="report_pie">
					<div id="pie"></div>
				</div>

Js请求后端代码：

//销售大类数据绘图
	function salesPie (date1, date2, shopID) {
		var categoryParentNameArr = [];
		var message = new Array();
		$.ajax({
			url: retailTrade_url,
			type: mothod_post,
			async: true,
			dataType: "json",
			data: { "datetimeStart": date1, "datetimeEnd": date2, "shopID": shopID },
			success: function succFunction (data) {
				console.log(data);
				if (data.ERROR == "EC_NoError") {
					if (data.reportList.length > 0) {
						for (var i = 0; i < data.reportList.length; i++) {
							var totalAmountSummaryarr = {};
							categoryParentNameArr[i] = data.reportList[i].totalAmountSummary.toFixed(2) < 0 ? data.reportList[i].categoryParentName + "(退货)" : data.reportList[i].categoryParentName;;
							totalAmountSummaryarr["value"] = data.reportList[i].totalAmountSummary.toFixed(2) < 0 ? Math.abs(data.reportList[i].totalAmountSummary.toFixed(2)) : data.reportList[i].totalAmountSummary.toFixed(2);
							totalAmountSummaryarr["name"] = data.reportList[i].totalAmountSummary.toFixed(2) < 0 ? data.reportList[i].categoryParentName + "(退货)" : data.reportList[i].categoryParentName;
							message.push(totalAmountSummaryarr);
						}
						$(".noData").remove();
						//绘图
						pie(categoryParentNameArr, message);
					} else {
						$(".noData").remove();
						pie(categoryParentNameArr, message);
						$("#pie").append("<div class='noData'><i class='layui-icon layui-icon-loading' style='font-size: 60px; color: #1E9FFF;'></i> <br>暂时无销售数据</div>");
					}
				}
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				layer.msg("服务器错误");
			}
		})

	}

首先声明两个数组变量：

var categoryParentNameArr = [];
		var message = new Array();

然后请求服务器后端，返回数据，例如返回数据如下：

服务器后端返回数据

遍历后端返回的数据，将分类名称放到categoryParentNameArr数组。声明一个对象totalAmountSummaryarr，对象的value存储总额，对象的name存储分类名称。然后将对象totalAmountSummaryarr放到message数组中。

遍历完成后，调用pie函数，传入categoryParentNameArr和message数组作为参数：

pie(categoryParentNameArr, message);

	//饼图
	function pie (categoryParentNameArr, totalAmountSummaryarr) {
		var myChart = echarts.init($('#pie').get(0))
		// 指定图表的配置项和数据
		option = {
			title: {
				text: '销售汇总',
				x: 'left'
			},
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
				type: 'scroll',
				orient: 'vertical',
				right: 0,
				top: 50,
				bottom: 20,
				data: categoryParentNameArr,
				zlevel: 0,
			},
			series: [
				{
					name: '销售大类占比',
					type: 'pie',
					radius: '60%',
					center: ['40%', '60%'],
					data: totalAmountSummaryarr,
					zlevel: 1,
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					},
					label: {//将数量与百分比一起显示
						show: true
						// 	normal: {
						// 		formatter: '{b}:{c}: ({d}%)',
						// 		textStyle: {
						// 			fontWeight: 'normal',
						// 			fontSize: 15
						// 		}
						// 	}
					},
				}
			]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}

初始化echart和配置图表option：

var myChart = echarts.init($('#pie').get(0))
		// 指定图表的配置项和数据
		option = 
		……

设置标题title、提示框tooltip、自定义文本说明legend、数据绑定series，显示图表：

// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);

效果图如下：

开源ERP前端销售占比效果图

2、绘制折线图。

前端HTML代码：

<!--月销售走势-->
		<br />
		<div class="salesTrends">
			<h5>2019-02-18日近七天销售走势</h5>
			<hr />
			<div id="sell"></div>
		</div>

JS请求后端代码：

function yeardate (date1, date2, shopID) {
		var totalAmountArrar = new Array();
		var totalGrossArrar = new Array();
		var sum = 0;
		$.ajax({
			url: MonthlyReportSummary_URL,
			type: mothod_post,
			async: true,
			dataType: "json",
			data: { "datetimeStart": date1, "datetimeEnd": date2, "shopID": shopID },
			success: function succFunction (data) {
				console.log(data);
				//渲染绘图数据		
				if (data['reportList'].length != 0) {
					for (var i = 1; i <= 12; i++) {
						$.each(data['reportList'], function (j, val) {
							if (i == val['dateTime'].substring(5, 7)) {
								totalAmountArrar[sum] = val['totalAmount'].toFixed(2);
								totalGrossArrar[sum] = val['totalGross'].toFixed(2);
								return false;
							} else {
								totalAmountArrar[sum] = "0.00";
								totalGrossArrar[sum] = "0.00";
							}

						});
						sum++;
					}
					sketch(monthArrar, totalAmountArrar, totalGrossArrar);//绘图
					sum = 0;
				} else {
					for (var i = 1; i <= 12; i++) {
						monthArrar[sum] = i + "月";
						totalAmountArrar[sum] = "0.00";
						totalGrossArrar[sum] = "0.00";
						sum++;
					}
					sketch(monthArrar, totalAmountArrar, totalGrossArrar);//绘图
					sum = 0;
				}
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				layer.msg("服务器错误");
			}
		})
	}

声明两个数组：

var totalAmountArrar = new Array();
		var totalGrossArrar = new Array();

然后请求服务器后端，返回数据，例如返回数据如下：

服务器后端返回的数据图。

遍历返回的数据，totalAmountArrar数组存放销售额，totalGrossArrar数组存放毛利率：

for (var i = 1; i <= 12; i++) {
						$.each(data['reportList'], function (j, val) {
							if (i == val['dateTime'].substring(5, 7)) {
								totalAmountArrar[sum] = val['totalAmount'].toFixed(2);
								totalGrossArrar[sum] = val['totalGross'].toFixed(2);
								return false;
							} else {
								totalAmountArrar[sum] = "0.00";
								totalGrossArrar[sum] = "0.00";
							}

						});
						sum++;
					}

遍历完后，调用sketch函数：

sketch(monthArrar, totalAmountArrar, totalGrossArrar);//绘图

monthArrar为常量：

const monthArrar = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];|

sketch函数，使用echart绘制折线图：

//业绩图
	function sketch (arr, arr1, arr2) {
		var myChart = echarts.init($('#sell').get(0))

		// 指定图表的配置项和数据
		var trendsoption = {
			title: {

			},
			tooltip: {},
			grid: {//控制图表大小
				left: '4%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			legend: {
				data: ['销量额', '销售毛利'],
				y: 'top',
				icon: "circle"
			},
			xAxis: {
				data: arr
			},
			yAxis: {},
			series: [{
				name: '销量额',
				type: 'line',
				label: {
					normal: {
						show: true,
						position: 'top'
					}
				},
				data: arr1
			},
			{
				name: '销售毛利',
				type: 'line',
				label: {
					normal: {
						show: true,
						position: 'top'
					}
				},
				data: arr2
			}
			]
		};


		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(trendsoption);
	}

效果图如下：

echart绘制的折线图

3、绘制柱状图。

前端HTML代码：

<!--业绩对比-->
		<br />
		<div class="results">
			<br>
			<div id="salesPerformance"></div>
		</div>

JS请求后端代码：

//销售人员的业绩绘图
	function salesPerformanceOfSalesStaff (date1, date2, shopID) {
		var staffName = [];
		var totalAmount = [];
		var NO = [];
		var grossMargin = [];
		$.ajax({
			url: retailTradeDailyReportByStaff_url,
			type: mothod_post,
			async: true,
			dataType: "json",
			data: { "datetimeStart": date1, "datetimeEnd": date2, "shopID": shopID },
			success: function succFunction (data) {
				console.log(data);
				if (data.ERROR == "EC_NoError") {
					if (data.retailTradeDailyReportByStaff.length > 0) {
						for (var i = 0; i < data.retailTradeDailyReportByStaff.length; i++) {
							staffName[i] = data.retailTradeDailyReportByStaff[i].staffName;
							totalAmount[i] = data.retailTradeDailyReportByStaff[i].totalAmount.toFixed(2);
							NO[i] = data.retailTradeDailyReportByStaff[i].NO;
							grossMargin[i] = data.retailTradeDailyReportByStaff[i].grossMargin.toFixed(2);
						}
						$(".performance").remove();
						results(staffName, totalAmount, NO, grossMargin);
					} else {
						$(".performance").remove();
						results(staffName, totalAmount, NO, grossMargin);
						$("#salesPerformance").append("<div class='performance'><i class='layui-icon layui-icon-loading' style='font-size: 60px; color: #1E9FFF;'></i> <br>暂无销售业绩</div>");
					}
				} else {
					if (data.msg == "" || data.msg) {
						layer.msg(服务器错误);
					} else {
						layer.msg(data.msg);
					}
				}
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				layer.msg("服务器错误");
			}
		})
	}

声明了四个数组：

var staffName = [];
		var totalAmount = [];
		var NO = [];
		var grossMargin = [];

然后请求服务器后端，返回数据，例如返回数据如下：

服务器端返回数据样例

遍历返回的数据，staffName数组存员工名称，totalAmount数组存放销售额，NO数组存放销售笔数、grossMargin数组存放销售毛利：

for (var i = 0; i < data.retailTradeDailyReportByStaff.length; i++) {
							staffName[i] = data.retailTradeDailyReportByStaff[i].staffName;
							totalAmount[i] = data.retailTradeDailyReportByStaff[i].totalAmount.toFixed(2);
							NO[i] = data.retailTradeDailyReportByStaff[i].NO;
							grossMargin[i] = data.retailTradeDailyReportByStaff[i].grossMargin.toFixed(2);
						}

遍历完成后，调用results函数：

results(staffName, totalAmount, NO, grossMargin);

result函数，使用echart绘制柱状图：

查看代码 
//销售人员业绩图
	function results (staffName, totalAmount, NO, grossMargin) {
		var myChart = echarts.init($('#salesPerformance').get(0))
		// 指定图表的配置项和数据
		var posList = [
			'left', 'right', 'top', 'bottom',
			'inside',
			'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
			'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
		];

		myChart.configParameters = {
			rotate: {
				min: -90,
				max: 90
			},
			align: {
				options: {
					left: 'left',
					center: 'center',
					right: 'right'
				}
			},
			verticalAlign: {
				options: {
					top: 'top',
					middle: 'middle',
					bottom: 'bottom'
				}
			},
			position: {
				options: echarts.util.reduce(posList, function (map, pos) {
					map[pos] = pos;
					return map;
				}, {})
			},
			distance: {
				min: 0,
				max: 100
			}
		};

		myChart.config = {
			rotate: 90,
			align: 'left',
			verticalAlign: 'middle',
			position: 'insideBottom',
			distance: 15,
			onChange: function () {
				var labelOption = {
					normal: {
						rotate: app.config.rotate,
						align: app.config.align,
						verticalAlign: app.config.verticalAlign,
						position: app.config.position,
						distance: app.config.distance
					}
				};
				myChart.setOption({
					series: [{
						label: labelOption
					}, {
						label: labelOption
					}, {
						label: labelOption
					}, {
						label: labelOption
					}]
				});
			}
		};


		var labelOption = {
			normal: {
				show: true,
				position: myChart.config.position,
				distance: myChart.config.distance,
				align: myChart.config.align,
				verticalAlign: myChart.config.verticalAlign,
				rotate: myChart.config.rotate,
				formatter: '{c}  {name|{a}}',
				fontSize: 14,
				rich: {
					name: {
						textBorderColor: '#fff'
					}
				}
			}
		};

		option = {
			title: {
				text: '销售业绩对比图',
				x: 'left'
			},
			color: ['#003366', '#006699', '#4cabce'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {//控制图表大小
				left: '2%',
				right: '2%',
				bottom: '1%',
				containLabel: true
			},
			legend: {
				data: ['销售总额', '销售毛利', '销售笔数']
			},
			// toolbox: {
			// 	show: true,
			// 	orient: 'vertical',
			// 	left: 'right',
			// 	top: 'center',
			// 	feature: {
			// 		mark: { show: true },
			// 		dataView: { show: true, readOnly: false },
			// 		magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
			// 		restore: { show: true },
			// 		saveAsImage: { show: true }
			// 	}
			// },
			calculable: true,
			xAxis: [
				{
					type: 'category',
					axisTick: { show: false },
					data: staffName,
					axisPointer: {
						type: "shadow"
					}
				}
			],
			yAxis: [
				{
					type: 'value',
					name: '销售金额',
					min: 0,
					max: function (value) {
						return value.max;
					},
					axisLabel: {
						formatter: '{value}'
					},
					nameLocation: 'center',
					nameGap: 50,
					splitLine: { show: false },
					axisLine: {
						lineStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0, color: '#003366' // 0% 处的颜色
								}, {
									offset: 1, color: '#4cabce' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						}
					}
				},
				{
					type: 'value',
					name: '销售笔数',
					min: 0,
					max: function (value) {
						return value.max;
					},
					axisLabel: {
						formatter: '{value}'
					},
					nameLocation: 'center',
					nameGap: 30,
					nameRotate: -90,
					nameTextStyle: {
						color: "#4cabce"
					},
					splitLine: { show: false },
					axisLine: {
						lineStyle: {
							color: "#4cabce"
						}
					}
				}
			],
			series: [
				{
					name: '销售总额',
					type: 'bar',
					barGap: 0,
					barWidth: 30,
					label: labelOption,
					data: totalAmount
				},
				{
					name: '销售毛利',
					type: 'bar',
					barWidth: 30,
					label: labelOption,
					data: grossMargin
				},
				{
					name: '销售笔数',
					type: 'bar',
					barWidth: 30,
					label: labelOption,
					data: NO,
					yAxisIndex: 1,

				}
			]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}

效果图如下：

echart绘制柱状图效果图

BX博昕信息李金景Kim
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[前端可视化]echart.js绘制折线图入门
SCUhzs
08-25 6863
Part1echart.js绘制折线图1Echart简介Echart是百度研发团队开发的一款报表视图JS插件，功能十分强大，对开发者和用户友好。EChart下载地址：http://echarts.baidu.com/download.htmlEchart官方网站：https://www.echartsjs.com/index.htmldemo列表：https://echarts.apache.org/examples/zh/index.html折线图示例每个示例都有对应的代码，可以直接拿下来用。2optio
QT调用Echarts，并与JavaScript进行数据交互的方法（附源码）
syealfalfa的博客
10-18 1927
QT调用Echarts，并与JavaScript进行数据交互（附源码） 环境：vs2019、QT5.14.2 链接: link. 图片: 带尺寸的图片: 居中的图片: 居中并且带尺寸的图片: 当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。 如何插入一段漂亮的代码片 去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片. // An highlighted block var foo = 'bar'; ...
Vue.js中的JSON数据可视化利器: Vue-Json-Tree-View
最新发布
gitblog_00011的博客
04-18 696
Vue.js中的JSON数据可视化利器: Vue-Json-Tree-View 项目地址:https://gitcode.com/fitzhavey/vue-json-tree-view 在前端开发中，处理和展示JSON数据是一项常见的任务，尤其是在调试、API接口交互或者数据展示时。Vue-Json-Tree-View是一个优秀的Vue组件，它能够优雅地将复杂的JSON数据以可读性强的树形结构显...
三维饼图插件——cubicPieChart-1.0.min.js
03-12
echarts没有三维饼图，但是有时候又需要在前端绘制三维饼图怎么办？这个时候可以考虑用threejs来实现功能。 使用示例： var cubic = new Cubic.PieChart("WebGL-output", { width: 400, height: 300, thickness: 5,//厚度 radius: 30,//半径 colors: [0xffffff, 0xff00ff, 0xffff00, 0x0000ff,0x5F9EA0,0x00FF7F],//颜色数组16进制的数组 data: [12, 13, 5, 50, 23, 54],//数据数组 startAngle: 0,//起始角 background: 0x00ffff,//背景色，16进制数字 opacity: 1 //背景透明度 }); console.log(cubic.getPosition()); console.log(cubic.getRotation()); // cubic.setPosition(0, 20, 0); // cubic.setRotation(0, 0, 0); // cubic.remove();
前端echarts插件制作柱状图、饼状图、折线图
温柔雨哥的博客
12-22 2320
1、饼状图 打开网址：https://www.echartsjs.com/zh/index.html 点开实例，找到饼状图，有许多小例子，点进去一个，会有相应饼状图代码，复制到自己文件里，引入插件即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ...
Vue集成echarts插件
前端劝退师的博客
10-14 542
1.项目安装echarts npm install echarts --save 2.全局配置：main.js 1 import echarts from 'echarts' 2 3 Vue.use(echarts) 4 Vue.prototype.$echarts = echarts 3.目标界面使用 1 <template> 2 <div> 3 <div class="total-class" id="myChart" :style=.
Javaweb JavaScript EChart echarts.js 图表插件
12-02
ECharts 是一个基于 JavaScript 的开源可视化库，专为 Web 前端开发设计，用于创建交互式的、数据驱动的图表。在 JavaWeb 开发中，ECharts 被广泛应用于 PC 和移动端的数据可视化，帮助开发者将复杂的数据转换为易于...
echart可视化大数据
07-27
ECharts 结合 Vue.js 实现的数据可视化，能够帮助开发者高效地展示和理解大数据。通过 Vue 的组件化开发，可以轻松地将图表嵌入到应用中，并通过 Vue 的数据绑定特性实现数据的动态更新。配合合理的配置文件管理和大...
echart百度地图china.js
02-18
它提供了丰富的图表类型，包括柱状图、折线图、饼图等，并且支持在地图上进行数据可视化，其中`china.js`便是专为展示中国地图而设计的插件。本文将深入探讨`echart百度地图china.js`的相关知识点，帮助开发者更好地...
Javaweb JavaScript EChart 图表插件 echarts.min.js 与与后台交互等资源
03-22
在JavaWeb开发中，JavaScript库ECharts是一款广泛使用的数据可视化工具，特别适合创建各种复杂的图表。ECharts由百度开发，提供了丰富的图表类型，如折线图、柱状图、饼图、散点图等，同时支持自定义配置，使得图表...
angular+echart.js统计数据图表读取投屏显示代码
06-11
总的来说，这个项目结合了Angular的后端数据处理能力与ECharts的前端可视化能力，实现了从数据到图表的动态渲染，并具备在大屏幕上的投屏显示功能。开发者需要对Angular的组件化编程和ECharts的图表配置有深入理解，...
百度插件ECharts 3.4.0 完整版
03-15
包含所有图表组件
HTML5炫酷科技感十足数据可视化
08-19
HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化
知识图谱之可视化(三)
xinxindiandeng9789的博客
04-03 4985
点击知识图谱中的节点，将节点的数据作为关键字进行搜索
前端必备的谷歌浏览器JSON可视化插件：JSON-Handle
热门推荐
风中追风
05-18 1万+
功能简介： 日常开发过程中，对接后台返回的数据接口时，数据格式常常是各种json格式字符串，在netWork里面查看十分不便，需要在网上找一个json格式化的工具再查看，然后再取数据字段，然后绑定到页面上，十分不便，推荐这么一款前端开发的浏览器插件工具给大家使用。 返回数据: {"l1": {"l1_1": ["l1_1_1","l1_1_2"],"l1_2": { "l1_2_1": 121}},"l2": {"l2_1": null,"l2_2": true,"l2_3": ...
原生JavaScript 仿 echart 插件制作自己的插件库
chengbao的专栏
11-17 587
本文系原创，转载请注明出处： https://blog.csdn.net/chengbao315/article/details/84171511 最近在做一个数据大屏的web项目，页面中经常会用到一些报表、图表之类的功能，对于图表我选择了 echart 插件，因为 echart 做图表非常方便，效果也比较满足要求，但是对于图表，我则用的是 html 的 table 标签，每次做都要敲一大堆 ...
ECharts入门
qq_45835940的博客
01-03 3177
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="...
echart实现ajax动态数据加载(前台js代码)
areen7003的博客
03-10 346
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 显示标题，图例和空的坐标轴 myChart.setOption({ ...
echart.js文件
06-25
Echart.js是一款基于JavaScript的开源可视化库，主要用来生成各种图表和数据可视化。它功能强大、灵活性高，能够满足不同类型的数据可视化需求，支持部分常用的图表类型，如折线图、柱状图、饼图、散点图等，同时也...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值