前端图表插件ECharts入门教程

最新推荐文章于 2024-02-13 20:06:54 发布

Raphael-laq

最新推荐文章于 2024-02-13 20:06:54 发布

阅读量1.6k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_57226198/article/details/128075817

版权

引起我使用ECharts的起因，最近一个老项目的图表功能不可使用了，发现是客户的电脑中没有安装flash插件，导致原有的图表控件功能无法加载动画展示数据图表。于此，决定改造该项目的图表插件，而选择ECharts的原因是它是一款开源的，兼容多种浏览器的，底层只依赖轻量级矢量图形库的图表插件。

ECharts的特性

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

        多种数据格式无需转换直接使用
        千万数据的前端展现
        移动端优化
        多渲染方案，跨平台使用
        深度的交互式数据探索
        多维数据的支持以及丰富的视觉编码手段
        动态数据，可在时间状态上选择合适动画

。。。。。。

ECharts的下载

官网:Apache ECharts(PS:ECharts 目前正在 Apache 软件基金会孵化,所以之前的域名已经不再使用了)

学习推荐大家下载源代码，源代码里面包含了所有图表组件以及常见的警告和错误。若在项目中使用则可以根据需求选择合适的个性化定制。

ECharts的快速使用

这里我们可以查看帮助文档:快速上手 - Handbook - Apache ECharts

下面通过一个小demo来带大家快速上手一个例子，成功实现一个demo可以帮助大家积极学习。

第一步、先引入js支持 echarts.js

下载地址:JavawebJavaScriptEChartecharts.js图表插件-Javascript文档类资源-CSDN下载

第二步、建一个前端页面(这里我用jsp做演示，ajax请求的数据，当然也可以在页面中定义变量将第三步的报文赋值给变量即可。)

Tips：图表里面的数据也是可以自定义的，若想通过ajax请求过来的数据渲染，直接在ajax的回调函数里面直接给option赋值或者修改也可以。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% String path = request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow-x: hidden;">
	<head>
		<script type="text/javascript" src="<%=path%>/javascript/echarts/echarts.js"></script>	
		<script  type="text/javascript">
			var myChart;
			function initComplete(){
				myChart = echarts.init(document.getElementById('div_chart_bar'));
				myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
				getChartData();
			}
			
			function makeBarChart(x, y) {
				myChart = echarts.init(document.getElementById('div_chart_bar'));
				//3.初始化，默认显示标题，图例和xy空坐标轴
				var option = {
					tooltip: {
						trigger: 'axis',// 背板顶线
						axisPointer: {
							type: 'shadow'// 背板线改背板条
						}
					},
					legend: {},
					// 图表边框样式(四周padding)
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					// 工具栏
					toolbox: {
				        show : false,// 是否展示
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
					// x轴
					xAxis: x,
					// y轴
					yAxis: [
						{ type: 'value' }
					],
					// 数据集
					series: y
				};
				myChart.setOption(option);// 加载样式
			}
			// 获取数据
			function getChartData() {
				var names = []; //用来展示于x轴
				var nums = []; //用来展示于y轴series数据
				$.ajax({
					url: '<%=path%>/charts/findBarChartData.do', // 替换自己的url路径
					type: 'POST',
					async: true,
					data: {},
					dataType: 'json',
					success: function(results){
						if (results.res) {
							if (results.eChart && results.eChart.xAxis) {
								names.push({
									type: results.eChart.xAxis['type'],
									data: results.eChart.xAxis['data']
								});
							} else {
								top.Dialog.alert("图表数据异常");
							}
							if (results.eChart && results.eChart.EChartSeriesList) {
								for (var i = 0; i < results.eChart.EChartSeriesList.length; i++) {
									nums.push({
										name: results.eChart.EChartSeriesList[i].name,
										type: results.eChart.EChartSeriesList[i].type,
										stack: results.eChart.EChartSeriesList[i].stack,
										emphasis: results.eChart.EChartSeriesList[i].emphasis,
										data: results.eChart.EChartSeriesList[i].data
									});
								}
							} else {
								top.Dialog.alert("图表数据异常");
							}
							
							var x = names;
							var y = nums;
							makeBarChart(x, y);// 装载图表
						}
						myChart.hideLoading();// 隐藏加载动画
					},
					error: function(){
						
					}
				});
			}
			
		</script>
	</head>
	<body>
		<!--标头start-->
		<div id="title">
			<div class="biaoti">柱状图</div>
		</div>
		<!--内容start-->
		<div id="tagContent" style="height: 260px; overflow-x: auto; overflow-y: auto;">
			<div id="div_chart_bar" style="height: 300px; width: 500px;" ></div>
		</div>
	</body>
</html>

第三步、后端报文(下面是模拟的数据报文)

{
	"eChart":
		{
			"EChartSeriesList":
				[
					{"data":["75","155","165","45","125","95","15","55","45","105"],"emphasis":{"focus":"series"},"type":"bar","name":"客户1","stack":""},
					{"data":["95","195","125","35","165","155","65","25","35","15"],"emphasis":{"focus":"series"},"type":"bar","name":"客户2","stack":""},
					{"data":["25","115","95","25","135","25","95","25","155","165"],"emphasis":{"focus":"series"},"type":"bar","name":"客户3","stack":""}
				],
			"xAxis":
				{
					"data":["2022-11-10","2022-11-11","2022-11-12","2022-11-13","2022-11-14","2022-11-15","2022-11-16","2022-11-17","2022-11-18","2022-11-19"],
					"type":"category"
				},
			"yAxis":null
		},
	"res":true,
	"message":"获取数据成功"
}

第四步、运行前端页面，这时，图表就可以展示了，怎么样，是不是很有成就感