Echarts3 关系图

相关代码

页面部分

<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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,作为一个文本AI模型,我无法直接显示片。但是,你可以通过以下步骤来获取Echarts关系片: 1. 首先,你需要安装Echarts库。你可以在Echarts的官方网站(https://www.echartsjs.com/zh/index.html)上找到安装和使用文档。 2. 使用Echarts创建你想要的关系,并将其保存为片。你可以使用Echarts提供的API和配置选项来定义表的样式和数据。 3. 保存关系片。Echarts提供了`echarts.convertToImage`方法,可以将关系转换为片,并可以选择下载或保存。 以下是一个简单的示例代码,展示了如何使用Echarts创建一个关系并保存为片: ```javascript // 引入Echarts库 import echarts from 'echarts'; // 创建一个关系实例 const chart = echarts.init(document.getElementById('chart-container')); // 配置关系的样式和数据 const option = { // 配置选项... series: [{ type: 'graph', // 数据... }] }; // 设置关系的配置项 chart.setOption(option); // 将关系转换为片 chart.convertToImage({ type: 'png', // 片类型 pixelRatio: 1, // 分辨率 backgroundColor: '#fff', // 背景颜色 }); // 保存关系片 chart.saveAsImage('relation_chart.png'); ``` 请确保你已经正确安装了Echarts库,并在HTML文件中添加了一个具有唯一id的div元素(例如`<div id="chart-container"></div>`)作为关系的容器。 希望这能帮到你!如果你有任何其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值