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

vue中实习ECharts的柱状图

猜你喜欢