在vue中使用echart创建树形图

1.引入echart模块

可以选择全部引入或者只引入所用组件,这里为了方便选择全部引入:

import echarts from 'echarts'

2.定义树形图的data

data() {
      return {
        chartData: {
          //这里参考相关图表的data格式
        }
      }
}

3.定义echart初始化方法

methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById('orgManagement'))
        this.chart.on('contextmenu', params => {
          console.log(params)
          if (params.componentType === 'series') {
              this.selectedOrg = params.data
              this.popoverPanelShow = true
          }else {
            return
          }
        });
        this.chart.setOption({
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
              {
                  type: 'tree',

                  data: [this.chartData],

                  top: '1%',
                  left: '15%',
                  bottom: '1%',
                  right: '20%',

                  symbolSize: 12,

                  label: {
                      normal: {
                          position: 'left',
                          verticalAlign: 'middle',
                          align: 'right',
                          fontSize: 12
                      }
                  },

                  leaves: {
                      label: {
                          normal: {
                              position: 'right',
                              verticalAlign: 'middle',
                              align: 'left'
                          }
                      }
                  },
                  expandAndCollapse: true,
                  animationDuration: 550,
                  animationDurationUpdate: 750
              }
          ]
        })
      },
      hidePopoverPanel(){
        this.popoverPanelShow = false;
      }
    }

4.在编译完成,挂载到页面上时执行初始化

mounted() {
      this.initChart()
    }
}

• 阻止系统contextmenu事件
  在盛放图表的div上加v-click:contextmenu.prevent=""即可
• 关闭页面时清空echart实例

beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    }
}