Apfll 2016-12-28 08:42 采纳率: 16.7%
浏览 2823
已采纳

echart折柱混合 同一段数据两种展现

echart折柱混合图，需要第一节和最后一节用柱状显示，中间用折线显示，如图所示
图片说明
红色的都是同一段数据，蓝色的都是同一段数据
在option的series中该如何写？

  • 写回答

2条回答 默认 最新

  • 当作看不见 2016-12-28 09:48
    关注

    突然发现自己也是有点无聊了

     <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>bar</title>
    </head>
    <body>
        <div id="bar" style="height: 300px;width:300px"></div>
    </body>
    <script src="js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        var bars=echarts.init( document.getElementById('bar'));
        barOption={
        color:["#cc0000","#0000cc"],
        yAxis:
            {
                gridIndex:0,
                name:'/MB',
                nameGap:0,
                type:'value'
            }

        ,

        xAxis:
            {
                name:'主机ip地址',
                type:'category',
                nameGap:0,
                data:['127.0.0.1','127.0.0.2','127.0.0.3','127.0.0.4']
            }
        ,
        series:[
            {
                name:'1',
                type:'bar',
                stack:'bar',
                data:[110,null,null,80] 
            },
            {
                name:'2',
                type:'bar',
                stack:'bar',
                data:[50,null,null,80]  
            },
            {
                name:'3',
                type:'line',
//              stack:'bar',
                data:[null,88,99,null]  
            },
            {
                name:'4',
                type:'line',
//              stack:'bar',
                data:[null,60,70,null]  
            }
        ]
        };
        bars.setOption(barOption);
    </script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？