Echart柱状图举例
发布于：2018-9-19 21:57 作者：song100e 浏览：451 分类：PHP最近有个任务是做数据中心，饼状图、柱状图等等，是时候做个小总结了。
主要的难点在于链接，颜色，异步刷新数据，不过通过官方的API都能解决。
举例代码如下：
<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>
