Echarts版本：2.2.7
具體思路，通過對餅狀圖對象注冊ecConfig.EVENT.PIE_SELECTED事件，對餅狀圖點擊的塊進行判斷，根據需求改變series中的對象以及對象中的數據，從而進行改變餅狀圖的層的展示，如下圖所示（數據來自官方網站），點擊同心圓最里層的不同部分會顯示不同的數據
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#platoBox {
width: 600px;
height: 600px;
}
</style>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
window.onload = function() {
// 路徑配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require([
'echarts',
'echarts/chart/pie'
], function(ec) {
var dom = document.getElementById("platoBox");
var myChart = ec.init(dom);
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直達', '營銷廣告', '搜索引擎', '郵件營銷', '聯盟廣告', '視頻廣告', '百度', '谷歌', '必應', '其他']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: false,
series: [{
name: '訪問來源',
type: 'pie',
selectedMode: 'single',
radius: [0, 70],
// for funnel
x: '20%',
width: '40%',
funnelAlign: 'right',
max: 1548,
itemStyle: {
normal: {
label: {
position: 'inner'
},
labelLine: {
show: false
}
}
},
data: [
{ value: 335, name: '直達' },
{ value: 679, name: '營銷廣告' },
{ value: 1548, name: '搜索引擎'}
]
},
{
name: '訪問來源',
type: 'pie',
radius: [100, 140],
// for funnel
x: '60%',
width: '35%',
funnelAlign: 'left',
max: 1048,
data: [
]
}
]
};
myChart.setOption(option);
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.PIE_SELECTED, function(param) {
var selected = param.selected;
var serie;
for (var idx in selected) { //idx指示具體是哪一個同心圓，其中最里面的同心圓是'0',注意該值是字符串
serie = option.series[idx];
for (var i = 0, l = serie.data.length; i < l; i++) {
//i代表同一個同心圓第幾部分，即series中data的第幾條數據
if (selected[idx][i]) {
//通過對idx和i值的判斷，可以確定點擊的是哪一部分，然后對option進行操作
if (idx === "0") {
if (i === 0) {
option.series[1].data = [{ value: 335, name: '直達' }];
} else if (i === 1) {
option.series[1].data = [
{ value: 310, name: '郵件營銷' },
{ value: 234, name: '聯盟廣告' },
{ value: 135, name: '視頻廣告' }
];
} else{
option.series[1].data = [
{ value: 1048, name: '百度' },
{ value: 251, name: '谷歌' },
{ value: 147, name: '必應' },
{ value: 102, name: '其他' }
];
}
}
}
}
}
myChart.setOption(option, true);
})
})
}
</script>
</head>
<body>
<div id="platoBox">
</div>
</body>
</html>