<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.js"></script>
</head>
<body>
<div id="bar01" style="width:600px;height:400px;margin-top:10px;"></div>
</body>
<script>
// 柱状图
var myChart = echarts.init(document.getElementById('bar01'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'echart柱状图',
x: 'left'
},
tooltip: {},
legend: {
data: ['待分配订单', '已分配订单', '', '异常单', '历史未处理订单']
},
xAxis: {
data: ["网厅", "微厅", "卖场", "mini厅"]
},
yAxis: {
type: 'value',
name: '今日订单',
min: 0,
max: 100,
interval: 20,
},
series: [{
name: '待分配订单',
type: 'bar',
color: ['#86d560'],
data: [20, 50, 30, 10]
}, {
name: '已分配订单',
type: 'bar',
color: ['#798af2'],
data: [70, 85, 76, 66]
}, {
name: '异常单',
type: 'bar',
color: ['#ff999a'],
data: [15, 4, 19, 23]
}, {
name: '历史未处理订单',
type: 'bar',
color: ['#ffcc67'],
data: [10, 20, 36, 34]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//Ajax动态改变数据
/*setInterval(function () {
$.ajax({
type: "post",
url: "",
//data: {arg1:'',arg2: ''},
dataType: "json",
success: function (data) {
myChart.setOption({
series: [{
data: data
}]
});
}
});
}, 1000);*/
</script>
</html>