echarts 柱状图下钻功能

var drillDown = {
	getOption : function () {
	var option = null;
	option = {
	title: {
	text: '折线图下钻示例',
	left: 'center'
	},
	tooltip: {
	trigger: 'item',
	formatter: '{a} <br/>{b} : {c}'
	},
	legend: {
	left: 'left',
	data: ['月数据']
	},
	xAxis: {
	type: 'category',
	name: 'x',
	splitLine: {show: false},
	data: ['201601', '201602', '201603', '201604', '201605', '201606', '201607', '201608', '201609']
	},
	grid: {
	left: '3%',
	right: '4%',
	bottom: '3%',
	containLabel: true
	},
	yAxis: {
	type: 'log',
	name: 'y'
	},
	series: [
	{
	name: '月数据',
	type: 'line',
	data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
	}
	]
	};
	return option;
	},
	initChart : function (myChart,option) {
	myChart.setOption(option);
	myChart.on('click',function(object){
	// 销毁之前的echarts实例
	echarts.dispose(dom);
	// 初始化一个新的实例
	var myChart = echarts.init(dom);
	// object为当前的这个echart对象，大家可以自己打印出来看看
	// console.dir(object);
	// 我们可以看到name属性即为当前点击点的对应月份值，那么我们可以通过这个值去接口查询对应201609月份下的每一天的值.
	// 此处的201609月份数据可以通过接口读取
	// $.ajax(
	// type : 'get',
	// url : interfaceUrl + '&month=' + object.name, // 此处可以替换为你的接口地址
	// dataType : 'json',
	// success : function (msg){
	// option.xAxis.data = msg.xAxis;
	// option.series[0].data = msg.yAxis[0];
	// myChart.setOption(option, true);
	// }
	// );

	// 我这里就模拟一个测试数据，做为demo演示
	option.xAxis.data = [
	'2016-09-01','2016-09-02','2016-09-03','2016-09-04','2016-09-05','2016-09-06','2016-09-07','2016-09-08',
	'2016-09-09','2016-09-10','2016-09-11','2016-09-12','2016-09-13','2016-09-14','2016-09-15','2016-09-16',
	'2016-09-17','2016-09-18','2016-09-19','2016-09-20','2016-09-21','2016-09-22','2016-09-23','2016-09-24',
	'2016-09-25','2016-09-26','2016-09-27','2016-09-28','2016-09-29','2016-09-30'
	];
	option.series[0].data = [
	3,4,5,6,5,6,7,8,8,9,
	12,13,15,16,20,12,30,21,22,29,
	30,31,33,34,35,36,20,29,33,40
	];
	myChart.setOption(option, true);
	});
	},
	};

<!DOCTYPE html>
	<html style="height: 100%">
	<head>
	<meta charset="utf-8">
	</head>
	<body style="height: 100%; margin: 0">
	<div style="margin-left:40%;margin-top:2%">
	<button id='return-button' value=''>返回</button>
	</div>
	<div id="container" style="height: 50%;width: 50%"></div>
	<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
	<script type="text/javascript" src="../jquery.js"></script>
	<script type="text/javascript" src="./drillDown.js"></script>
	<script type="text/javascript">
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var option = drillDown.getOption();
	drillDown.initChart(myChart,option);

	$('#return-button').on('click',function(){
	var myChart = echarts.init(dom);
	var option = drillDown.getOption();
	drillDown.initChart(myChart,option);
	});
	</script>
	</body>
	</html>

echarts 柱状图下钻功能

猜你喜欢