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

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题