我希望使用EChart.JS (https://ecomfe.github.io/echarts-doc/public/en/index.html)在折线图、柱状图和饼图上绘制一个水平目标线,来显示阈值限制。有其他的讨论帖 - "Chart.js - draw horizontal line",其中详细介绍了如何使用Chart.JS进行操作。是否有人在EChart方面有特定经验可分享?谢谢!
[编辑] 自Echarts v3发布并移交给Apache基金会以来,文档已经散落在不同的URL中,一些选项已经消失,一些选项没有显示在所有文档资源中等等。下面提供的链接已更新(截至2020年2月24日),但可能会再次破裂。我还没有完全尝试过v3,但下面提供的代码应该仍然有效。[/编辑]
markLine选项是为此设计的,请查看此处的文档: https://echarts.apache.org/en/option.html#series-line.markLine
请注意,根据您要绘制的内容,它有不同的用途和不同的选项:
在所有情况下,您都必须使用属性markLine.data,具体描述在这里: https://echarts.apache.org/en/option.html#series-line.markLine.data
以下是我绘制时间序列线曲线的方法。请注意,在markLine.data[0]中,我无法使yAxis足以绘制一条水平线: 必须指定xAxis(起始点和结束点)。
xAxis: {
type: 'time',
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: [
[1509762600, 7.11376],
[1509832800, 7.54459],
[1509849000, 7.64559]
],
markLine: {
data: [
// 1st line we want to draw
[
// start point of the line
// we have to defined line attributes only here (not in the end point)
{
xAxis: 1509762600,
yAxis: 3,
symbol: 'none',
lineStyle: {
normal: {
color: "#00F"
}
},
label: {
normal: {
show: true,
position: 'end',
formatter: 'my label'
}
}
},
// end point of the line
{
xAxis: 1509849000,
yAxis: 3,
symbol: 'none'
}
]
]
}
}]
我找到了一个示例: https://jsfiddle.net/381510688/hff93ska/
请注意,ECharts很喜欢在markLine的末端显示箭头符号,因此我在上面的代码中使用了symbol: 'none',只画线而不画箭头。