ECharts Apache:条形图-添加水平水平线

Question

我在我的项目中使用ecchart . js。

我需要添加一个重音作为水平水平线为每个酒吧。也可以添加一个默认值

var myChart = echarts.init(document.getElementById("sleep_graph"), null, { renderer: 'svg' });
var option;
option = {
xAxis: {
type: 'category',
data: [1, 2, 3, 4],
show: false
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [
{
data: [
{
value: @sleepGraph.DeepSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '@sleepGraph.DeepSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '@sleepGraph.DeepSleepDurationGraphColor',
fontWeight: 'bold'
},
labelLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'black',
width: 55,
}
}
},
{
value: @sleepGraph.SleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '@sleepGraph.SleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '@sleepGraph.SleepDurationGraphColor',
fontWeight: 'bold'
}
},
{
value: @sleepGraph.LightSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '@sleepGraph.LightSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '@sleepGraph.LightSleepDurationGraphColor',
fontWeight: 'bold'
}
},
{
value: @sleepGraph.RemSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '@sleepGraph.RemSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '@sleepGraph.RemSleepDurationGraphColor',
fontWeight: 'bold'
}
}
],
type: 'bar',
barWidth: 35,
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);

Answer 1

我没能看到你的图像，但从你的描述，我认为这是有可能这样做与一个额外的酒吧系列堆叠在它。参见:https://www.makeapie.com/editor.html?c=xwigwFaytn和https://www.makeapie.com/editor.html?c=xD58D_iJlS。

Answer 2

根据ESChart，只有图表线有markline属性(但它只提供单个markline)。因此eschart。js中无法在条形图中添加水平线

但是你可以试试highcharts，它提供了在图表上添加标记。

marker: {
symbol: 'c-rect',
lineColor: 'red',
lineWidth:3,
radius: 10
},
type: 'scatter',

编辑:ApexChart

这是MIT许可证，它支持在图表上显示标记

https://jsfiddle.net/s3xfqw6p/