echarts 树形图 基于vue

效果如图

父组件

<template>
  <div>
    <tree-chart></tree-chart>
  </div>
</template>
<script>
import treeChart from "@/views/my_components/charts/treeChart";
export default {
  components: { treeChart },
  data() {
    return {
    };
  },
  created() {
  },
  methods: {
  },
};
</script>

子组件

<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'

const animationDuration = 6000;

export default {
  //   mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "500px",
    },
    // chartData: {
    //   type: Object,
    //   required: true
    // }
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    setTimeout(() => {
      this.initChart();
    }, 400);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({
      seriesData,
      chartTitleText,
      chartTitleColor,
      chartTitleFontSize,
    } = {}) {
      this.chart.setOption({
        // title: {
        //   text: "手机品牌",
        //   subtext: "子标题",
        //   textStyle: {
        //     color: chartTitleColor || "#333", // 文字颜色
        //     fontSize: chartTitleFontSize || 14, // 文字大小
        //   },
        // },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        series: [
          {
            type: "tree",
            orient: "vertical",
            top: "10%",
            left: "8%",
            bottom: "22%",
            right: "20%",
            edgeShape: "polyline", //折线
            lineStyle: {
              width: 1,
              // color: "#000",
              // type: "solid", // 'curve'|'broken'|'solid'|'dotted'|'dashed'
            },
            label: {
              //每个节点的label
              backgroundColor: "#F0F2F5",
              position: "left",
              verticalAlign: "middle",
              align: "right",
            },
            data: [
              {
                name: "手机",
                value: 6,
                symbolSize: [70, 70],//图片大小
                symbol:'image://' + require('@/assets/logo/logo.png'),// 使用本地图片
                  // "image://https://iconfont.alicdn.com/t/1d7c8230-c6f9-4698-8224-3a575fe1fb43.png",
                // itemStyle: {
                //     normal: {
                //         label: {
                //             show: false
                //         }
                //     }
                // },
                children: [
                  {
                    name: "小米",
                    value: 4,
                    symbol:
                      "image://https://iconfont.alicdn.com/t/1d7c8230-c6f9-4698-8224-3a575fe1fb43.png",
                    symbolSize: [60, 60],
                    children: [
                      {
                        name: "小米1",
                        symbol: "circle",
                        symbolSize: 20,
                        value: 4,
                        itemStyle: {
                          normal: {
                            color: "#fa6900",
                            label: {
                              show: true,
                              position: "right",
                            },
                          },
                          emphasis: {
                            label: {
                              show: false,
                            },
                            borderWidth: 0,
                          },
                        },
                      },
                      {
                        name: "小米2",
                        value: 4,
                        symbol: "circle",
                        symbolSize: 20,
                        itemStyle: {
                          normal: {
                            label: {
                              show: true,
                              position: "right",
                              formatter: "{b}",
                            },
                            color: "#fa6900",
                            borderWidth: 2,
                            borderColor: "#cc66ff",
                          },
                          emphasis: {
                            borderWidth: 0,
                          },
                        },
                      },
                      {
                        name: "小米3",
                        value: 2,
                        symbol: "circle",
                        symbolSize: 20,
                        itemStyle: {
                          normal: {
                            label: {
                              position: "right",
                            },
                            color: "#fa6900",
                            brushType: "stroke",
                            borderWidth: 1,
                            borderColor: "#999966",
                          },
                          emphasis: {
                            borderWidth: 0,
                          },
                        },
                      },
                    ],
                  },
                  {
                    name: "苹果",
                    symbol:
                      "image://http://www.viastreaming.com/images/apple_logo2.png",
                    symbolSize: [60, 60],
                    value: 4,
                  },
                  {
                    name: "华为",
                    symbol:
                      "image://https://iconfont.alicdn.com/t/1d7c8230-c6f9-4698-8224-3a575fe1fb43.png",
                    symbolSize: [60, 60],
                    value: 2,
                  },
                  {
                    name: "联想",
                    symbol:
                      "image://https://iconfont.alicdn.com/t/1d7c8230-c6f9-4698-8224-3a575fe1fb43.png",
                    symbolSize: [60, 60],
                    value: 2,
                  },
                ],
              },
            ],
          },
        ],
      });
    },
  },
};
</script>