echarts折线图和双层柱状图结合绘制

效果:
在这里插入图片描述

代码:

option = {
        color:["#7179CB","#4CCEFE"],
        title: {
            text:"统计总量",
            textStyle:{
                fontSize:16,
                padding:"10px"
            }
        },
        legend: {
            data: ["总量", "分量"],
        },
        tooltip: {},
        xAxis: {
            data: ['a','b','c','d']

        },
        yAxis: {
            splitArea: {show: false}
        },

        series: [
            {
                barWidth: 20,
                data:  ["47", "59", "95", "74",],
                name: "总量",
                type: "bar",
            },
            {
                barGap: "-100%", /*这里设置包含关系,只需要这一句话*/
                barWidth: 20,
                data: ["27", "24", "43", "10", ],
                name: "分量",
                type: "bar"
            },
            {
          data:  ["47", "59", "95", "74",],
          type: 'line',
          symbol: 'circle',//拐点样式
          symbolSize: 18,//拐点大小
          itemStyle: {
            normal: {
              lineStyle: {
                width: 3,//折线宽度
                color: "#FF0000"//折线颜色
              },
              color: 'red',//拐点颜色
              borderColor: '#000000',//拐点边框颜色
              borderWidth: 3//拐点边框大小
            },
            emphasis: {
              color: '#000000'//hover拐点颜色定义
            }
          },
        }
        ]
    };
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值