参考
ecahrts官方文档
自定义测试
探索：关系图的关键
- 起点
- 终点
- 线条
其次
- 标签文字
- 线条标签
配置关键:
{
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
