Echarts 如何在条形图上的特定条形之间添加垂直虚线？

问题描述 投票：0回答：2

我正在使用 Echarts 并创建了一个条形图。 我试图添加两条垂直虚线来分隔 

Source3
和 
Source4
，并添加另一条垂直虚线来显示 
SourceSix
和 
SourceSeven
的分隔。 我尝试过将 
markLine
弄乱到条形图上，并在条形图后添加 
line
作为数据的一部分，但我似乎可以弄清楚这一点。

代码：

<!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>

所需输出：

enter image description here

javascript echarts
2个回答
11
投票

我已经成功地使用以下选项实现了与您正在寻找的类似效果：我已将您的x轴转换为“值”x轴，以便我们可以将markerLines放在特定位置在你的系列之间。这样做时，您需要为每个数据点分配一个 x 轴索引，但它还允许您向 sourceThree 和 sourceSix 添加一个附加点，这将允许您在两者之间画一条线作为类型：'平均'标记线：

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]
            ]
        }
    ]
};

这应该会产生以下图表，您可以通过将该选项粘贴到此处来亲自尝试： https://echarts.baidu.com/echarts2/doc/example/bar13.html#

Chart fiddle

0
投票

我能够通过在系列定义时仅给出 x 轴而不是 y 轴的方式来实现此目的。当给出 y 轴时，它会水平显示你的线，而不是垂直显示。下面是代码

series: [
          {
            name: `Max. of RES ${resPeak?.max_production}`,
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            markLine: {
              data: [
                {
                  xAxis: resPeak.max_production > 0 ? resPeakIndex : 0,
                  label: {
                    show: true,
                    formatter:
                      resPeak.max_production > 0
                        ? `Max. of RES \n${resPeak?.max_production}`
                        : `Max. of RES \n 0`,
                    position: "end",
                  },
                  lineStyle: {
                    type: "dotted",
                    color: "#00008B",
                  },
                  symbol: "circle",
                },
              ],
            },
          },[![enter image description here][1]][1]
    ]

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.