在写eacharts项目当中，会遇到一种叫下钻的功能，举个例子，像饼图的话，假如像这样的：
首先看到这张饼图，有包子、鞋子、衣服、书籍、手机五种品类，那么我现在点击对应的饼图部分。 比如说，点击手机，结果如下图所示：
没错，他就到了手机品类下面的具体分类，小米、苹果、华为这些子级品类。所以下钻其实可以理解为总览页面点击详情进入到详情页。可能细心的小伙伴发现了，其实我就是把官网的例子稍微改了下，所以代码整体结构还是比较清晰易懂的。
那么具体的代码实现如下：
<template>
<div class="ring" id="ring"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
this.$nextTick(()=>{
this.initRing()
})
},
data() {
return {
ringChart: null,
ringArr: [
{
value: 1048,
name: '包子',
child: [
{
value: 1000,name: '莲蓉包'
},
{
value: 48, name: '叉烧包'
}
]
},
{
value: 735,
name: '鞋子',
child: [
{
value: 500, name: '运动鞋'
},
{
value: 200, name: '帆布鞋'
},
{
value: 35, name: '老爹鞋'
}
]
},
{
value: 580,
name: '衣服',
child:[
{
value: 100, name: '卫衣'
},
{
value: 200, name: '百褶裙'
},
{
value: 50, name: '衬衫'
},
{
value: 200, name: '洛丽塔'
},
{
value: 30, name: '牛仔裤'
}
]
},
{
value: 484,
name: '书籍',
child: [
{
value: 400,
name: '古诗词'
},
{
value: 84,
name: '英语作文'
}
]
},
{
value: 300,
name: '手机',
child: [
{
value: 100,
name: '小米'
},
{
value: 50,
name: '苹果'
},
{
value: 150,
name: '华为'
}
]
}
]
}
},
methods: {
initRing () {
this.ringChart = echarts.init(document.querySelector('#ring'))
let option = {
tooltip: {
trigger: 'item'
},
legend: {
bottom: '5%',
left: 'center'
},
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
// fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.ringArr
}
]
}
this.ringChart.setOption(option)
let that = this
this.ringChart.on('click',function (params) {
let childOption = {
series:[{
data: params.data.child
}]
}
that.ringChart.setOption(childOption)
})
}
}
}
</script>
<style>
.ring {
width: 800px;
height: 800px;
}
</style>
点击饼图部分的时候，使用cick点击事件，拿到params参数，该参数的data属性就是点击部分的值，然后拿到data下面的child数组，也就是子级数据，给饼图重新赋值进去setOption就可以了。非常简单。不过这个版本没有告诉你怎么返回，以及如果有多层嵌套的情况下怎么样有的下钻一层有的下转两层。下一篇文章再来告诉你……
希望对你有所帮助，以上
