Echarts+ajax实现叠堆柱状图
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--统计图 -->
<div class="row">
<div id="main" style="width: 900px; height: 350px; margin-top:80px;"></div>
</div>
</body>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
// 统计图
$.ajax({
url: "json/test.json",
data: {},
type: 'GET',
success: function(data) {
console.log(JSON.stringify(data))
bloodFun(data.echatX, data.echatY,data.echatY2,data.echatY3);
},
});
// 基于准备好的dom，初始化echarts实例
var bloodChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
function bloodFun(x_data, y_data, y2_data,y3_data) {
bloodChart.setOption({
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data:['正常','缺勤','补卡']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data: x_data,
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'正常',
type:'bar',
data: y_data
},
{
name:'缺勤',
type:'bar',
data: y2_data
},
{
name:'补卡',
type:'bar',
data: y3_data
}
]
});
}
</script>
</html>本地json
{
"echatX": [
"2019-07-02",
"2019-07-03",
"2019-07-04",
"2019-07-05",
"2019-07-06",
"2019-07-07",
"2019-07-08",
"2019-07-09",
"2019-07-10",
"2019-07-11",
"2019-07-12",
"2019-07-13",
"2019-07-14",
"2019-07-15"
],
"echatY": [
120,121,123,123,125,127,128,129,120,123,122,126,129,122
],
"echatY2": [
60,64,63,63,65,67,68,69,61,66,65,68,69,65
],
"echatY3": [
60,64,63,63,65,67,68,69,161,66,65,68,169,165
]
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
