vue3_echarts自定义graph关系图

简介: vue3_echarts自定义graph关系图

@TOC

参考

ecahrts官方文档

自定义测试

探索:关系图的关键

  • 起点
  • 终点
  • 线条

其次

  • 标签文字
  • 线条标签

image.png

配置关键:

 {
   
   
        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,
            },
          },
        ],
      }

仓库

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

浏览

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

目录
相关文章
|
2月前
Echarts 热力图自定义开发
Echarts 热力图自定义开发
|
2月前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
36 0
|
1月前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
36 0
 ECharts 雷达图案例001-自定义节点动画
|
23天前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
23天前
|
JSON JavaScript 定位技术
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
|
2月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
59 0
|
7月前
|
JSON 数据格式
echarts关系图
echarts关系图
47 0
|
8月前
|
JSON 前端开发 数据格式
Echarts饼状图数据交互请求ajax自定义颜色
Echarts饼状图数据交互请求ajax自定义颜色
30 0
|
8月前
Echarts自定义tooltip显示内容(隐藏小圆点)
Echarts自定义tooltip显示内容(隐藏小圆点)
199 0
|
8月前
echarts自定义y轴刻度信息
echarts自定义y轴刻度信息