echarts关系图简单配置

option = {
  tooltip: {},
  animationDurationUpdate: 1500,
  animationEasingUpdate: 'quinticInOut',
  series: [
    {
      type: 'graph',
      layout: 'none',
      symbol:
        'image://https://echarts.apache.org/zh/images/logo.png?_v_=20240226',
      symbolSize: 90,
      roam: true,
      label: {
        show: true,
        fontSize: 14,
        position: 'bottom'
      },
      edgeSymbol: ['none', 'none'], //'circle', 'arrow'
      edgeSymbolSize: [4, 10],
      edgeLabel: {
        fontSize: 20
      },
      data: [
        {
          name: '酒店',
          x: 300,
          y: 300
        },
        {
          name: '蔬菜派送',
          x: 800,
          y: 300
        },
        {
          name: '餐具配送',
          x: 550,
          y: 100
        },
        {
          name: '洗漱用品配送',
          x: 550,
          y: 500
        }
      ],
      links: [
        {
          source: '酒店',
          target: '餐具配送',

          label: {
            show: true,
            formatter: (params) => {
              return '3843';
            }
          }
        },
        {
          source: '酒店',
          target: '洗漱用品配送',
          label: {
            show: true,
            formatter: (params) => {
              return '3843';
            }
          }
        },
        {
          source: '酒店',
          target: '蔬菜派送',
          label: {
            show: true,
            formatter: (params) => {
              return '3843';
            }
          }
        }
      ],
      lineStyle: {
        opacity: 0.9,
        width: 2,
        curveness: 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、付费专栏及课程。

余额充值