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

男娘i 2022-09-11 07:28 264阅读 0赞

效果：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL54aZ54aZ55qG5Li65Yip5p2l5ZWK_size_20_color_FFFFFF_t_70_g_se_x_16]

代码：

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL54aZ54aZ55qG5Li65Yip5p2l5ZWK_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/5cd528f70f2b40b995a19c9aca087739.png