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

最新推荐文章于 2023-11-21 16:27:31 发布

南北极之间

最新推荐文章于 2023-11-21 16:27:31 发布

阅读量744

点赞数

分类专栏：前端开发文章标签： echarts html css

本文链接：https://blog.csdn.net/qq_22182989/article/details/120286941

版权

前端开发专栏收录该内容

570 篇文章 52 订阅

订阅专栏

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

代码：

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拐点颜色定义
            }
          },
        }
        ]
    };