VUE中实习ECharts的饼状图

<!DOCTYPE html>
<html style="height: 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;" >


<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>


<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: {
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>

VUE中实习ECharts的饼状图

猜你喜欢