echarts柱状图顶端用折线图连接起来

蔚落 2022-09-11 15:10 270阅读 0赞

效果：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL54aZ54aZ55qG5Li65Yip5p2l5ZWK_size_19_color_FFFFFF_t_70_g_se_x_16]  
代码：

option: {
            color: ["#29676a", "#4CCEFE"],
            tooltip: {},
            grid:{
              top:20,
              height:120
            },
            xAxis: {
              data: ['2021-8-1', '2021-8-2', '2021-8-3', '2021-8-4', '2021-8-5', '2021-8-6'],
              axisLine: {  //这是x轴文字颜色
                lineStyle: {
                  color: "#fff",
                }
              }
            },
            yAxis: {
              splitArea: {show: false},
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#85a6a9'],
                  width: 1,
                  type: 'dashed',
                },
              },
              axisLine: {  //这是x轴文字颜色
                lineStyle: {
                  color: "#fff",
                }
              }
    
            },
    
            series: [
              {
                barWidth: 20,
                data: ["327", "259", "95", "374","150","399"],
                name: "总量",
                type: "bar",
              },
              {
                barGap: "-100%", /*这里设置包含关系，只需要这一句话*/
                barWidth: 20,
                data: ["217", "124", "43", "210","50","310"],
                name: "分量",
                type: "bar"
              },
              {
                data: ["327", "259", "95", "374","150","399"],/* 这里要和第一组数据一样、才能保持在最高处*/
                type: 'line',
                symbol: 'circle',//拐点样式
                symbolSize: 18,//拐点大小
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 3,//折线宽度
                      color: "#27dba0"//折线颜色
                    },
                    color: '#27dba0',//拐点颜色
                    borderColor: '#fff',//拐点边框颜色
                    borderWidth: 3//拐点边框大小
                  },
                  emphasis: {
                    color: '#4CCEFE'//hover拐点颜色定义
                  }
                },
              }
            ]
          }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL54aZ54aZ55qG5Li65Yip5p2l5ZWK_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/76d606709c7145fe8136fee53d039024.png