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

【问题标题】：ECharts Apache: Bar chart - add horizontal level lineECharts Apache：条形图 - 添加水平水平线
【发布时间】：2021-12-15 04:48:28
【问题描述】：

我在我的项目中使用 EChart.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);

【问题讨论】：

标签： javascript bar-chart echarts

【解决方案1】：

根据ESChart，只有chart line has markline property（但它只提供单个标记线）。所以无法在 ESChart.js 中给条形图添加水平线

但是你可以试试highcharts，它提供adding marker at the chart。

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

编辑： ApexChart

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

https://jsfiddle.net/s3xfqw6p/

【讨论】：

你知道具有相同功能的 MIT 许可库吗？
@MichaelKostiuchenko 是的，我编辑了我的答案。

【解决方案2】：

我没有看到您的图片，但根据您的描述，我认为可以通过在其上堆叠一个额外的条形系列来做到这一点。请参阅以下示例：https://www.makeapie.com/editor.html?c=xwigwFaytn 和 https://www.makeapie.com/editor.html?c=xD58D_iJlS。

【讨论】：