英文:
Configuring an ECharts themeRiver type chart
问题
我遇到了一些关于ECharts themeRiver图表的高级配置问题。
你可以在这里看到我的实现，下面附上了一个codepen。
以下是我的问题：
1）如何删除左侧紧密排列的图例（因为所有初始值都为0或较小）？
2）如何增加刻度的数量（interval:0似乎没有效果）？
3）如何格式化显示在轴提示（年份）顶部的数字，使其没有小数部分和千位分隔符（与我为轴刻度标记所做的操作相同）？
4）如何应用demo中显示的Decal Patern选项？
谢谢！
echarts选项对象（codepen 在这里。这里的数据对象已经缩写，但在codepen中可用）：
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 5,
type: 'solid'
}
}
},
legend: {
data: [...]
},
singleAxis: {
min: 1606,
max: 2011,
top: 50,
bottom: 50,
axisTick: {interval: 50},
axisLabel: {
formatter: function (value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "");
}
},
type: 'value',
axisPointer: {
animation: true,
label: {
show: true
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
opacity: 0.2
}
}
},
series: [
{
type: 'themeRiver',
emphasis: {
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
},
data: [...]
}
]
};
英文:
I am having trouble with some advanced configuration of an ECharts themeRiver chart.
You can see my implementation here, and a codepen is attached below.
Here are my questions:
- How can I remove the legends that are are all bunched up on the left (because all initial values are 0 or small)?
- How can I increase the number of ticks (interval:0 seems to not have an effect).
- How can i format the number shown at the top of the axis tooltip (the year) so it has no decimal fraction and not thousands separator (same as I managed to do for the axis tick marks)?
- How can i apply the Decal Patern option shown in the demo?
Thanks you!
echarts option object(codepen here. The Data objects are abbreviated here but available in codepen):
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 5,
type: 'solid'
}
}
},
legend: {
data: [...]
},
singleAxis: {
min: 1606,
max: 2011,
top: 50,
bottom: 50,
axisTick: {interval: 50},
axisLabel: {
formatter: function (value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "");
}
},
type: 'value',
axisPointer: {
animation: true,
label: {
show: true
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
opacity: 0.2
}
}
},
series: [
{
type: 'themeRiver',
emphasis: {
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
},
data: [...]
}
]
};
答案1
得分: 1
- labels可以通过以下方式禁用：
series: [
{
label: {show: false}
}
]
- 可以通过以下方式设置轴标签之间的最大间隔：
singleAxis: {
maxInterval: 50,
}
- 可以通过tooltip formatter来格式化工具提示。目前我还没有成功地将换行符插入其中，但这个方法非常接近：
tooltip: {
formatter: function(values) {
const year = parseInt(values[0].data[0]);
return year.toFixed() + "\n" + values.map(value => value.data[1] + " " + value.data[2]).join("\n");
}
}
- 可以通过以下方式激活decal pattern：
myChart.setOption({
aria: {
enabled: true,
decal: {show: true}
}
})
这是调整后的示例。
英文:
- labels can be disabled via:
series: [
{
label: {show: false}
}
]
- set maximum gap between axis labels via:
singleAxis: {
maxInterval: 50,
}
- tooltip can be formatted via tooltip formatter. I currently didnt manage to get line breaks into it but this is quite close:
tooltip: {
formatter: function(values) {
const year = parseInt(values[0].data[0]);
return year.toFixed() + "\n" + values.map(value => value.data[1] + " " + value.data[2]).join("\n");
}
}
- decal pattern can be activated via:
myChart.setOption({
aria: {
enabled: true,
decal: {show: true}
}
})
Here is the adjusted Demo.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论