最近项目要求开发一个echarts的小功能图表，需要动态加载数据，现在做完后把源码拷上来

最新推荐文章于 2024-02-02 16:39:00 发布

风中的疯

最新推荐文章于 2024-02-02 16:39:00 发布

阅读量2k

点赞数 2

本文链接：https://blog.csdn.net/lijinquan2009/article/details/68941193

版权

第一部分：加载echarts库（用的是echarts3），同时项目要求用到easyui

<head>
    <meta charset="utf-8">
    <title>分析实例</title> 
   
    <link rel="stylesheet" href="<%= context %>/resources/easyui/themes/default-bak/easyui.css">
    <link rel="stylesheet" href="<%= context %>/resources/easyui/themes/icon.css">
    <script src="<%= context %>/resources/easyui/jquery.min.js"></script>
    <script src="<%= context %>/resources/easyui/jquery.json-2.4.js"></script>
    <script src="<%= context %>/resources/easyui/jquery.easyui.min.js"></script>
    <script src="<%= context %>/resources/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script src="<%= context %>/resources/echarts/echarts.js"></script>
</head>

第二部分：初始化图表容器，并且设置里面参数，如果大家觉得我的例子不符合你们的项目需求，

可以去echarts的官网上找例子。echarts官网上有很多效果十分炫酷爆炸冲上天的例子，并且会附上源码。

大家可以去里面参考学习

<div id="main" style="height:500px; border:1px solid #ccc; padding:10px;"></div>
<script type="text/javascript"> 
//初始化echarts实例
var myChart=echarts.init(document.getElementById('main'));

//制定图表的配置项和数据
var option = {
    title : {
        text: '数据分析实例',
        subtext: '数据为测试数据'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['数据']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ]
};
//使用钢支顶的配置项和数据显示图表
myChart.setOption(option);
</script>

第三部分：动态加载数据，这个应该是需求最难的部分，也是最有趣的部分。我在完成这个功能的时候，能看到，能学到，能感受到最深的就是这部分。

myChart.showLoading();  

$(function(){
	$.getJSON("<%=context%>/ana/gplat_ana_inst/loadechartsdata/${id}/${cid}",function(result){
		//处理行数据
		var rows=result.rows;
		//动态加载图表
		//xAxis分析
		var xAxis=[];
		for(var i=0;i<rows.length;i++){
			xAxis.push(i);
		}
		//series
		var series={};
		//获取分组名字
		var sname=[]
		$.each(rows[0],function(key,value){
			sname.push(key);
		});
		
		//获取分组数据
		$.each(rows[0],function(key,value){
			var tarr=[];
			for(var i=0;i<rows.length;i++){
				$.each(rows[i],function(o,v){
					if(key==o){
						tarr.push(v);
					}
				});
			}
			//添加数据
			series[key]=tarr;
		});
		
		//设置分组数据
		var sdd=[];
		$.each(series,function(key,value){
			var tmp={};
			tmp['name']=key;
			tmp['type']='bar';
			tmp['data']=value;
			sdd.push(tmp);
		});
		
		//动态加载echarts图表数据
		myChart.setOption({
			legend: {
        		data:sname
    		},
			xAxis : [{
	            type : 'category',
	            data : xAxis
    	    }],
		    series : sdd
		});

		
		myChart.hideLoading();
	});
});

部署，运行，成功

以上就是开发的例子