echarts-demo

图表组件-echarts

http://echarts.baidu.com/index.html

/* 在没有通过 <script src="../js/plugins/echarts/echarts.min.js"></script> 方式显式引入组件时，可以通过COM_TOOLS.requireJsFn()方法动态加载组件（组件不会重复加载） */
COM_TOOLS.requireJsFn(['echarts'],[],function(){
	//初始化echarts 例如
	COM_TOOLS.eChartsTools.initOpt('#demobox01','line','数据','配置');
});

折线图（可点击节点，查看数据源）

<div id="demobox01" style="width: 600px;height: 400px;"></div>

<script src="../js/plugins/echarts/echarts.min.js"></script>

$(function(){
	COM_TOOLS.eChartsTools.initOpt('#demobox01','line',_data_,
		{ //数据组配置
			"p1":{
				name:'直接访问',
				type:'line'
			},
			"p2":{
				name:'间接访问',
				type:'line'
			}
		},
		{ //数据项配置
			name1:'坐标1',
			name2:'坐标2',
			name3:'坐标3'
		},
		{
			title : {
				text: '图表实例名称'
			}
		}
	).on('click', function (params) {
	    alert('name:'+params['name']+'\n value:'+params['value']+'\n seriesName:'+params['seriesName']);
	});
	$('#demo1-btn1').click(function(){
		COM_TOOLS.eChartsTools.updateData('#demobox01',[
		{
			cname:"p1",
			data:[
				{name:"name1",value:Math.floor(Math.random()*100)},
				{name:"name5",value:Math.floor(Math.random()*100)},
				{name:"name3",value:Math.floor(Math.random()*100)},
				{name:"name4",value:Math.floor(Math.random()*100)}
			]
		},
		{
			cname:"p2",
			data:[
				{name:"name1",value:Math.floor(Math.random()*100)},
				{name:"name5",value:Math.floor(Math.random()*100)},
				{name:"name3",value:Math.floor(Math.random()*100)},
				{name:"name4",value:Math.floor(Math.random()*100)}
			]
		}
		])
	});
});

_data_:服务器返回数据(json)
[
	{
		cname:"p1",
		data:[
			{name:"name1",value:111},
			{name:"name2",value:222},
			{name:"name3",value:333},
			{name:"name4",value:444}
		]
	},
	{
		cname:"p2",
		data:[
			{name:"name1",value:55},
			{name:"name2",value:66},
			{name:"name3",value:77},
			{name:"name4",value:88}
		]
	}
];

柱状图

$(function(){
	COM_TOOLS.eChartsTools.initOpt('#demobox02','bar',_data_,
		{ //数据组配置
			"p1":{
				name:'直接访问',
				type:'bar'
			},
			"p2":{
				name:'间接访问',
				type:'bar'
			}
		},
		{ //数据项配置
			name1:'坐标1',
			name2:'坐标2',
			name3:'坐标3'
		},
		{
			title : {
				text: '图表实例名称'
			}
		}
	);
});

饼状图(远程地址：data:[url||get])

$(function(){
	COM_TOOLS.eChartsTools.initOpt('#demobox03','pie','/echarts/api',
		{ //数据组配置
			"p1":{
				name:'直接访问',
				type:'pie'
			}
		},
		{ //数据项配置
			name1:'坐标1',
			name2:'坐标2',
			name3:'坐标3'
		},
		{
			title : {
				text: '图表实例名称'
			}
		}
	);
});

漏斗图

$(function(){
	COM_TOOLS.eChartsTools.initOpt('#demobox04','funnel',_data_,
		{ //数据组配置
			"p1":{
				label: {
	                normal: {
	                    formatter: '{b}预期'
	                },
	                emphasis: {
	                    position:'inside',
	                    formatter: '{b}预期: {c}'
	                }
	            },
	            labelLine: {
	                normal: {
	                    show: false
	                }
	            },
	            itemStyle: {
	                normal: {
	                    opacity: 0.7
	                }
	            },
				name:'直接访问',
				type:'funnel'
			},
			"p2":{
				maxSize: '80%',
	            label: {
	                normal: {
	                    position: 'inside',
	                    formatter: '{c}',
	                    textStyle: {
	                        color: '#fff'
	                    }
	                },
	                emphasis: {
	                    position:'inside',
	                    formatter: '{b}实际: {c}'
	                }
	            },
	            itemStyle: {
	                normal: {
	                    opacity: 0.5,
	                    borderColor: '#fff',
	                    borderWidth: 2
	                }
	            },
				name:'间接访问',
				type:'funnel'
			}
		},
		{ //数据项配置
			name1:'坐标1',
			name2:'坐标2',
			name3:'坐标3'
		},
		{
			title : {
				text: '图表实例名称'
			}
		}
	);
});

仪表盘

$(function(){
	COM_TOOLS.eChartsTools.initOpt('#demobox05','gauge',[{cname:"p1",data:[{name:"name1",value:60}]}],
		{ //数据组配置
			"p1":{
				name:'直接访问',
				type:'gauge'
			}
		},
		{ //数据项配置
			name1:'比率'
		},
		{
			title : {
				text: '图表实例名称'
			}
		}
	);
	$('#demo5-btn1').click(function(){
		COM_TOOLS.eChartsTools.updateData('#demobox05',[{cname:"p1",data:[{name:"name1",value:Math.floor(Math.random()*100)}]}])
	});
});

iframe方式

html
js

	<iframe id="echars-iframe-box" width="100%" height="400" frameborder="0" scrolling="no" src="echarts-demo-include.html" data-src="echarts-demo-include.html" allowtransparency="yes"></iframe>

$(function(){
	$('#demo6-btn1').click(function(){
		$('#echars-iframe-box').attr('src',$('#echars-iframe-box').data('src')+'?'+Math.random());
	});
	var new_opt={"title": {"text": "fff"},"xAxis":{"name": "xxx"}};
	$('#demo6-btn2').click(function(){
		$('#echars-iframe-box').attr('src',$('#echars-iframe-box').data('src')+'?opt='+encodeURIComponent(JSON.stringify(new_opt))+'&m='+Math.random());
	});
});