Echarts3 关系图

初级驾照

于 2023-03-06 14:15:58 发布

阅读量375

点赞数

分类专栏： echarts 文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_35957643/article/details/129360649

版权

本文介绍如何使用Echarts3创建关系图，包括页面设置、配置项、鼠标交互（显示节点父级关系）、点击事件处理及保存为图片功能。同时提供了官方文档和示例链接以供深入学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相关代码

页面部分

<div style="height: 100%;margin: 0">
    <div id='chart-lesMiserables' style="float: left;padding-top: 20px;width: 100%;color:#A52A2A"></div>
    <div id="chart-container" style="height: 100%"></div>
</div>

配置项

var categories = [{
   "name":"A","icon":"roundRect"},{
   "name":"B","icon":"rect"},{
   "name":"C","icon":"circle"}];
var nodes = [{
   "id":"1","name":"1","symbol":"roundRect","category":0},{
   "id":"2","name":"2","symbol":"rect",,"category":1},{
   "id":"3","name":"3","symbol":"circle","category":2}];
var links = [{
   "source":"1","target":"2"},{
   "source":"2","target":"3"}];
nodes.forEach(function (node) {
   
		node.label = {
   
	      show: true,
	      position : 'inside'
	    };
	});
	var chartDom = document.getElementById('chart-container');
	var myChart = echarts.init(chartDom);
	var option = {
   
	    title: {

最低0.47元/天解锁文章