echarts饼图下钻

echarts饼图下钻

<template>
  <div style="height: 400px">
    <div style="margin-left:40%;margin-top:2%">
      <button id='return-button' @click="returnButtonClick">返回2</button>
    </div>
    <div id="container" style="height: 100%;width: 50%"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'YourComponentName',
  data() {
    return {
      chart: null,
      option: {
        title: {
          text: '饼图下钻',
          left: 'center'
        },

        series: [ // 初始化series数组
          {
            name: '',
            type: 'pie',
            itemStyle: {
              normal: {
                color: '#2ec7c9'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            nameLine: {
              length: 15,
              length2: 5,
            },

            data: [] // 初始化为空数组
          }
        ]
      },
      data: {
        data: [{
          value: 100,
          name: '家具',
          level: 1,
          itemStyle:{
            color: "#86E3CE"
          }
        },
          {
            value: 200,
            name: '电器',
            level: 1,
            itemStyle:{
              color: "#64A4D6"
            }
          },
          {
            value: 300,
            name: '材料',
            level: 1,
            itemStyle:{
              color: "#4675C0"
            }
          },
          {
            value: 120,
            name: '桌子',
            parent: '家具',
            level: 2,
          }, {
            value: 180,
            name: '椅子',
            parent: '家具',
            level: 2,
          }, {
            value: 220,
            name: '床',
            parent: '家具',
            level: 2,
          }, {
            value: 320,
            name: '沙发',
            parent: '家具',
            level: 2,
          }, {
            value: 320,
            name: '空调',
            parent: '电器',
            level: 2,
          }, {
            value: 390,
            name: '冰箱',
            parent: '电器',
            level: 2,
          }, {
            value: 190,
            name: '电视机',
            parent: '电器',
            level: 2,
          }, {
            value: 110,
            name: '电视机1',
            parent: '电视机',
            level: 3,
          }, {
            value: 150,
            name: '电视机2',
            parent: '电视机',
            level: 3,
          },
        ]
      },

    };
  },
  mounted() {
    this.chart = echarts.init(document.getElementById('container'));
    // this.option.xAxis[0].data = this.data.data.filter(item => item.level === 1).map(item => item.name)
    this.option.series[0].data = this.data.data.filter(item => item.level === 1)
    this.chart.setOption(this.option);

    // 点击事件
    this.chart.on('click', (params) => {
      console.log("click=======>", params)
      let currentlevel = params.data.level
      let currentname = params.data.name
      this.renderData(currentlevel + 1, currentname, this.data)
    });
  },
  methods: {
    renderData(level, currentname, data) {
      this.option.title.text = `下钻${level}级`;
      this.option.name= data.data.filter(item => item.level == level && item.parent == currentname).map(item => item.name)

      if (this.option.name.length != 0) {
        this.option.series[0].data = data.data.filter(item => item.level == level && item.parent == currentname)
        this.chart.setOption(this.option, true);
      }
      console.log("this.option.series[0].data=====>", this.option.series[0].data)
    },

    returnButtonClick() {
      // console.log("this.option.series[0].data====>", this.option.series[0].data[0].level)
      console.log("this.option.series[0].data====>", this.option.series[0].data)
      console.log("this.option.series[0].data====>", this.data.data)
      // console.log("this.option.series[0].data====>", this.option.series[0].data[0].parent)
      // console.log("this.option.series[0].data====>", this.option.series[0].data[0])
      // let currentlevel = params.data.level
      // let currentname = params.data.name
      if (this.option.series[0].data[0].parent != undefined) {
        let level = this.option.series[0].data[0].level - 1
        this.option.title.text = `下钻${level}级`;

        // if(this.data.data.filter(item => item.name == this.option.series[0].data[0].parent)[0].parent){}


        let parentname = this.data.data.filter(item => item.name == this.option.series[0].data[0].parent)[0].parent
        console.log("parentname=====>", parentname)

        this.option.series[0].data = this.data.data.filter(item => item.level == level && item.parent == parentname)
        console.log("this.option.series[0].data====>", this.option.series[0].data)
        this.option.name = this.data.data.filter(item => item.level == level && item.parent == parentname).map(item => item.name)


        if (this.option.name != 0) {
          this.chart.setOption(this.option, true);
        }
      }
    }
  }
};
</script>