Ehcarts饼图下钻实现

 首先说下原理吧，其实就是给数据重新赋值，然后重新刷新饼图而已

效果如下：

点击时提示

然后刷新数据，显示第二层数据

如果在第二层点击，则将数据重新赋值为第一层的，然后刷新

源码如下：

let data = [
    {name:"杭州-余杭",value:12},
    {name:"杭州-萧山",value:23},
    {name:"杭州-滨江",value:32},
    {name:"江苏",value:23}
]
// console.log(data)

let split = []
data.map(item=>{
    let query = {
        //-前的内容，即城市
        name: item.name.split('-')[0] == "杭州" ? item.name.split('-')[0] : item.name,
        //-后的内容，即城区
        unit: item.name.split('-')[0] == "杭州" ? item.name.split('-')[1] : item.name,
        value: item.value,
        level: 1
    }
    split.push(query)
})
console.log("刚开始遍历,城市和区域分离",split)

let hzAll = []
split.map(item=>{
    if(item.name == "杭州"){
        let query = {
            name:item.unit,
            value:item.value,
            level:2
        }
        hzAll.push(query)
    }
})
console.log("杭州下所有",hzAll)

let y = []
let c = {name:"",value:0,level:1}
y.push(c)
// y.name = "杭州"
// y.value = 0
for(i = 0;i<split.length;i++){
    // console.log(e[i].name)
    if(split[i].name == "杭州"){
        y[0].name = split[i].name
        y[0].value = y[0].value + split[i].value
    }
}
// console.log("杭州",y)

y.push(split[split.length-1])
console.log("杭州",y)


  // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

  // 指定图表的配置项和数据
var option = {
    title: {
    text: "主标题",
    subtext: "副标题",
    left: 'center'
    },
    tooltip: {
    trigger: 'item'
    },
    legend: {
    orient: 'vertical',
    left: 'left'
    },
    series: [
    {
        name: '区域',
        type: 'pie',
        radius: '50%',
        data:y,//数据
        emphasis: {
        itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
        }
    }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

myChart.on('click', function (event) {
    console.log(event,"事件")
    //如果在第一层，并且名字等于杭州
    if(event.data.level == 1 && event.data.name == "杭州"){
        alert("杭州，可以下钻")
        // console.log(option.series[0].data,"数据",hzAll,"杭州内全部")
        option.series[0].data = hzAll
        myChart.setOption(option)
    }
    //如果在第二层，则返回上层
    else if(event.data.level == 2){
        alert("返回上层！")
        option.series[0].data = y
        myChart.setOption(option)
    }
    //如果在第一层或者别的情况
    else{
        alert("此数据没有下钻！")
        option.series[0].data = y
        myChart.setOption(option)
    }
})

核心在于这一句了，给原有数据赋值，然后重新setOption；

至于onClick里面的条件，可以自行修改，楼主这里只是简单判断一下名称

option.series[0].data = hzAll; myChart.setOption(option)