作者:索马里7_244 | 来源:互联网 | 2023-01-22 12:48
我想使用EChart.JS(https://ecomfe.github.io/echarts-doc/public/en/index.html)在水平线,条形图和饼形图中绘制一条显示阈值极限的水平目标线。
还有其他线程-“ Chart.js-绘制水平线”,详细介绍了如何使用Chart.JS。有没有人对EChart有特别的经验?
提前致谢。
1> Bob..:
选项markLine是为此目的而设计的,请参见此处的文档:https :
//ecomfe.github.io/echarts-doc/public/en/option.html#series-line.markLine
请注意,根据您要绘制的内容,它有不同的用途,并提供不同的选项:
画布上的任意线(任何大小,任何方向,任何样式)
符合数据特征的行(最小,最大,平均值)
水平/垂直线
在所有情况下,您都必须使用属性markLine.data,并且在此处描述了详细说明:https :
//ecomfe.github.io/echarts-doc/public/en/option.html#series-line.markLine.data
这是我的工作方式,在时间序列上有一条直线。请注意,我无法使yAxis足以绘制一条水平线:还必须指定xAxis(起点和终点)。
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'
}
]
]
}
}]
这是一个小提琴:http : //jsfiddle.net/locinus/qrwron42/
请注意,ECharts确实喜欢在其末尾显示带有箭头符号的markLines,因此我使用symbol:'none'来绘制线条。