[運行一下](http://www.shouce.ren/study/api/s/7097)
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖形展示</title>
</head>
<body>
<div class="detail-section">
<div id="canvas">
</div>
</div>
<script src="http://g.tbcdn.cn/bui/acharts/1.0.32/acharts-min.js"></script>
<!-- https://g.alicdn.com/bui/acharts/1.0.29/acharts-min.js -->
<script type="text/javascript">
var chart = new AChart({
theme : AChart.Theme.SmoothBase,
id : 'canvas',
width : 950,
height : 500,
plotCfg : {
margin : [50,50,80] //畫板的邊距
},
xAxis : {
categories: [
'Tokyo',
'Jakarta',
'New York',
'Seoul',
'Manila',
'Mumbai',
'Sao Paulo',
'Mexico City',
'Dehli',
'Osaka',
'Cairo',
'Kolkata',
'Los Angeles',
'Shanghai',
'Moscow',
'Beijing',
'Buenos Aires',
'Guangzhou',
'Shenzhen',
'Istanbul'
],
labels : {
label : {
rotate : -45,
'text-anchor' : 'end'
}
}
},
yAxis : {
min : 0
},
seriesOptions : { //設置多個序列共同的屬性
/*columnCfg : { //公共的樣式在此配置
}*/
},
tooltip : {
valueSuffix : '￥'
},
series : [ {
name: 'Africa',
type : 'column',
autoWidth : false,
columnWidth : 30,
data: [34.4, 21.8, {y : 20.1,attrs : {fill : '#ff0000'}}, 20, 19.6, 19.5, 19.1, 18.4, 18,
17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
11.7, 11.2],
labels : { //顯示的文本信息
label : {
rotate : -90,
y : 10,
'fill' : '#fff',
'text-anchor' : 'end',
textShadow: '0 0 3px black',
'font-size' : '14px'
}
}
}]
});
chart.render();
</script>
</body>
</html>
~~~
