Echarts 关系图完全配置指南 - 手把手教你制作西游记人物关系图

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年05月08日

head.jpg

Echarts 关系图是图表中最常用的显示形式之一。使用 Echarts 做出基本的关系图很简单,但要把多组关系放在一起,分组、分颜色、加上鼠标拖拽缩放等功能,就不容易了。本文将带领大家一步一步制作一张「西游记人物关系图」来一起学习如何使用 Echarts 制作可读性高的可视化人物关系图表。

跟随本文一步步学习的最终搭建效果。

卡拉云折线图表示例

Echarts 关系图 Demo 演示:https://my.kalacloud.com/apps/qqrkhuspr6/published

以上 Demo 为新一代低代码开发工具「卡拉云」制作完成,卡拉云内置包括 Echarts 图表组件在内数十种常见的前端组件,仅需拖拽即可生成。你无需懂任何前端知识,也可以快速开发出属于自己的后台工具。如果你不想学 Vue 等前端技术又想快速搭建后台工具,推荐直接使用卡拉云,详情请见本文文末。

配置 Vue 环境并引入 Echarts

我们使用最广泛也最流行的图表组件 Echarts 来完成关系图的搭建,Echarts 已经帮我们解决好了复杂的关系图搭建的所需的所有功能,熟练后非常趁手。

我们开始吧,先安装 Vue 及 Echarts

npm install @vue/cli
vue create kalacloud-echarts-graph-demo
cd kalacloud-echarts-graph-demo
npm install echarts --save

在 main.js 中引入 Echarts

//main.js

import Vue from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

new Vue({
  render: k => k(App),
}).$mount('#app')

配置 Echarts 并建立人物关系图

在 HelloWorld.vue 中,我们来写 Echarts 相关的代码,完整代码请在 github 查看。

1.准备 DOM 容器

首先我们准备一个 DOM 容器,用来放 Echarts 关系图

<template>
  <div id="myChart" :style="{width: '1000px', height: '700px'}"></div>
</template>

2.搭 Echarts 的架子

然后我们来把 Echarts 的架子给搭起来

<script>
export default {
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于刚刚准备好的 DOM 容器,初始化 EChart 实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            ... 

          });
    }
  }
}
</script>

接下来,我们来一步一步分析,如何通过 Echart 搭建关系图。

扩展阅读:《Echarts 折线图完全配置指南

3.为 Echarts 关系图准备数据

数据包含两部分,一部分是人物及属性列表,一部分人物关系列表。

人物及属性列表

// 人物及属性列表

data: [
        {
          name: '玄奘',
          symbolSize: 80, // 玄奘师父的圆圈要比其他人物大一些,凸显节点重要性
          category: '西天取经团队'
        },
        {
          name: '孙悟空',
          category: '西天取经团队'
        },
...
]

人物关系列表:

// 人物关系列表

links: [
        {
          source: '玄奘',
          target: '孙悟空',
        },
        {
          source: '玄奘',
          target: '猪八戒'
        },
        ......
]

<ContentCTA title="调试前端太复杂?" content="试用卡拉云,拖拽图表组件连接 API
          和数据库直接生成后台系统,将两个月的工期降低至两天" />

4.配置 Echarts 关系图基本设置

backgroundColor: '#f6f5f3',
  color: [
    '#02c9c9',
    '#bccf3d',
    '#ffc300'
  ],
  title: { 
    text: '西游记人物关系图 - 卡拉云',
    textStyle: {
      color: '#368cbf',
      fontWeight: 700,
      fontSize: 30,
      left: 'center'
    }
  }, // 标题及标题颜色、尺寸、位置

  series: [
    {
      type: 'graph', // 类型设置为关系图
      legendHoverLink: true,  // 可以点击图例来隐藏一个组
      layout: 'force',
      categories: [
        { name: '西天取经团队', symbolSize: 60 },
        { name: '佛法家族', symbolSize: 60 },
        { name: '道法家族', symbolSize: 60 }
      ],
      force: {
        repulsion: [1000, 1200], //每个节点之间的斥力因子,越大离的越远
        layoutAnimation: true,
        friction: 0.3, //刷新时节点的移动速度,越大越快,0 - 1 之间
        edgeLength: [100, 130] //两节点之间的距离
      },
  
      label: {
        show: true, // 节点圆盘上的文字
        fontStyle: 'italic', //文字风格,normal,italic,oblique 三种可选
        fontSize: 12,
        color: '#000000',
      },

01-echarts-basic

到这里,基本的人物关系图已经有了,但没有鼠标拖拽,没有分组显示,没有放大缩小等高级功能,下一节我们来讲 Echarts 关系图的进阶配置。

扩展阅读:《如何使 Vue ECharts 柱状图中,每个柱子颜色各不同(随机或指定颜色)

5.配置 Echarts 关系图进阶配置设置

legend: [ // 增加图示标签,我们可以点击图示隐藏相关节点
    {
      x: 'right',
      show: true,
      data: ['西天取经团队', '佛法家族', '道法家族']
    }
  ],
      symbolSize: 60, //全局节点尺寸
      itemStyle: {  // 给节点加上阴影,显着立体
        shadowColor: '#C0C0C0', 
        shadowOffsetX: 2,
        shadowOffsetY: 2
      },
//让节点可以通过鼠标拖拽和移动的设置
      roam: true, //开启鼠标平移及缩放
      draggable: true, //节点是否支持鼠标拖拽。
      edgeSymbol: ['circle', 'arrow'],//两节点连线的样式
      edgeSymbolSize: [5, 10],
      cursor: 'pointer', //鼠标悬浮时在图形元素上时鼠标的样式

      labelLayout: {
        moveOverlap: 'shiftX', //标签重叠时,挪动标签防止重叠
        draggable: true //节点标签是否允许鼠标拖拽定位
      },
      emphasis: {
        scale: true, //节点放大效果
        focus: 'adjacency'
      },
      lineStyle: {
        color: '#3d3d3f',
        width: 2,
        curveness: 0 //节点连线的曲率,0-1 越大越弯。
      },

02-echarts-update

然后我们就得到了一个鼠标悬停显示关系、可用鼠标拖动、可放大缩小节点,可点击图示隐藏和显示关系的西游记人物关系图。

6.Echarts 人物关系图源码

Echarts 西游记人物关系图完整代码:https://github.com/HiJiangChuan/echarts-graph-tutorial

使用卡拉云直接生成关系图

本文介绍了 Echarts 关系图的各种配置细节,从简到难,循序渐进。虽然 Echarts 的教程很多,但配置前端的工作总是有太多重复劳动,那么有没有一种完全不用会前端,一行代码也不用写的方法,生成图表呢?这里推荐你使用卡拉云,卡拉云内置多种样式的图表,仅需鼠标拖拽即可生成,完全不用懂任何前端。

03-kalacloud-echart.jpg

卡拉云关系图 Demo 演示:https://my.kalacloud.com/apps/a8f99u5q78/published

卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费试用卡拉云

一起交流

wechat-jiangchuan

蒋川,卡拉云联合创始人,B 端数据开发。

如果你有任何问题,欢迎添加微信一起交流。我的微信 HiJiangChuan

扩展阅读: