echarts树图根节点有什么办法隐藏吗

Question

在写一个对应关系,用的树图,现在想把主节点和与主节点相连的线都隐藏了

这是我树图的代码

<template>
  <div :id="chartID" style="width: 100%; height: 150%"></div>
</template>

<script>
import { color } from 'echarts';
import { getUUID } from "../../utils/index";
import flare from "./flare.json";
export default {
  name: "chart_Line",
  data() {
    return {
      chartID: "",
    };
  },
  created() {
    this.chartID = getUUID();
  },
  computed: {
    echarts() {
      return "echarts" + Math.random() * 1;
    },
  },
  props: {
    itmData: {
      type: Array,
      default: () => [
        { name: "user1", value: 88 },
        { name: "41332", value: 79 },
        { name: "user3", value: 64 },
        { name: "user4", value: 61 },
        { name: "user5", value: 55 },
        { name: "user6", value: 40 },
        { name: "user7", value: 38 },
        { name: "user8", value: 31 },
        { name: "user9", value: 23 },
        { name: "user9", value: 12 },
      ],
    },
    grid: {
      type: Object,
      default() {
        //默认数据，没有数剧的情况下启用
        return {
          show: false,
          containLabel: true,
          top: "5%",
          right: "5%",
          bottom: "2%",
          left: "8%",
        };
      },
    },
  },
  watch: {
    itmData: {
      handler(val, oval) {
        this.lineChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.lineChart();
  },
  methods: {
    lineChart: function () {
      const chartObj = this.$echarts.init(
        document.getElementById(this.chartID)
      );

      chartObj.showLoading();

      let slineStyle = {
        color: "#0000ff",
        borderColor: "#0000ff",
      };
      let sitemStyle = {
        color: "#0000ff",
        borderColor: "#0000ff",
      };
      // flare.children.forEach(function (datum, index) {
      //     index % 2 === 0 && (datum.collapsed = true);
      //     datum.itemStyle = sitemStyle;
      //     datum.lineStyle = slineStyle;

      //     if(datum.children.length > 0){
      //         datum.children.forEach(function (datumB) {
      //             datumB.itemStyle = sitemStyle;
      //             datumB.lineStyle = slineStyle;
      //             if(datumB.children.length > 0){
      //                 datumB.children.forEach(function (datumC) {
      //                     datumC.itemStyle = sitemStyle;
      //                     datumC.lineStyle = slineStyle;
      //                     // if(datumC.children.length > 0){

      //                     // }
      //                 });
      //             }
      //         });

      //     }
      // });

      console.log('333333333333333',this.itmData);

      var option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        series: [
          {
            type: "tree",
            data: this.itmData,
            top: "1%",
            left: "15%",
            bottom: "1%",
            right: "7%",
            symbolSize: 7,
            orient: 'RL',
            edgeShape: 'polyline',
            initialTreeDepth: 3,
            label: {
              position: "right",
              verticalAlign: "middle",
              align: "left",
              fontSize: 12,
              color: "#ddd",
            },
            leaves: {
              label: {
                position: "left",
                verticalAlign: "middle",
                align: "right",
                color: "#ddd",
              },
            },
            emphasis: {
              focus: "descendant",
            },
            expandAndCollapse: true,
            animationDuration: 750,
            animationDurationUpdate: 950,
          },

        ],
      };


      chartObj.setOption(option);
      chartObj.hideLoading();
      window.onresize = function () {
        chartObj.resize();
      };
    },
  },
};
</script>

<style>
</style>

Answer 1

你把连线颜色设置成与背景色一样即可