<!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.plusReady(function() {
var app = new Vue({
el: '#lineChart',
data: {
opinionData: [],
str:[],
options:{
title : {
text: '饼状图',
subtext: '动态赋值',
x:'center' //居中
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['实际提交','未提交'] //左上角示例,文字需与series.data中的name值相同,不相同的则不展示
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '45%', // 半径
center: ['50%', '50%'], //位置,左右,上下
data:[],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
},
mounted: function() {
var that = this;
//初始化echarts实例
var lineChart = echarts.init(document.getElementById('lineChart'));
//默认加载动画
lineChart.showLoading();
//后台获取数据
requestAjax('userSchool/GET/queryPracticeSummaryChartBySchool', 'get', {
}, function(res) {
if(res.status == 0 && res.data) {
var index = res.data;
var i = {};
i.value = index;
i.name = "实际提交";
var j = {};
j.value = 100-index;
j.name = "未提交";
//渲染数据
that.options.series[0].data.push(i);
that.options.series[0].data.push(j);
//隐藏默认加载动画
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();
var app = new Vue({
el: '#lineChart',
data: {
opinionData: [],
str:[],
options:{
title : {
text: '饼状图',
subtext: '动态赋值',
x:'center' //居中
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['实际提交','未提交'] //左上角示例,文字需与series.data中的name值相同,不相同的则不展示
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '45%', // 半径
center: ['50%', '50%'], //位置,左右,上下
data:[],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
},
mounted: function() {
var that = this;
//初始化echarts实例
var lineChart = echarts.init(document.getElementById('lineChart'));
//默认加载动画
lineChart.showLoading();
//后台获取数据
requestAjax('userSchool/GET/queryPracticeSummaryChartBySchool', 'get', {
}, function(res) {
if(res.status == 0 && res.data) {
var index = res.data;
var i = {};
i.value = index;
i.name = "实际提交";
var j = {};
j.value = 100-index;
j.name = "未提交";
//渲染数据
that.options.series[0].data.push(i);
that.options.series[0].data.push(j);
//隐藏默认加载动画
lineChart.hideLoading();
// 绘制图表
lineChart.setOption(that.options);
}
});
}
})
})
</script>
</body>
</html>