javascriptecharts

Echarts how do you add dashed vertical line in between specific bars on bar chart?


I am working with Echarts and created a bar chart. I am trying to add two vertical dashed lines to separate Source3 and Source4 and another dashed vertical line to show separation of SourceSix and SourceSeven. I have tried messing around with markLine to a bar and adding a line as part of the data after a bar but I can seem to figure this out.

The code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- including ECharts file -->
    <script src="echarts.js"></script>
</head>
<body>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 1600px;height:800px;"></div>
<script type="text/javascript">
    // based on prepared DOM, initialize echarts instance
    var myChart = echarts.init(document.getElementById('main'));

    // specify chart configuration item and data
    var option = {
        title: {
            text: 'Counts by Intel Source'
        },

        legend: {
            data:['Count']

        },
        xAxis: {
            type: 'category',
            data: ['SourceOne','SourceTwo','SourceThree','SourceFour','SourceFive','SourceSix','SourceSeven','SourceEight'],
        axisLabel: {
          fontWeight: 'bold',
          fontSize: 16,
          margin: 1,
            }
        },
        yAxis: {
          type: 'log',
          axisLabel: {
            fontWeight: 'bold',
          }
        },

        labelLine: {
     lineStyle: {
                 color: 'rgba(255, 255, 255, 0.3)'
             }
        },

    series: [
      {
          name: 'SourceOne',
          type: 'bar',
          stack: 'Chart 1',
          color: '#ed2d2e',
          data: [1819931,,,,,,,],
          },
        {
            name: 'SourceTwo',
            type: 'bar',
            stack: 'Chart 1',
            color: '#0bb5b5',
            data: [,1291396,,,,,,]
        },
        {
            name: 'SourceThree',
            type: 'bar',
            stack: 'Chart 1',
            color: '#662c91',
            data: [,,161,,,,,]
        },
        {
        name: 'SourceFour',
        type: 'bar',
        stack: 'Chart 1',
        color: '#0e107b',
        data: [,,,133279,,,,]
    },

    {
        name: 'SourceFive',
        type: 'bar',
        stack: 'Chart 1',
        color: '#a11d20',
        data: [,,,,1275,,,]
    },

    {
        name: 'SourceSix',
        type: 'bar',
        stack: 'Chart 1',
        color: '#f37d22',
         data: [,,,,,119,,]
    },
    {
        name: 'SourceSeven',
        type: 'bar',
        stack: 'Chart 1',
        color: '#008c47',
        data: [,,,,,,25224,]
    },
    {
        name: 'SourceEight',
        type: 'bar',
        stack: 'Chart 1',
        color: '#1859a9',
        data: [,,,,,,,6798]
    },
]
};

    // use configuration item and data specified to show chart
    myChart.setOption(option);
</script>

Desired output:

enter image description here


Solution

  • I've managed to achieve a similar effect to what you're looking for using the following option: I've converted your x-axis to be a 'value' x-axis, so that we can put markerLines at specific places in between your series. In doing so, you need to assign an x-axis index to each of your data points, but it also allows you to add an additional point to sourceThree and sourceSix which would let you draw a line in between the two as a type:'average' markLine:

    option = {
       title : {
            text: 'Chart Title',
            subtext: 'subtitle'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer:{
                show: true,
                type : 'cross',
                lineStyle: {
                    type : 'dashed',
                    width : 1
                }
            },
            formatter : function (params) {
                return params.seriesName + ' : [ '
                       + params.value[0] + ', ' 
                       + params.value[1] + ' ]';
            }
        },
        xAxis : [
            {
                type : 'value'
            }
        ],
        yAxis : [
            {
                type : 'log',
                axisLine: {
                    lineStyle: {
                        color: '#dc143c'
                    }
                }
            }
        ],
        series : [
            {
                name:' SourceOne',
                type:'bar',
                data:[
                   [1, 1819931]
                ]
            },
          {
                name:' SourceTwo',
                type:'bar',
                data:[
                   [2, 1291396]
                ]
            },
                {
                name:' SourceThree',
                type:'bar',
                data:[
                   [3, 161], [4, 0]
                ],
                markLine : {
                  silent: true, // ignore mouse events
                  data : [
                    // Horizontal Axis (requires valueIndex = 0)
                    {type : 'average', name: 'Marker Line', valueIndex: 0, itemStyle:{normal:{color:'#1e90ff'}}},
                  ]
                }
            },
                  {
                name:' SourceFour',
                type:'bar',
                data:[
                   [4, 133279]
                ]
            },
          {
                name:' SourceFive',
                type:'bar',
                data:[
                   [5, 1275]
                ]
            },
                {
                name:' SourceSix',
                type:'bar',
                data:[
                   [6, 119], [7, 0] // this extra data point is the hack to get your marker line in between your series
                ],
                markLine : {
                  silent: true, // ignore mouse events
                  label: {show: false},
                  data : [
                    // Horizontal Axis (requires valueIndex = 0)
                    {type: 'average', name: 'Line Marker', valueIndex: 0},
                  ]
                }
            },
          {
                name:' SourceSeven',
                type:'bar',
                data:[
                   [7, 25224]
                ]
            },
          {
                name:' SourceEight',
                type:'bar',
                data:[
                   [8, 6798]
                ]
            }
        ]
    };
    

    This should result in the following chart, and you can try it yourself by pasting that option here: https://echarts.baidu.com/echarts2/doc/example/bar13.html#

    Chart fiddle