echarts 梯形柱状图

梯形柱状图

效果图：

代码：

//梯形柱状图
// 指定图表的配置项和数据
       var img = new Image();
            img.src = 'img/HBuilder.png'
             option = {
              color: ['#e54035', '#0aacff', '#0ab120', '#e50ee6', '#e6cf1e'],
                 backgroundColor: "#111c4e",
            
                 grid: {
                     left: '3%',
                     right: '4%',
                     bottom: '3%',
                     top: '2%',
                     containLabel: true
                 },
                 yAxis: [{
                     type: 'value',
                     axisLabel: {
                         interval: 0,
                         color: '#d3e0fa'
                     },
                     splitLine: {
                         show: false
                     },
                     axisLine: {
                         show: false
                     },
                     axisTick: {
                         show: false
                     }
                 }],
                 xAxis: [{
                     type: 'category',
                     axisTick: {
                         show: false
                     },
                     data: ['周一', '周二', '周三', '周四', '周五'],
                     axisLabel: {
                         interval: 0,
                         color: '#d3e0fa',
                     },
                     axisTick: {
                         show: false
                     },
                     splitLine: {
                         show: false
                     },
                     axisLine: {
                         show: false
                     },
                     splitArea: {
                         show: false,
                         //  areaStyle: {
                         //      color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
                         //  }
                     }
                 }],
                 series: [{
                         type: 'pictorialBar',
                         symbol: 'path://m205,335l13.125,-254l43.750031,0l13.124969,254l-70,0z',
                         data: [320, 302, 341, 354, 310],
                         barWidth: '50%',
                         // barGap: 1, //柱子之间间距
                         symbolOffset: [0, -15],
                         // xAxisIndex: 0,
                         // yAxisIndex: 0,
                         z: 99,
                         
            itemStyle: {
                            //通常情况下：
            
                            normal: {
            
                                barBorderRadius: 8,
            
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
            
                                color: function (params) {
            
                                    var colorList = [
            
                                        ['rgb(14,102,179)', 'rgb(51,36,169)'],
            
                                        ['#F5cF0D', '#fa9203'],
            
                                        ['#61dbe8', '#0785de'],
            
                                        ['#ff9717', '#ff4518'],
            
                                    ];
            
                                    var index = params.dataIndex;
            
                                    if (params.dataIndex >= colorList.length) {
            
                                        index = params.dataIndex - colorList.length;
            
                                    }
            
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1,
            
                                        [{
            
                                                offset: 0,
            
                                                color: colorList[index][0]
            
                                            },
            
                                            {
            
                                                offset: 1,
            
                                                color: colorList[index][1]
            
                                            }
            
                                        ]);
            
                                }
            
                            },
            
                        },
            
                         label: {
                             show: true,
                             position: 'top',
                             color: '#fff',
                             fontSize: 24,
                         }
                        }
                     
                 ]
             };