EChart 关于图标控件的简单实用

Posted 2020-06-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了EChart 关于图标控件的简单实用相关的知识，希望对你有一定的参考价值。

１．下载前段框架并放入项目中去．

２．在js中调用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>

<body>
	<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
	<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
	<div id="main"
		style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>
	<div id="mainMap"
		style="height: 500px; border: 1px solid #ccc; padding: 10px;"></div>

	<!--Step:2 Import echarts.js-->
	<!--Step:2 引入echarts.js-->
	<script src="${base.contextPath}/js/echarts.js"></script>
	<script type="text/javascript"
		src="${base.contextPath}/js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
		// Step:3 conifg ECharts‘s path, link to echarts.js from current page.
		// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
		require.config({
			paths : {
				echarts : ‘${base.contextPath}/js‘
			}
		});

		// Step:4 require echarts and use it in the callback.
		// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
		$(document).ready(
				function() {
					$.ajax({
						url : "${base.contextPath}/total/data?type=1",
						type : ‘get‘,
						contentType : "application/json",
						cache : false,
						success : function(text) {
							var data = text;

							bar(data);
						},
						error : function(jqXHR, textStatus, errorThrown) {
							btnSave.setEnabled(true);
							if (400 == jqXHR.status || 403 == jqXHR.status
									|| 500 == jqXHR.status)
								return;
							var text = "操作失败，" + jqXHR.responseText;
							mini.alert(text);
						}
					});
				});
		// bar(null);
		function bar(data) {
			var sData = new Array();
			var sX = new Array();
			for (i = 0; i < data.length; i++) {
				sData[i] = data[i].total;
				sX[i] = data[i].brand;
			}
			require([ ‘echarts‘, ‘echarts/chart/bar‘, ‘echarts/chart/line‘,
			//‘echarts/chart/map‘
			], function(ec) {

				//--- 折柱 ---
				var myChart = ec.init(document.getElementById(‘main‘));
				myChart.setOption({
					tooltip : {
						trigger : ‘axis‘
					},
					legend : {
						data : [ ‘总数‘ ]
					},
					toolbox : {
						show : true,
						feature : {
							mark : {
								show : true
							},
							dataView : {
								show : true,
								readOnly : false
							},
							magicType : {
								show : true,
								type : [ ‘line‘, ‘bar‘ ]
							},
							restore : {
								show : true
							},
							saveAsImage : {
								show : true
							}
						}
					},
					calculable : true,
					xAxis : [ {
						type : ‘category‘,
						data : sX
					} ],
					yAxis : [ {
						type : ‘value‘,
						splitArea : {
							show : true
						}
					} ],
					series : [ {
						name : ‘总数‘,
						type : ‘bar‘,
						data : sData
					},
					/*  {
					     name:‘降水量‘,
					     type:‘bar‘,
					     data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
					 } */
					]
				});
			});
		}
	</script>
</body>
</html>

以上是关于EChart 关于图标控件的简单实用的主要内容，如果未能解决你的问题，请参考以下文章

echart 柱状图标制作

echart 图例设置自定义图标？

EChart将timeline图标设置为加号

Echart 带坐标轴带图标的柱状图

Android 实用代码片段