配置 ECharts 的 themeRiver 类型图表

huangapple
go评论162阅读模式
英文:

Configuring an ECharts themeRiver type chart

问题

我遇到了一些关于ECharts themeRiver图表的高级配置问题。

你可以在这里看到我的实现，下面附上了一个codepen。

以下是我的问题：
1）如何删除左侧紧密排列的图例（因为所有初始值都为0或较小）？
2）如何增加刻度的数量（interval:0似乎没有效果）？
3）如何格式化显示在轴提示（年份）顶部的数字，使其没有小数部分和千位分隔符（与我为轴刻度标记所做的操作相同）？
4）如何应用demo中显示的Decal Patern选项？

谢谢！

echarts选项对象（codepen 在这里。这里的数据对象已经缩写，但在codepen中可用）：

  1. option = {
  2.   tooltip: {
  3.     trigger: 'axis',
  4.     axisPointer: {
  5.       type: 'line',
  6.       lineStyle: {
  7.         color: 'rgba(0,0,0,0.2)',
  8.         width: 5,
  9.         type: 'solid'
  10.       }
  11.     }
  12.   },
  13.   legend: {
  14.     data: [...]
  15.   },
  16.   singleAxis: {
  17.     min: 1606,
  18.     max: 2011,
  19.     top: 50,
  20.     bottom: 50,
  21.     axisTick: {interval: 50},
  22.     axisLabel: {
  23.        formatter: function (value) {
  24.             return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "");
  25.         }
  26.     },
  27.     type: 'value',
  28.     axisPointer: {
  29.         animation: true,
  30.         label: {
  31.             show: true
  32.         }
  33.     },
  34.     splitLine: {
  35.         show: true,
  36.         lineStyle: {
  37.             type: 'dashed',
  38.             opacity: 0.2
  39.         }
  40.     }
  41.   },
  42.   series: [
  43.     {
  44.       type: 'themeRiver',
  45.       emphasis: {
  46.         itemStyle: {
  47.           shadowBlur: 20,
  48.           shadowColor: 'rgba(0, 0, 0, 0.8)'
  49.         }
  50.       },
  51.       data: [...]
  52.     }
  53.   ]
  54. };
英文:

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:

  1. How can I remove the legends that are are all bunched up on the left (because all initial values are 0 or small)?
  2. How can I increase the number of ticks (interval:0 seems to not have an effect).
  3. 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)?
  4. 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):

  1. option = {
  2.   tooltip: {
  3.     trigger: 'axis',
  4.     axisPointer: {
  5.       type: 'line',
  6.       lineStyle: {
  7.         color: 'rgba(0,0,0,0.2)',
  8.         width: 5,
  9.         type: 'solid'
  10.       }
  11.     }
  12.   },
  13.   legend: {
  14.     data: [...]
  15.   },
  16.   singleAxis: {
  17.     min: 1606,
  18.     max: 2011,
  19.     top: 50,
  20.     bottom: 50,
  21.     axisTick: {interval: 50},
  22.     axisLabel: {
  23.        formatter: function (value) {
  24.             return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "");
  25.         }
  26.     },
  27.     type: 'value',
  28.     axisPointer: {
  29.         animation: true,
  30.         label: {
  31.             show: true
  32.         }
  33.     },
  34.     splitLine: {
  35.         show: true,
  36.         lineStyle: {
  37.             type: 'dashed',
  38.             opacity: 0.2
  39.         }
  40.     }
  41.   },
  42.   series: [
  43.     {
  44.       type: 'themeRiver',
  45.       emphasis: {
  46.         itemStyle: {
  47.           shadowBlur: 20,
  48.           shadowColor: 'rgba(0, 0, 0, 0.8)'
  49.         }
  50.       },
  51.       data: [...]
  52.     }
  53.   ]
  54. };

答案1

得分: 1

  1. labels可以通过以下方式禁用：
  1. series: [
  2.    {
  3.       label: {show: false}
  4.    }
  5. ]
  1. 可以通过以下方式设置轴标签之间的最大间隔：
  1. singleAxis: {
  2.     maxInterval: 50,
  3. }
  1. 可以通过tooltip formatter来格式化工具提示。目前我还没有成功地将换行符插入其中，但这个方法非常接近：
  1. tooltip: {
  2.     formatter: function(values) {
  3.         const year = parseInt(values[0].data[0]);
  4.         return year.toFixed() + "\n" + values.map(value => value.data[1] + " " + value.data[2]).join("\n");
  5.     }
  6. }
  1. 可以通过以下方式激活decal pattern：
  1. myChart.setOption({
  2.     aria: {
  3.         enabled: true,
  4.         decal: {show: true}
  5.     }
  6. })

这是调整后的示例。

英文:
  1. labels can be disabled via:
  1. series: [
  2.    {
  3.       label: {show: false}
  4.    }
  5. ]
  1. set maximum gap between axis labels via:
  1. singleAxis: {
  2.     maxInterval: 50,
  3. }
  1. tooltip can be formatted via tooltip formatter. I currently didnt manage to get line breaks into it but this is quite close:
  1. tooltip: {
  2.     formatter: function(values) {
  3.         const year = parseInt(values[0].data[0]);
  4.         return year.toFixed() + "\n" + values.map(value => value.data[1] + " " + value.data[2]).join("\n");
  5.     }
  6. }
  1. decal pattern can be activated via:
  1. myChart.setOption({
  2.     aria: {
  3.         enabled: true,
  4.         decal: {show: true}
  5.     }
  6. })

Here is the adjusted Demo.

huangapple
  • 本文由 发表于 2023年7月31日 18:06:07
  • 转载请务必保留本文链接：https://go.coder-hub.com/76802567.html
  • echarts
  • echarts-themeriver
  • javascript
  • visualization
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定