:

Echart柱状图举例

发布于:2018-9-19 21:57 作者:song100e 浏览:48 分类:PHP

    最近有个任务是做数据中心,饼状图、柱状图等等,是时候做个小总结了。

主要的难点在于链接,颜色,异步刷新数据,不过通过官方的API都能解决。supplier.PNG


举例代码如下:

<html>
<head>Echart做图举例</head>
<body>
<div class="histogram-body">
	<div class="histogram-item increase" id="supplier"
		 style="min-height:400px;margin-top:20px;"></div>
</div>
<script>
	// 右侧供应商
	var increase_supplier_chart = echarts.init(document.getElementById('supplier'));
	increase_supplier_chart.setOption({});
	increase_supplier_chart.on('click', function (params) {
		var auth_status = '';
		switch (params.name){
			case '一星供应商':
				auth_status = 1;
				break;
			case '二星供应商':
				auth_status = 2;
				break;
		}
		window.open('/supplier/index?auth_status=' + auth_status);
	}); // 添加点击链接

	function getIncreaseAuth(detail_werks_id){
		$.ajax({
			url: '/data_center/getWeekIncreaseAuth',
			type: "post",
			data: {detail_werks_id:detail_werks_id},
			dataType: "json",
			success: function (data) {
				if (data.status == 1) {
					// 动态加载供应商增长数据
					var supplier_option = {
						title: { text:'门店供应商增长数据',left:'center',textStyle:{fontWeight:'normal'}},
						legend: { x: 'right', y: 'top', padding: [0, 20, 0, 0]},
						tooltip: {},
						dataset: {},
						color:['#A5CCEF', '#4B98DE', '#206AAE'],
						xAxis: {type: 'category', axisLabel:{ rotate:40 }},
						yAxis: {type : 'value', minInterval : 1, axisLabel:{formatter:'{value} (个)'}},
						series: [ {type: 'bar'}, {type: 'bar'} ]
					};
					supplier_option.dataset = data.data.supplier;
					increase_supplier_chart.hideLoading();
					increase_supplier_chart.setOption(supplier_option);
				}else{
					layer.alert(data.msg,{icon:5});
				}
			}, 
			error: function (e) {}
		});
	}
	
	function getRightData(detail_werks_id){
		supplier_chart.showLoading();
		//每周的统计数据展示
		getIncreaseAuth(detail_werks_id);
	}
	var increase_werks_id = $("#increase_werks").val();
	getRightData(increase_werks_id);// 页面加载时调用
</script>
<body>
<html>

标签: Echart

0