一、效果图
二、实现代码
1、body中：
// 头部标签
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">测试柱图</h1>
</header>
<div class="mui-content" style="margin-top: 10px;">
// 设置堆叠柱图的div的大小
<div id="main" style='width:100%;height:300px;'></div>
</div>
2、style中：
<style>
// 设置页面的背景图片
body {
background: url(../img/csygbg.png);
}
// 设置柱图div中的样式
.mui-content {
background-color: transparent; //背景颜色为透明
font-size: 16px; // 字体大小
color: #00F5FF; // 字体颜色
font-weight: bold; // 字体的粗细
}
</style>
3、导入的js
<script src="../js/mui.min.js"></script>
<script src="../js/jquery.js"></script>
<script src="../js/countUp.js"></script>
<script src="../js/echarts.js"></script>
4、js代码
<script>
var main_biaoti = []; // 显示给用户看的标题
var main_datanan = []; // 显示给用户看的数据(男生)
var main_datanv = []; // 显示给用户看的数据(女生)
mui.plusReady(function() {
mui.getJSON('../json/genderCompanyChart.json', function(data) {
// 将返回的json对象保存在obj里面
var obj = data.data;
// 分别得到obj的值并放在相应的全局变量中
for(var i = 0; i < obj.length; i++) {
main_biaoti.push(obj[i].NAME);
main_datanan.push(obj[i].LCOUNT);
main_datanv.push(obj[i].VCOUNT);
}
shownumber();
});
});
// 得到某个ID的对象封装方法
var byId = function(id) {
return document.getElementById(id);
}
function shownumber() {
var getOption = {
// tooltip:提示框组件
tooltip: {
// 当用户选中某一组件时 显示出此组件的数据
axisPointer: {
//指示器类型: 阴影指示器
type: 'shadow'
}
},
// 图例组件
legend: {
// 图例的数据数组
// 设置显示的数据分别为 男 女
data: ['男', '女']
},
// dataZoom 组件 用于区域缩放
dataZoom: [{
// inside：平移,在坐标系中滑动拖拽进行数据区域平移
// [通过手指可放大放小]
// slider：滑动条型数据区域缩放组件
// [通过下方滑动条放大放小]
type: 'inside'
}],
// 直角坐标系 grid 中的 x 轴
xAxis: [{
// 坐标轴类型
type: 'category',
// x轴上显示所以标题
data: main_biaoti
}],
// 直角坐标系 grid 中的 y 轴
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
// 工具栏,可刷新
toolbox: {
show: true,
feature: {
//restore： 配置项还原
restore: {
show: true
}
}
},
//系列列表
series: [{
name: '男',
// 图表类型：柱状/条形图
type: 'bar',
data: main_datanan
},
{
name: '女',
type: 'bar',
stack: '广告',
data: main_datanv
}
]
};
// 获得main div对象
echarts.init(byId('main'));
// 将 option 赋值给此图表
main.setOption(getOption);
}
</script>