Echart图表自定义下钻功能(带返回上一级)的实现demo

Dear 丶 2022-12-17 01:15 429阅读 0赞

### 1.效果图 ###

初始类别，一级分类![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70][]

点击行业分类后，进入二级分类，右下角有返回上一级![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70 1][]

点击寄递行业中心1，进入三级分类，右下角有返回上一级     ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70 2][]

### 2.icon路径：[https://wudan.blog.csdn.net/article/details/104039526][https_wudan.blog.csdn.net_article_details_104039526] ###

### 3.完整代码 ###

<template>
      <div :class="className" :style="{ height: height, width: width }" />
    </template>
    
    <script>
    import echarts from "echarts";
    require("echarts/theme/macarons"); // echarts theme
    import resize from "../mixins/resize"; // 动态自适应
    
    export default {
      mixins: [resize],
      props: {
        className: {
          type: String,
          default: "chartAnalysisPie",
        },
        width: {
          type: String,
          default: "100%",
        },
        height: {
          type: String,
          default: "300px",
        },
      },
      data() {
        return {
          chart: null,
          mockData: {     //初始数据
            name: "工厂分类",
            values: [
              { value: 335, name: "寄递行业" },
              { value: 310, name: "服装" },
              { value: 234, name: "餐饮 " },
              { value: 135, name: "建材" },
            ],
          },
          isShowBack: false,   // 是否显示返回上一级
        };
      },
      mounted() {
        this.$nextTick(() => {
          this.initChart();
        });
      },
      beforeDestroy() {
        if (!this.chart) {
          return;
        }
        this.chart.dispose();
        this.chart = null;
      },
      methods: {
        initChart(item) {
          let that = this;
          // , "macarons"
          this.chart = echarts.init(this.$el);
    
          this.chart.setOption({
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            legend: {
              orient: "vertical",
              left: 15,
              itemWidth: 14,
              textStyle: {
                color: "rgba(132, 214, 255, 1)",
              },
            },
            toolbox: {
              right: 40,
              bottom: 20,
              feature: {
                myTool1: {
                  show: that.isShowBack,
                  title: "返回上一级",
    
                  icon:
                    "path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z",
                  // 点击返回事件
                  onclick: function (params) {
                    // alert("myToolHandler1");
                    // 点击返回时判断此次的类别  此次类别为二级类别（"工作中心分类"），将其赋值为一
                    // 级类别的数据，将其返回上一层
                    if (params.option.series[0].name == "工作中心分类") {
                      that.chart.dispose();
                      that.chart = null;
                      that.mockData = {
                        name: "工厂分类",
                        values: [
                          { value: 335, name: "寄递行业" },
                          { value: 310, name: "服装" },
                          { value: 234, name: "餐饮 " },
                          { value: 135, name: "建材" },
                        ],
                      };
                      that.isShowBack = false;
                      that.initChart();
                    } else if (params.option.series[0].name == "工位分类") {
                      that.chart.dispose();
                      that.chart = null;
                      that.mockData = {
                        name: "工作中心分类",
                        values: [
                          { value: 135, name: "寄递行业中心" },
                          { value: 10, name: "服装中心" },
                          { value: 202, name: "餐饮中心" },
                          { value: 95, name: "建材中心" },
                          { value: 55, name: "测试中心" },
                        ],
                      };
    
                      that.initChart();
                    }
                    console.log(params.option.series[0].name);
                    console.log(params.option.series[0].data);
                    // params.option.series[0].name = '工作中心分类'
                    // params.option.series[0].data = [
                    //   { value: 135, name: "寄递行业中心" },
                    //   { value: 10, name: "服装中心" },
                    //   { value: 202, name: "餐饮中心" },
                    //   { value: 95, name: "建材中心" },
                    // ];
                  },
                },
              },
            },
            series: [
              {
                name: that.mockData.name,
                type: "pie",
                radius: "80%",
                center: ["50%", "50%"],
                data: that.mockData.values,
                label: {
                  position: "inside",
                  formatter: "{c}",
                  // formatter: "{c}件\n{d}%",
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
          // 图表点击事件
          this.chart.on("click", function (params) {
            console.log(params);
            console.log(params.data.name);
            //点击的类别是一级类别，将图表数据赋值二级类别的数据
            if (params.seriesName == "工厂分类") {
              that.chart.dispose();
              that.chart = null;
              that.isShowBack = true;
              that.mockData = {
                name: "工作中心分类",
                values: [
                  { value: 135, name: "寄递行业中心" },
                  { value: 10, name: "服装中心" },
                  { value: 202, name: "餐饮中心" },
                  { value: 95, name: "建材中心" },
                  { value: 55, name: "测试中心" },
                ],
              };
              that.initChart();
            } else if (params.seriesName == "工作中心分类") {
              that.chart.dispose();
              that.chart = null;
              that.isShowBack = true;
              that.mockData = {
                name: "工位分类",
                values: [
                  { value: 51, name: "寄递行业工位" },
                  { value: 3, name: "服装工位" },
                  { value: 19, name: "餐饮工位" },
                  { value: 21, name: "建材工位" },
                ],
              };
              that.initChart();
            }
          });
        },
      },
    };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70]: /images/20221123/be72ee8a9ff94895a5360235ca08e863.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70 1]: /images/20221123/bc96c9c6dbe14db48b34cf37a769a8c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70 2]: /images/20221123/e0b2c1dbd57e406ea3446c337237ca91.png
[https_wudan.blog.csdn.net_article_details_104039526]: https://wudan.blog.csdn.net/article/details/104039526