echarts 伪3D柱状图
这里写自定义目录标题
外观1
![请添加图片描述](https://img-blog.csdnimg.cn/direct/764abbf0062d4fe7b9f217d92d9af1a6.png
const initNYBar = () => {
var chartDom = document.getElementById('NYbar');
var myChart = echarts.init(chartDom);
var option;
const labels = ['01', '02', '03', '04'];
const seriesData = [
{
label: '01',
value: [32],
},
{
label: '02',
value: [24],
},
{
label: '03',
value: [42],
},
{
label: '04',
value: [20],
}
]
const colors = [
[
{ offset: 0, color: 'rgba(31, 215, 144, 1)' },
{ offset: 1, color: 'rgba(6, 239, 228, 1)' },
],
[
/* { offset: 0, color: 'rgba(31, 215, 144, 1)' },
{ offset: 1, color: 'rgba(6, 239, 228, 1)' },*/
{ offset: 0, color: 'rgba(31, 215, 144, 1)' },
{ offset: 1, color: 'rgba(6, 239, 228, 1)' },
],
[
{ offset: 0, color: 'rgba(31, 215, 144, 1)' },
{ offset: 1, color: 'rgba(6, 239, 228, 1)' },
],
[
{ offset: 0, color: 'rgba(31, 215, 144, 1)' },
{ offset: 1, color: 'rgba(6, 239, 228, 1)' },
],
];
option = {
grid: {
bottom: 50,
top: 80,
right: 0,
left: 65
},
xAxis: [
{
type: 'category',
data: [
'1h',
'3h',
'6h',
'9h'
],
offset: 10,
axisLine: {
// 轴线设置
show: true, // 显示轴线
lineStyle: {
// 轴线样式设置
color: '#C5C5C5', // 轴线颜色
width: 1, // 轴线宽度
type: 'solid' // 轴线类型-虚线
}
},
axisTick: {
show: true,
alignWithLabel: true
},
axisLabel: {
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
}
}
],
yAxis: [
{
name: '超纳水库统计(座)',
nameTextStyle: {
fontSize: 14,
color: '#fff',
},
splitLine: {
show: true,
lineStyle: {
color: '#949598',
type: 'solid'
}
},
axisLine: {
// 轴线设置
show: true, // 显示轴线
lineStyle: {
// 轴线样式设置
color: '#C5C5C5', // 轴线颜色
width: 1, // 轴线宽度
type: 'solid' // 轴线类型-虚线
}
},
axisLabel: {
textStyle: {
color: '#F5F5F5', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
}
}
],
legend: {
show: false,
data: getlegendData(),
right: '25',
top: '18',
icon: 'rect',
itemHeight: 10,
itemWidth: 10,
textStyle: {
color: '#000'
}
},
series: getSeriesData()
};
// 定义柱状图左侧图形元素
const leftRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 23, //柱状图宽
zWidth: 8, //阴影折角宽
zHeight: 0 //阴影折角高
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
const p4 = [shape.x + shape.width / 2, shape.y];
ctx.beginPath(); // 开启新的路径
ctx.moveTo(p0[0], p0[1]);
ctx.lineTo(p1[0], p1[1]);
ctx.lineTo(p2[0], p2[1]);
ctx.lineTo(p3[0], p3[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.lineTo(p0[0], p0[1]);
ctx.closePath();
}
});
// 定义柱状图顶部图形元素
const topRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 20,
zWidth: 15,
zHeight: 8
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p1 = [shape.x - shape.width / 2 - 2, shape.y - 0.5];
const p3 = [xAxisPoint[0] + shape.width / 2 , xAxisPoint[1]];
const p4 = [shape.x + shape.width / 2 , shape.y - 0.5];
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
const p6 = [
shape.x + shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight / 2
];
const p7 = [
shape.x - shape.width / 2 + shape.zWidth / 2,
shape.y - shape.zHeight / 2
];
ctx.moveTo(p4[0], p4[1]);
ctx.lineTo(p6[0], p6[1]);
ctx.lineTo(p7[0], p7[1]);
ctx.lineTo(p1[0], p1[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.closePath();
}
});
// 定义柱状图右侧图形元素
const rightRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 20,
zWidth: 15,
zHeight: 8
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p1 = [shape.x - shape.width / 2, shape.y - 0.5];
const p3 = [xAxisPoint[0] + shape.width / 2 + 2, xAxisPoint[1] ];
const p4 = [shape.x + shape.width / 2 + 2, shape.y];
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
const p6 = [
shape.x + shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight / 2
];
const p7 = [
shape.x - shape.width / 2 + shape.zWidth / 2,
shape.y - shape.zHeight / 2
];
ctx.moveTo(p4[0], p4[1]);
ctx.lineTo(p3[0], p3[1]);
ctx.lineTo(p5[0], p5[1]);
ctx.lineTo(p6[0], p6[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.closePath();
}
});
// 注册图形元素
echarts.graphic.registerShape('leftRect', leftRect);
echarts.graphic.registerShape('rightRect', rightRect);
echarts.graphic.registerShape('topRect', topRect);
function getlegendData() {
let data = [];
labels.forEach((item, index) => {
data.push(
{
name: item,
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, colors[index]),
},
}
)
})
return data
}
function getSeriesData() {
const data = [];
seriesData.forEach((item, index) => {
data.push(
{
type: 'custom',
name: item.label,
renderItem: function (params, api) {
return getRenderItem(params, api);
},
data: item.value,
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
},
},
}
)
})
return data
}
function getRenderItem(params, api) {
const index = params.seriesIndex;
let location = api.coord([api.value(0) + index, api.value(1)]);
let extent = api.size([0, api.value(1)]);
return {
type: 'group',
children: [
{
type: 'leftRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
},
{
type: 'rightRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
fill: 'rgba(26, 145, 80)'
},
{
type: 'topRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
// style: api.style()
style: {
fill: 'rgba(119, 255, 181)'
}
}
]
};
}
option && myChart.setOption(option);
}
外观2
const initNYBar = () => {
var chartDom = document.getElementById('NYbar');
var myChart = echarts.init(chartDom);
var option;
const labels = ['01', '02', '03', '04'];
const seriesData = [
{
label: '01',
value: [32],
},
{
label: '02',
value: [24],
},
{
label: '03',
value: [42],
},
{
label: '04',
value: [20],
}
]
const colors = [
[
{ offset: 0, color: 'rgba(31, 215, 144, 1)' },
{ offset: 1, color: 'rgba(6, 239, 228, 1)' },
],
[
/* { offset: 0, color: 'rgba(31, 215, 144, 1)' },
{ offset: 1, color: 'rgba(6, 239, 228, 1)' },*/
{ offset: 0, color: 'rgba(31, 215, 144, 1)' },
{ offset: 1, color: 'rgba(6, 239, 228, 1)' },
],
[
{ offset: 0, color: 'rgba(31, 215, 144, 1)' },
{ offset: 1, color: 'rgba(6, 239, 228, 1)' },
],
[
{ offset: 0, color: 'rgba(31, 215, 144, 1)' },
{ offset: 1, color: 'rgba(6, 239, 228, 1)' },
],
];
option = {
grid: {
bottom: 50,
top: 80,
right: 0,
left: 65
},
xAxis: [
{
type: 'category',
data: [
'1h',
'3h',
'6h',
'9h'
],
offset: 10,
axisLine: {
// 轴线设置
show: true, // 显示轴线
lineStyle: {
// 轴线样式设置
color: '#C5C5C5', // 轴线颜色
width: 1, // 轴线宽度
type: 'solid' // 轴线类型-虚线
}
},
axisTick: {
show: true,
alignWithLabel: true
},
axisLabel: {
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
}
}
],
yAxis: [
{
name: '超纳水库统计(座)',
nameTextStyle: {
fontSize: 14,
color: '#fff',
},
splitLine: {
show: true,
lineStyle: {
color: '#949598',
type: 'solid'
}
},
axisLine: {
// 轴线设置
show: true, // 显示轴线
lineStyle: {
// 轴线样式设置
color: '#C5C5C5', // 轴线颜色
width: 1, // 轴线宽度
type: 'solid' // 轴线类型-虚线
}
},
axisLabel: {
textStyle: {
color: '#F5F5F5', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
}
}
}
],
legend: {
show: false,
data: getlegendData(),
right: '25',
top: '18',
icon: 'rect',
itemHeight: 10,
itemWidth: 10,
textStyle: {
color: '#000'
}
},
series: getSeriesData()
};
// 定义柱状图左侧图形元素
const leftRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 29, //柱状图宽
zWidth: 8, //阴影折角宽
zHeight: 0 //阴影折角高
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p0 = [shape.x - shape.width / 2 + 2.5, shape.y - shape.zHeight];
const p1 = [shape.x - shape.width / 2 + 2.5, shape.y - shape.zHeight];
const p2 = [xAxisPoint[0] - shape.width / 2 + 2.5, xAxisPoint[1]];
const p3 = [xAxisPoint[0] + shape.width / 2 + 2.5, xAxisPoint[1]];
const p4 = [shape.x + shape.width / 2 + 2.5, shape.y];
ctx.beginPath(); // 开启新的路径
ctx.moveTo(p0[0], p0[1]);
ctx.lineTo(p1[0], p1[1]);
ctx.lineTo(p2[0], p2[1]);
ctx.lineTo(p3[0], p3[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.lineTo(p0[0], p0[1]);
ctx.closePath();
}
});
// 定义柱状图顶部图形元素
const topRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 20,
zWidth: 15,
zHeight: 8
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p1 = [shape.x - shape.width / 2 - 2.5, shape.y];
const p3 = [xAxisPoint[0] + shape.width / 2 , xAxisPoint[1]];
const p4 = [shape.x + shape.width / 2 + 6, shape.y];
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
const p6 = [
shape.x + shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight / 2
];
const p7 = [
shape.x - shape.width / 2 + shape.zWidth / 2,
shape.y - shape.zHeight / 2
];
ctx.moveTo(p4[0], p4[1]);
ctx.lineTo(p6[0], p6[1]);
ctx.lineTo(p7[0], p7[1]);
ctx.lineTo(p1[0], p1[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.closePath();
}
});
// 定义柱状图右侧图形元素
const rightRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 20,
zWidth: 15,
zHeight: 8
},
buildPath: function (ctx, shape) {
const api = shape.api;
const xAxisPoint = api.coord([shape.xValue, 0]);
const p1 = [shape.x - shape.width / 2, shape.y];
const p3 = [xAxisPoint[0] + shape.width / 2 + 6.5, xAxisPoint[1] ];
const p4 = [shape.x + shape.width / 2 + 6.5, shape.y];
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
const p6 = [
shape.x + shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight / 2
];
const p7 = [
shape.x - shape.width / 2 + shape.zWidth / 2,
shape.y - shape.zHeight / 2
];
ctx.moveTo(p4[0], p4[1]);
ctx.lineTo(p3[0], p3[1]);
ctx.lineTo(p5[0], p5[1]);
ctx.lineTo(p6[0], p6[1]);
ctx.lineTo(p4[0], p4[1]);
ctx.closePath();
}
});
// 注册图形元素
echarts.graphic.registerShape('leftRect', leftRect);
echarts.graphic.registerShape('rightRect', rightRect);
echarts.graphic.registerShape('topRect', topRect);
function getlegendData() {
let data = [];
labels.forEach((item, index) => {
data.push(
{
name: item,
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, colors[index]),
},
}
)
})
return data
}
function getSeriesData() {
const data = [];
seriesData.forEach((item, index) => {
data.push(
{
type: 'custom',
name: item.label,
renderItem: function (params, api) {
return getRenderItem(params, api);
},
data: item.value,
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
},
},
}
)
})
return data
}
function getRenderItem(params, api) {
const index = params.seriesIndex;
let location = api.coord([api.value(0) + index, api.value(1)]);
let extent = api.size([0, api.value(1)]);
return {
type: 'group',
children: [
{
type: 'leftRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
},
{
type: 'rightRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
// style: api.style()
style:{
fill: 'rgba(26, 145, 80, 1)'
}
},
{
type: 'topRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
// style: api.style()
style: {
fill: 'rgba(119, 255, 181)'
}
}
]
};
}
option && myChart.setOption(option);
}