echarts图表,带背景阴影渐变的柱状图
const datas = [10, 23, 55, 67];
function max(datas) {
var max = datas[0];
for (var i = 0; i < datas.length; i++) {
if (max < datas[i]) {
max = datas[i];
}
}
return max;
}
// 背景xdata 渐变色柱状图 间隔色 两种 你可以设置多种
var bgData = [];
for (var i = 0; i < datas.length; i++) {
bgData.push(max(datas) + 40);
}
getSymbolData = (datas) => {
let arr = [];
for (var i = 0; i < datas.length; i++) {
arr.push({
value: datas[i],
symbolPosition: 'end',
});
}
return arr;
};
option = {
backgroundColor: '#000F32',
grid: {
left: '8%',
right: '10%',
top: '20%',
bottom: '15%',
},
xAxis: [
{
axisLine: {
show: false, //you边线条
},
axisTick: {
show: false,
},
axisLabel: {
color: '#fff',
fontSize: 20,
},
data: ['Mon', 'Tue', 'Wed', 'Thu'],
},
{
data: datas,
axisLine: {
show: false, //背景线条
lineStyle: {
color: '#CED5E1',
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
},
],
yAxis: [
{
position: 'left',
type: 'value',
splitLine: {
show: false,
},
axisLine: {
show: false, //左边线条
},
axisLabel: {
//左轴汉字
show: false,
},
},
],
series: [
{
type: 'bar',
data: datas,
label: {
show: true,
position: 'top', // 汉字位于上方
padding: 40, // 汉字距离柱状图间距
color: '#fff',
fontSize: 18,
fontWeight: 800,
},
itemStyle: {
color: '#1F77D7',
},
barWidth: 32,
},
{
type: 'pictorialBar',
symbol:'image://图片地址',
symbolSize: [85, 3],
symbolOffset: [1, -2],
z: 12,
itemStyle: {
normal: {
color: '#fff',
},
},
data: getSymbolData(datas),
},
{
type: 'bar',
xAxisIndex: 1,
data: bgData,
itemStyle: {
normal: {
// barBorderRadius: 20,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 1,
color: '#082858',
},
{
offset: 0.5,
color: '#000F32',
},
{
offset: 0.4,
color: '#000F32',
},
{
offset: 0.1,
color: '#082858',
},
]),
},
},
z: 1,
},
],
};