[運行一下](http://www.shouce.ren/study/api/s/7110)
~~~
<!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,
title : {
text : '瀏覽器分布圖'
},
legend : null ,//不顯示圖例
seriesOptions : { //設置多個序列共同的屬性
pieCfg : {
allowPointSelect : true,
labels : {
distance : 40,
label : {
//文本信息可以在此配置
},
renderer : function(value,item){ //格式化文本
return value + ' ' + (item.point.percent * 100).toFixed(2) + '%';
}
}
}
},
tooltip : {
pointRenderer : function(point){
return (point.percent * 100).toFixed(2)+ '%';
}
},
series : [{
type: 'pie',
name: 'Browser share',
legendType : 'circle', //顯示在legend上的圖形
legend : {
position : 'bottom', //位置
back : null, //背景清空
spacingX : 15, //增加x方向間距
itemCfg : { //子項的配置信息
label : {
fill : '#999',
'text-anchor' : 'start',
cursor : 'pointer'
}
}
},
events : {
itemclick : function (ev) {
var point = ev.point
//item = ev.item, //點擊的項
console.log(point); //執行一系列操作
},
//選中事件
itemselected : function(ev){
console.log(ev.point.xValue + ' selected');
},
//取消選中
itemunselected : function(ev){
console.log(ev.point.xValue + ' unselected');
}
},
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
chart.render();
</script>
</body>
</html>
~~~
