echarts_自定义graph关系图

简介: echarts_自定义graph关系图

前言

大家好,我是yma16,本文分享echarts中自定义graph关系图

ehcarts引入

在 Vue 3 中引入 echarts 有多种方式,以下是其中一种基本的方式:

  1. 安装 echarts 和 vue-echarts:
npm install echarts vue-echarts@5.0.0-beta.5
  1. 在 main.js 文件中引入 echarts 和 vue-echarts:
import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'
import ECharts from 'vue-echarts'
createApp(App)
  .component('v-chart', ECharts)
  .mount('#app')
  1. 在需要使用 echarts 的组件中引入 v-chart 并设置数据和配置项:
<template>
  <div class="echarts">
    <v-chart :options="options" :data="data"></v-chart>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [20, 30, 40, 10, 25],
      options: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          data: this.data,
          type: 'bar',
        }],
      },
    }
  },
}
</script>
<style scoped>
.echarts {
  height: 400px;
}
</style>

其中,v-chart 是通过 vue-echarts 引入的 ECharts 组件,通过 options 和 data 可以设置图表的数据和配置项。这里是一个简单的柱状图例子,更多高级用法可以参考 echarts 官方文档。

关系图配置

关系图是ECharts中的一种特殊图表类型,用于展示节点与节点之间的关系。以下是关系图的配置示例:

option = {
    series: [{
        type: 'graph', // 指定图表类型为关系图
        layout: 'force', // 指定布局方式为力导向布局
        symbolSize: 50, // 指定节点大小
        roam: true, // 开启缩放和拖拽
        label: { // 指定节点标签的样式
            show: true,
            position: 'inside',
            color: '#fff',
            fontSize: 16
        },
        edgeSymbol: ['circle', 'arrow'], // 指定边的箭头图标
        edgeSymbolSize: [4, 10], // 指定边的箭头大小
        edgeLabel: { // 指定边的标签样式
            fontSize: 14,
            fontWeight: 'bold',
            color: 'auto',
            formatter: '{c}'
        },
        data: [ // 指定节点数据
            { name: '节点1' },
            { name: '节点2' },
            { name: '节点3' },
            { name: '节点4' }
        ],
        links: [ // 指定边的数据
            { source: '节点1', target: '节点2', value: 5 },
            { source: '节点2', target: '节点3', value: 10 },
            { source: '节点3', target: '节点4', value: 15 },
            { source: '节点4', target: '节点1', value: 20 }
        ],
        force: { // 指定力导向布局的参数
            repulsion: 100,
            edgeLength: 50
        }
    }]
};

上述代码中,我们通过type: 'graph'指定了图表类型为关系图,使用了力导向布局。symbolSize可以指定节点的大小,roam: true可以开启缩放和拖拽功能。label可以指定节点标签的样式。edgeSymboledgeSymbolSize可以分别指定边的箭头图标和大小。edgeLabel可以指定边的标签样式。datalinks分别指定节点和边的数据。

最后,我们使用force参数指定了力导向布局的参数,包括斥力和边长。

参考

ecahrts官方文档

自定义graph图

分析:

探索:关系图的关键

  • 起点
  • 终点
  • 线条

线条标注

  • 标签文字
  • 线条标签

配置关键:

代码如下

{
        title: {
          text: "2021->2022 我的职业",
          color: "#fff",
          x: "left",
          width: 120,
          height: 80,
          backgroundColor: "#6dd5ed",
          borderColor: "#fff",
          borderWidth: 1,
          padding: 5,
          textStyle: {
            fontFamily: "Arial",
            fontSize: 20,
            fontStyle: "normal",
            fontWeight: "bold",
            color: "#fff",
          },
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "none",
            symbolSize: 0,
            roam: true,
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 15,
            },
            label: {
              //
              show: true,
              formatter: function (params) {
                console.log(params, params);
                return params.name;
              },
              width: 80,
              fontSize: 16,
              height: 40,
              color: "#fff",
              backgroundColor: "#6dd5ed",
              borderColor: "#fff",
              borderWidth: 1,
            },
            data: [
              {
                name: "2021",
                x: 100,
                y: 50,
              },
              {
                name: "2022",
                x: 800,
                y: 50,
              },
              {
                name: "数据分析",
                x: 100,
                y: 275,
              },
              {
                name: "sql语言",
                x: 450,
                y: 450,
              },
              {
                name: "javascript",
                x: 450,
                y: 100,
              },
              {
                name: "前端vue",
                x: 800,
                y: 275,
              },
            ],
            // links: [],
            links: [
              {
                source: 0,
                target: 1,
                symbolSize: [10, 20],
                label: {
                  show: true,
                  fontWeight: "bold",
                  color: "#fff",
                  formatter: function () {
                    // console.log(params, params);
                    return "数据分析->前端";
                  },
                },
                lineStyle: {
                  width: 1,
                  color: "#6dd5ed",
                  curveness: 0,
                },
              },
              {
                source: 2,
                target: 3,
                label: {
                  show: true,
                  color: "#fff",
                  formatter: function () {
                    return "mysql pgsql greemplum";
                  },
                },
                lineStyle: {
                  color: "#6dd5ed",
                  curveness: 0,
                },
              },
              {
                source: 2,
                target: 4,
                label: {
                  show: true,
                  color: "#fff",
                  formatter: function () {
                    return "es6";
                  },
                },
                lineStyle: {
                  color: "#6dd5ed",
                  curveness: 0,
                },
              },
              {
                source: 3,
                target: 5,
                label: {
                  show: true,
                  formatter: function () {
                    return "";
                  },
                },
                lineStyle: {
                  color: " #6dd5ed",
                },
              },
              {
                source: 4,
                target: 5,
                label: {
                  show: true,
                  color: "#fff",
                  formatter: function () {
                    return "es6->es12";
                  },
                },
                lineStyle: {
                  color: " #6dd5ed",
                },
              },
            ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
            },
          },
        ],
      }

仓库

github的仓库

https://github.com/yongma16/emoji-search

浏览

预览地址,已部署

http://yongma16.xyz/emoji/index/

结束

本文分享到此结束,感谢你的阅读,如有不足或者错误欢迎指出!

目录
相关文章
|
2月前
Echarts 热力图自定义开发
Echarts 热力图自定义开发
|
27天前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
35 0
 ECharts 雷达图案例001-自定义节点动画
|
26天前
|
数据可视化 黑灰产治理
📊 ECharts 雷达图案例002 - 诈骗性质分析
**ECharts 案例展示了诈骗性质的雷达图分析,以创新可视化揭示诈骗模式。定制化雷达图配色鲜明,多维度剖析不同诈骗手段,如网络刷单、冒充公检法。交互式设计允许用户深入探究细节。[点击这里](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454384)查看完整案例。#ECharts #数据可视化 #雷达图 #诈骗分析**
25 0
📊 ECharts 雷达图案例002 - 诈骗性质分析
|
14天前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
28 0
|
20天前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
20天前
|
JSON JavaScript 定位技术
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
|
2月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
57 0
|
2月前
eCharts实现漏斗图
eCharts实现漏斗图
142 0
eCharts实现漏斗图
|
7月前
|
JSON 数据格式
echarts关系图
echarts关系图
47 0
|
13天前
|
数据可视化 JavaScript 前端开发
使用ECharts创建动态数据可视化图表
使用ECharts创建动态数据可视化图表