梯形柱状图
效果图:
代码:
//梯形柱状图
// 指定图表的配置项和数据
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,
}
}
]
};