hustcc / hustcc/echarts-for-react

Adding itemStyle & label in the option is ineffective for type graph

Open
#513 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
5k
Forks
650
PR merge metrics
No merged PRs in 30d

Description

Below config is working fine but adding itemStyle & label in the option is not bringing the expected change I wanted to see.

`import React from "react";
import ReactECharts from "echarts-for-react";

const Page: React.FC = () => {
const webkitDep = {
type: "force",
categories: [
{
name: "HTMLElement",
keyword: {},
base: "HTMLElement"
},
{
name: "WebGL",
keyword: {},
base: "WebGLRenderingContext"
},
{
name: "SVG",
keyword: {},
base: "SVGElement"
},
{
name: "CSS",
keyword: {},
base: "CSSRule"
},
{
name: "Other",
keyword: {}
}
],
nodes: [
{
name: "AnalyserNode",
value: 1,
category: 1
},
{
name: "AudioNode",
value: 1,
category: 2
},
{
name: "Uint8Array",
value: 1,
category: 3
},
{
name: "Float32Array",
value: 1,
category: 4
},
{
name: "ArrayBuffer",
value: 1,
category: 5
},
{
name: "ArrayBufferView",
value: 1,
category: 3
},
{
name: "Attr",
value: 1,
category: 2
},
{
name: "Node",
value: 1,
category: 4
},
{
name: "Element",
value: 1,
category: 4
},
{
name: "AudioBuffer",
value: 1,
category: 4
}
],
links: [
{
source: 1,
target: 6
},
{
source: 6,
target: 2
}
]
};
const option = {
legend: {
data: ["HTMLElement", "WebGL", "SVG", "CSS", "Other"]
},
series: [
{
type: "graph",
layout: "force",
animation: false,
label: {
position: "left",
show: true
},
draggable: true,
data: webkitDep.nodes.map(function (node, idx) {
node.id = idx;
return node;
}),
categories: webkitDep.categories,
symbolSize: 40,
itemStyle: {
color: "rgba(188, 94, 94, 1)",
borderColor: "rgba(179, 255, 0, 1)",
borderWidth: 1.5,
borderType: "dashed"
},
force: {
// initLayout: 'circular'
// repulsion: 20,
edgeLength: 185,
repulsion: 240,
gravity: 0.09
},
edges: webkitDep.links
}
]
};

return (

);
};

export default Page;
`
![Uploading Screenshot 2022-11-01 at 4.42.04 PM.png…]()

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.