vue中實習ECharts的柱狀圖
阿新 • • 發佈：2019-02-07
<!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>