echarts 柱状图上下截面圆柱

551 阅读1分钟

效果图

1667809589849.jpg

只需采用象形图做上下圆面,在series中添加两项象形图,数据用柱体数据即可

  //柱底圆片
         {
          
            name: '',
            type: 'pictorialBar',
            symbolSize: [15, 6], //调整截面形状
            symbolOffset: [0, 3],
            z: 12,
            itemStyle: {
              color: '#1E80E4',
            },
            // data: line,
          },

          //柱顶圆片
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [15, 6], //调整截面形状
            symbolOffset: [0, -3],
            z: 12,
            symbolPosition: 'end',
            itemStyle: {
              color: '#16BBED',
            },
            // data: line,
          },