[英]Apache ECharts: Sankey colors
I have the following chart options in my Angular application for a sankey chart:我的 Angular 应用程序中有以下用于桑基图表的图表选项:
this.chartOptions = {
color: ["#922752", "#ff9822", "#4390e1", "#53bcbc"],
tooltip: {
backgroundColor: "#ffffff",
borderWidth: 1,
formatter: `<b>{b}</b><br/>{c} ${this.unit}`,
padding: 8,
textStyle: { color: "#212529" },
trigger: "item",
triggerOn: "mousemove",
},
series: [
{
type: "sankey",
left: 0,
top: 0,
bottom: 0,
nodeWidth: 10,
data: this.seriesData,
draggable: false,
label: {
fontWeight: "bold",
formatter: "{b}",
},
links: this.seriesLinks,
focusNodeAdjacency: "allEdges",
itemStyle: {
borderWidth: 0,
},
lineStyle: {
color: "source",
curveness: 0.5,
},
},
],
};
This is the current result:这是当前的结果:
But the goal is that on the first level each node should have another color and the levels underneath it (depth +1) should have the parent color but only with -10% color saturation.但目标是在第一层每个节点应该有另一种颜色,它下面的层(深度 +1)应该有父颜色,但只有 -10% 的颜色饱和度。
Example:例子:
Do you know how many levels will be in the resulting chart?您知道结果图表中有多少个级别吗? If yes, just set color transform manually like in official example :如果是,只需像官方示例中那样手动设置颜色变换:
levels: [
{
depth: 0,
itemStyle: {
color: "#fbb4ae",
},
lineStyle: {
color: "source",
opacity: 0.8,
},
},
{
depth: 1,
itemStyle: {
color: "source", // <-- here you can say: "get color from upper level and set opacity"
opacity: 0.6,
},
lineStyle: {
color: "source",
opacity: 0.6,
},
},
{
depth: 2,
itemStyle: {
color: "source",
opacity: 0.4,
},
lineStyle: {
color: "source",
opacity: 0.4,
},
},
{
depth: 3,
itemStyle: {
color: "source",
},
lineStyle: {
color: "source",
opacity: 0.2,
},
},
];
Echarts has no built-in color transform functions but you can take any library like TinyColor or Chroma.js and generate color with saturation. Echarts 没有内置的颜色转换函数,但你可以使用任何库,如TinyColor或Chroma.js并生成饱和度颜色。
If you need to make it automatically then just generate levels
with predefined setup from dimensions of you data and set it into the chart with setOption .如果您需要自动制作它,那么只需从您的数据维度生成具有预定义设置的levels
,并使用setOption将其设置到图表中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.