<!DOCTYPE html>
<html style="height: 100%">
<!--50%半屏,100%全屏-->
<head>
<meta charset="utf-8">
<title>柱状图</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body style="height: 100%; margin: 0">
<!--存放Echarts的DOM 容器,50%半屏显示,100%全屏显示-->
<div id="lineChart" style="height: 50%;"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"> </script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"> </script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"> </script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"> </script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<!--以上是echarts需要导入的js-->
<script src="../../js/mui.min.js"></script>
<script src="../../js/vue.min.js" type="text/javascript"></script>
<script src="../../js/util.js" type="text/javascript"></script>
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function() {
var app = new Vue({
el: '#lineChart',
data: {
lists: [],
// 初始化图表配置
options:{
color: ['#3398DB'], //柱状图颜色
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : [1,2,3,4,5,6,7,8,9,10,11,12], //X轴坐标
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value',
max:100, //Y轴最大值 不写的话自动调节
axisLabel:{formatter:'{value} %'} //给Y轴坐标加%
}
],
series : [
{
name:'数据',
type:'bar', //图表类型
barWidth: '50%', //宽度
data:[] //Y轴数据
}
]
}
},
mounted: function() {
var that = this;
//初始化echarts实例
var lineChart = echarts.init(document.getElementById('lineChart'));
//默认加载动画
lineChart.showLoading();
//后台获取数据
requestAjax('userSchool/GET/queryPracticeReportChartBySchool', 'get', {
}, function(res) {
if(res.status == 0 && res.data) {
that.lists = res.data.monthNumber;//monthNumber是map的key
//遍历lists集合
that.lists.forEach(function(value,index){
//给Y轴数据赋值
that.options.series[0].data.push(value);
})
//隐藏默认加载动画
lineChart.hideLoading();
// 绘制图表
lineChart.setOption(that.options);
}
});
}
})
})
</script>
</body>
</html>
<html style="height: 100%">
<!--50%半屏,100%全屏-->
<head>
<meta charset="utf-8">
<title>柱状图</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body style="height: 100%; margin: 0">
<!--存放Echarts的DOM 容器,50%半屏显示,100%全屏显示-->
<div id="lineChart" style="height: 50%;"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"> </script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"> </script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"> </script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"> </script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<!--以上是echarts需要导入的js-->
<script src="../../js/mui.min.js"></script>
<script src="../../js/vue.min.js" type="text/javascript"></script>
<script src="../../js/util.js" type="text/javascript"></script>
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function() {
var app = new Vue({
el: '#lineChart',
data: {
lists: [],
// 初始化图表配置
options:{
color: ['#3398DB'], //柱状图颜色
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : [1,2,3,4,5,6,7,8,9,10,11,12], //X轴坐标
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value',
max:100, //Y轴最大值 不写的话自动调节
axisLabel:{formatter:'{value} %'} //给Y轴坐标加%
}
],
series : [
{
name:'数据',
type:'bar', //图表类型
barWidth: '50%', //宽度
data:[] //Y轴数据
}
]
}
},
mounted: function() {
var that = this;
//初始化echarts实例
var lineChart = echarts.init(document.getElementById('lineChart'));
//默认加载动画
lineChart.showLoading();
//后台获取数据
requestAjax('userSchool/GET/queryPracticeReportChartBySchool', 'get', {
}, function(res) {
if(res.status == 0 && res.data) {
that.lists = res.data.monthNumber;//monthNumber是map的key
//遍历lists集合
that.lists.forEach(function(value,index){
//给Y轴数据赋值
that.options.series[0].data.push(value);
})
//隐藏默认加载动画
lineChart.hideLoading();
// 绘制图表
lineChart.setOption(that.options);
}
});
}
})
})
</script>
</body>
</html>