echarts饼图下钻（下钻+可返回版本）

书接上回，这次加个可以返回的版本，还是上次那个饼图。

这次加个返回的文本，点击就可以返回上一层的数据。就加了一个graphic的属性配置和该属性下的点击事件。 代码如下：

<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: '华为'
            }
          ]
        }
      ],
      option: {}
    }
  },
  methods: {
    initRing () {
      this.ringChart = echarts.init(document.querySelector('#ring'))
      this.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(this.option)
      this.ringChart.on('click', (params)=> {
        if (params.data) {
          if (params.data.child) {
            this.ringChart.setOption({
              series:[{
                data: params.data.child
              }],
              // 返回按钮
              graphic: [
                {
                  type: 'text',
                  right: '3%',
                  top: '3%',
                  style: {
                    text: '返回',
                    fontSize: 16,
                    fill: 'red'
                  },
                  onclick: ()=> {
                    this.ringChart.setOption(this.option)
                  }
                }
              ],
            })
          }
        }
      })
    }
  }
}
</script>

<style>
.ring {
  width: 800px;
  height: 800px;
  border: 1px solid #000;
}

</style>

点击即可返回上一层数据。当然，如果不用graphic属性的话，也可以自己加个按钮使用绝对定位和相对定位把按钮贴在饼图右上角，在配上点击事件，即可。这个代码如下：

<template>
  <section class="ring-container">
    <div class="ring" id="ring"></div>
    <button v-show="showButton" class="ring-button" @click="onBack">返回</button>
  </section>
</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: '华为'
            }
          ]
        }
      ],
      showButton: false,
      option: {}
    }
  },
  methods: {
    initRing () {
      this.ringChart = echarts.init(document.querySelector('#ring'))
      this.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(this.option)
      this.ringChart.on('click', (params)=> {
        if (params.data) {
          if (params.data.child) {
            this.ringChart.setOption({
              series:[{
                data: params.data.child
              }],
            })
            this.showButton = true
          }
        }
      })
    },
    onBack () {
      this.ringChart.setOption(this.option)
      this.showButton = false
    }
  }
}
</script>

<style>
.ring-container {
  position: relative;
}
.ring {
  width: 800px;
  height: 800px;
  border: 1px solid #000;
}
.ring-button {
  position: absolute;
  right: 4%;
  top: 5%;
}



</style>

这样的话，在页面加载完成后，点击饼图下钻到子级，返回按钮出现，点击返回按钮，饼图返回且按钮消失。

如果希望有的下钻一层有的两层，有这种需求的可以在最外层加个字段，times或者downNum给定数字，当点击的时候，拿到这个字段做下判断几层，然后拿到到对应的子级数据重新赋值在setOption就可以了。

以上，希望对你有帮助。