前言說明：因工作需要用到圖統計數據作爲展示，用到echarts3（你也可以考慮用阿里的AntV:http://antv.alipay.com/zh-cn/index.html,或者國外的一些圖形插件）。發現官方文檔只有根據屬性查詢，沒有根據圖的類型文檔說明。以下重點寫的例子主要是官方示例中沒有提及，但是我工作中用到了的示例。
1. 準備工作
到echarts3（注意是echarts3，不是echarts2）官方下載echarts或者自定義下載，下載地址：http://echarts.baidu.com/download.html
2. 示例及說明
代碼中未說明的配置項，可以在官網查看。還有很多配置屬性，示例中並沒有使用到。配置文檔地址：http://echarts.baidu.com/option.html#tooltip.trigger
eg1效果圖：
eg1：基本示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<div id="pie1" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('pie1'));
option1 = {
title:{
text:'按類型統計',
top:'bottom',
left:'center',
textStyle:{
fontSize: 14,
fontWeight: '',
color: '#333'
},
},//標題
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"，
/*formatter:function(val){ //讓series 中的文字進行換行
console.log(val);//查看val屬性，可根據裏邊屬性自定義內容
var content = var['name'];
return content;//返回可以含有html中標籤
},*/ //自定義鼠標懸浮交互信息提示，鼠標放在餅狀圖上時觸發事件
},//提示框，鼠標懸浮交互時的信息提示
legend: {
show: false,
orient: 'vertical',
x: 'left',
data: ['50%-學生', '25%-老師', '25%-家長']
},//圖例屬性，以餅狀圖爲例，用來說明餅狀圖每個扇區，data與下邊series中data相匹配
graphic:{
type:'text',
left:'center',
top:'center',
style:{
text:'用戶統計\n'+'100', //使用“+”可以使每行文字居中
textAlign:'center',
font:'italic bolder 16px cursive',
fill:'#000',
width:30,
height:30
}
},//此例餅狀圖爲圓環中心文字顯示屬性，這是一個原生圖形元素組件，功能很多
series: [
{
name:'用戶統計',//tooltip提示框中顯示內容
type: 'pie',//圖形類型，如餅狀圖，柱狀圖等
radius: ['35%', '65%'],//餅圖的半徑，數組的第一項是內半徑，第二項是外半徑。支持百分比，本例設置成環形圖。具體可以看文檔或改變其值試一試
//roseType:'area',是否顯示成南丁格爾圖，默認false
itemStyle: {
normal:{
label:{
show:true,
textStyle:{color:'#3c4858',fontSize:"18"},
formatter:function(val){ //讓series 中的文字進行換行
return val.name.split("-").join("\n");}
},//餅圖圖形上的文本標籤，可用於說明圖形的一些數據信息，比如值，名稱等。可以與itemStyle屬性同級，具體看文檔
labelLine:{
show:true,
lineStyle:{color:'#3c4858'}
}//線條顏色
},//基本樣式
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠標放在區域邊框顏色
textColor:'#000'
}//鼠標放在各個區域的樣式
},
data: [
{value: 50, name: '50%-學生'},
{value: 25, name: '25%-老師'},
{value: 25, name: '25%-家長'},
],//數據，數據中其他屬性，查閱文檔
color: ['#51CEC6','#FFB703','#5FA0FA'],//各個區域顏色
},//數組中一個{}元素，一個圖，以此可以做出環形圖
],//系列列表
};
myChart1.setOption(option1);
</script>
</head>
</html>
eg2效果：
eg2:內嵌圖及添加點擊事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<div id="pie1" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('pie1'));
option1 = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name:'學段分類統計',
type: 'pie',
radius: [0, '35%'],
label: {
normal: {
position: 'inner'
}
},//扇形區域內顯示文字
data:[
{value:25, name:'學生'},
{value:35, name:'教師'},
{value:45, name:'家長'}
],
color: ['#10EFE0','#EF42A4','#FF8F03']
},
{
name:'角色分類統計',
type: 'pie',
radius: ['35%', '75%'],
labelLine: {
normal: {
show: true,
}
},
data:[
{ value: 10, name: '學生（小學）' },
{ value: 10, name: '學生（初中）' },
{ value: 5, name: '學生（高中）' },
{ value: 15, name: '教師（小學）' },
{ value: 15, name: '教師（初中）' },
{ value: 5, name: '教師（高中）' },
{ value: 20, name: '家長（小學）' },
{ value: 10, name: '家長（初中）' },
{ value: 15, name: '家長（高中）' },
],
color:['#51CEC6','#6AE2D9','#96F5EF','#EF87C2','#F79DD0','#FFC8E7','#FFB703','#FFCD50','#FFE296']
},
],
};
myChart1.setOption(option1);
//添加點擊事件，可以點擊每個區域，其中params爲每個區相關屬性，可以根據該屬性寫各種事件
myChart1.on('click', function(params){
console.log(params);
});
</script>
</head>
</html>
3. 未能實現的一些圖
本人研究一段時間，發現餅狀圖有些功能未能實現。echarts3對分割後每一個扇區似乎沒有再分割的屬性了（如下圖）。如果哪位大神研究出來了下圖示例，還煩請發一個demo給我，謝謝，互相學習。郵箱：[email protected]
