如何用echars实现树形图,用上传的echars代码实现

image.png

image.png

echars代码.zip

FineReport hgl 发布于 2024-5-30 10:20 (编辑于 2024-5-30 10:21)
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共2回答
最佳回答
0
HHHHH123Lv7中级互助
发布于2024-5-30 13:44

image.png

// 原始数据

var data1 = getData('data1');

// 将原始数据转换为 ECharts 树图需要的格式

function transformData(data) {

  // 构建 id 到节点的映射

  var nodeMap = {};

  var root;

  // 遍历原始数据,创建节点对象

  for (var i = 1; i < data.length; i++) {

    var name = data[i][0];

    var id = data[i][1];

    var parentId = data[i][2];

    var node = { name: name, children: [] };

    nodeMap[id] = node;

    if (!parentId) {

      root = node;

    }

  }

  // 遍历原始数据,设置父子关系

  for (var i = 1; i < data.length; i++) {

    var id = data[i][1];

    var parentId = data[i][2];

    if (parentId) {

      nodeMap[parentId].children.push(nodeMap[id]);

    }

  }

  return root;

}

var treeData = transformData(data1);

// 基于准备好的 DOM,初始化 echarts 实例

// var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

  tooltip: {

    trigger: 'item',

    triggerOn: 'mousemove'

  },

  series: [

    {

      type: 'tree',

      data: [treeData],

      top: '1%',

      left: '7%',

      bottom: '1%',

      right: '20%',

      symbolSize: 7,

      label: {

        position: 'left',

        verticalAlign: 'middle',

        align: 'right',

        fontSize: 9

      },

      leaves: {

        label: {

          position: 'right',

          verticalAlign: 'middle',

          align: 'left'

        }

      },

      expandAndCollapse: true,

      animationDuration: 550,

      animationDurationUpdate: 750

    }

  ]

};

// 使用刚指定的配置项和数据显示图表

myChart.setOption(option);

最佳回答
0
snrtuemcLv8专家互助
发布于2024-5-30 10:23(编辑于 2024-5-30 10:24)

这个直接是保存在模板中了

不用单独上传

除非你额外引用了js,css文件,那就一般上传服务器中你本地设计器的对应目录

========

ECharts图表集成插件 https://help.fanruan.com/finereport/doc-view-4468.html

  • hgl hgl(提问者) 我是想实现这种树形样式, 但是我不知道如何和报表中的数据集 匹配
    2024-05-30 10:25 
  • snrtuemc snrtuemc 回复 hgl(提问者) 有示例的,ECharts图表引用模板数据集 https://help.fanruan.com/finereport/doc-view-4410.html
    2024-05-30 10:28 
  • hgl hgl(提问者) ECharts图表集成插件 是已经安装了的,就是想知道 如果通过这个插件 实现 把代码示例中的死数据 转换成 数据集数据
    2024-05-30 10:29 
  • hgl hgl(提问者) 回复 snrtuemc 示例都是 二维数组结构 不是 树形结构
    2024-05-30 10:31 
  • snrtuemc snrtuemc 回复 hgl(提问者) 不是有树数据集的
    2024-05-30 10:31 
  • 3关注人数
  • 330浏览人数
  • 最后回答于:2024-5-30 13:44
    请选择关闭问题的原因
    确定 取消
    返回顶部