echarts矩形树图treemap初体验

效果图如下

1、封装treeMap （treemap.vue）

1.  
   <template>
2.  
   <div :class="className" :style="{ height: height, width: width }" />
3.  
   </template>
4.  
    
5.  
   <script>
6.  
   // 按需引入 引入 ECharts 主模块
7.  
   // var echarts = require('echarts/lib/echarts'
8.  
   // 引入提示框和标题组件
9.  
   require('echarts/lib/component/tooltip')
10.  
    require('echarts/lib/component/title')
11.  
    //格式化echarts数据
12.  
    const formatUtil = echarts.format
13.  
    export default {
14.  
    props: {
15.  
    className: {
16.  
    type: String,
17.  
    default: 'chart',
18.  
    },
19.  
    width: {
20.  
    type: String,
21.  
    default: '100%',
22.  
    },
23.  
    height: {
24.  
    type: String,
25.  
    default: '60vh',
26.  
    },
27.  
    // 父组件传递过来的图表数据
28.  
    chartData: {
29.  
    type: Array,
30.  
    },
31.  
    },
32.  
    data() {
33.  
    return {
34.  
    // Echarts实例
35.  
    chart: null,
36.  
    }
37.  
    },
38.  
    watch: {
39.  
    /* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
40.  
    chartData: {
41.  
    immediate: true,
42.  
    deep: true,
43.  
    handler(newVal, oldVal) {
44.  
    if (this.chartData !== oldVal) {
45.  
    this.setOptions(newVal)
46.  
    this.chartData = newVal
47.  
    }
48.  
    },
49.  
    },
50.  
    },
51.  
    mounted() {
52.  
    /* 图表初始化 */
53.  
    this.$nextTick(() => {
54.  
    this.initChart()
55.  
    })
56.  
    },
57.  
    created() {},
58.  
    beforeDestroy() {
59.  
    if (!this.chart) {
60.  
    return
61.  
    }
62.  
    /* 释放图表实例 */
63.  
    this.chart.dispose()
64.  
    /* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */
65.  
    this.chart = null
66.  
    },
67.  
    methods: {
68.  
    initChart() {
69.  
    this.chart = echarts.init(this.$el)
70.  
    this.setOptions(this.chartData)
71.  
    },
72.  
    setOptions({} = {}) {
73.  
    // 重新定义数据（这里我的数据需要自己格式化，你们根据需要去做，如果自己的数据已经是[{'key:'',value:''}，{'key:'',value:''}]，则可以忽略这一步）
74.  
    var dataList = this.chartData
75.  
    // 转换为['key':'value','key':'value',]形式
76.  
    var dataObj = Object.assign(...dataList)
77.  
    // 重新拼接为[{'key:'',value:''}，{'key:'',value:''}]格式
78.  
    var serviceData = Object.entries(dataObj).map(([name, value]) => ({
79.  
    name,
80.  
    value,
81.  
    }))
82.  
     
83.  
    this.chart.setOption(
84.  
    {
85.  
    //这一步是图表上显示数字的样式
86.  
    label: {
87.  
    formatter: function (info) {
88.  
    var value = info.value
89.  
    var treePathInfo = info.treePathInfo
90.  
    var treePath = []
91.  
    var a = info.treeAncestors[0].value
92.  
    for (var i = 1; i < treePathInfo.length; i ) {
93.  
    treePath.push(treePathInfo[i].name)
94.  
    }
95.  
    return [formatUtil.encodeHTML(treePath.join('/')) ':' ((value / a) * 100).toFixed(2) ' %'].join('')
96.  
    },
97.  
    },
98.  
    //鼠标悬停时显示的样式
99.  
    tooltip: {
100.  
     formatter: function (info) {
101.  
     var value = info.value
102.  
     var treePathInfo = info.treePathInfo
103.  
     var treePath = []
104.  
     var a = info.treeAncestors[0].value
105.  
     for (var i = 1; i < treePathInfo.length; i ) {
106.  
     treePath.push(treePathInfo[i].name)
107.  
     }
108.  
     return [
109.  
     '<div class="tooltip-title">' formatUtil.encodeHTML(treePath.join('/')) '</div>',
110.  
     '占比: ' ((value / a) * 100).toFixed(2) ' %' '<br>',
111.  
     '总量: ' value,
112.  
     ].join('')
113.  
     },
114.  
     },
115.  
     series: [
116.  
     {
117.  
     type: 'treemap',
118.  
     data: serviceData,
119.  
     },
120.  
     ],
121.  
     },
122.  
     true //在数据发生更新时，刷新echart
123.  
     )
124.  
     },
125.  
     },
126.  
     }
127.  
     </script>
128.  
      

 2.页面中使用treemap（index.vue）

1.  
   //data:[]，请求时获取数据，动态赋值给this.data
2.  
   <tree-map :chartData="data" />

这篇好文章是转载于：学新通技术网