echarts树图关系图

芒果63

已于 2023-07-25 17:02:30 修改

阅读量555

点赞数 1

分类专栏： Echarts踩坑指南文章标签： echarts 前端 javascript jquery vue.js

于 2023-07-21 11:17:41 首次发布

本文链接：https://blog.csdn.net/m0_49017085/article/details/131847516

版权

文章介绍了如何使用Echarts库创建一个树形图，特别是处理数据量不一致时如何动态调整图表高度，避免数据堆叠。通过设置itemStyle,label等属性定制图表样式，并展示了当数据children.length超过一定阈值时，如何计算并设置图表及子元素的高度，以保证图表的适配性。同时，利用resize方法使图表能够响应窗口尺寸变化。

摘要由CSDN通过智能技术生成

项目场景：

要求实现以上图片展示的样式，用的是echarts

数据格式：

var data = [{
    name: "主节点主节点主节点",
    children: [{
        name: "分节点分节点分节点分节点1",
    }, {
        name: "分节点分节点分节点分节点2",
    }, {
        name: "分节点分节点分节点分节点3",
    }, {
        name: "分节点分节点分节点分节点4",
    }]
}];

实现代码

myChart.showLoading();


var data = [{
    name: "主节点主节点主节点",
    children: [{
        name: "分节点分节点分节点分节点1",
    }, {
        name: "分节点分节点分节点分节点2",
    }, {
        name: "分节点分节点分节点分节点3",
    }, {
        name: "分节点分节点分节点分节点4",
    }]
}];

myChart.hideLoading();
myChart.setOption(option = {
     backgroundColor: '#fff',
        series: [
            {