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

Question

I use EChart.JS in my project.

Here is my Bar chart:

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);

Answer 1

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',

Answer 2

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 .