I use EChart.JS in my project.
I need to add an accent as a horizontal level line for each bar. And also to add a default value (red dashed line).
So it should look something like this:
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);
According to ESChart , there's only chart line has markline property (But it only provide single markline). So there's no way to add horizontal level line to bar chart in ESChart.js
But you can try highcharts , it provides adding marker at the chart .
marker: {
symbol: 'c-rect',
lineColor: 'red',
lineWidth:3,
radius: 10
},
type: 'scatter',
I failed to see your image but from your description, I think it's possible to do so with an extra bar series stacking on it. See examples at: https://www.makeapie.com/editor.html?c=xwigwFaytn and https://www.makeapie.com/editor.html?c=xD58D_iJlS .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.