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


    1.下载前段框架并放入项目中去.

    2.在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>
    

      

  • 相关阅读:
    Dev XtraTreeList 学习
    DataGridView单元格显示GIF图片
    如何在.NET上处理二维码
    设计模式之UML类图的常见关系(一)
    .NET常用操作小知识
    Sql Server 存储过程使用技巧
    WinForm中如何判断关闭事件来源于用户点击右上角的“关闭”按钮
    WinFrom 安装包制作
    DBHelper数据库操作类(二)
    spring cloud zipkin
  • 原文地址:https://www.cnblogs.com/maybo/p/5183744.html
Copyright © 2020-2023  润新知