const colorArr = [
['#3ae3fd', '#3593b9', '#47d3fa'],
['#ffae00', '#fabf3f', '#d59200'],
];
let xData = ['01', '02', '03', '04', '05'];
let legendArr = ['发', '上网'];
let datas = [
[1528, 1266.02, 2468.39, 2982.67, 3165.91],
[2844.44, 6505.07, 8016.12, 6350.87, 1474.61],
];
// 借鉴修改得 https://www.isqqw.com/viewer?id=15110 https://www.isqqw.com/viewer?id=38641
const offsetX = 12;
const offsetY = 6;
const barWidth = 30;
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
// console.log(shape);
const c0 = [shape.x, shape.y];
const c1 = [shape.x - offsetX, shape.y - offsetY];
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
const c3 = [xAxisPoint[0], xAxisPoint[1]];
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
},
});
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x, shape.y];
const c2 = [xAxisPoint[0], xAxisPoint[1]];
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
const c4 = [shape.x + offsetX, shape.y - offsetY];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
},
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y];
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
const c3 = [shape.x, shape.y - offsetX];
const c4 = [shape.x - offsetX, shape.y - offsetY];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
},
});
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop);
let series = [];
datas.forEach((item, index) => {
series.push(
{
type: 'custom',
name: legendArr[index],
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
x: (index - datas.length / 2) * barWidth + 15,
children: [
{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colorArr[index % colorArr.length][1],
},
{
offset: 1,
color: colorArr[index % colorArr.length][0],
},
]),
},
},
{
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colorArr[index % colorArr.length][1],
},
{
offset: 1,
color: colorArr[index % colorArr.length][0],
},
]),
},
},
{
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colorArr[index % colorArr.length][0],
},
{
offset: 1,
color: colorArr[index % colorArr.length][0],
},
]),
},
},
],
};
},
data: item,
},
{
type: 'bar',
name: legendArr[index],
barWidth: 25, //当前适配，更改需要同时更改 offsetX,offsetY,barWidth
label: {
normal: {
show: true,
position: 'top',
// formatter: (e) => {
// return e.value + '次';
// },
fontSize: 16,
color: '#fff',
offset: [0, -10],
},
},
itemStyle: {
color: 'transparent',
},
tooltip: {},
data: item,
}
);
});
let colors = ['#3ae3fd', '#000', '#ffae00'];
option = {
backgroundColor: "#000",
tooltip: {
trigger: 'axis',
borderWidth: 0,
backgroundColor: 'rgba(8,36,68,.9)',
color: '#fff',
textStyle: {
color: '#fff',
},
formatter: function (params, ticket, callback) {
let str = params[0].name + '</br>';
params.forEach((item, index) => {
if (item.seriesType == 'custom')
//避免上方数字的bar也展示tooltip数据
str += `
<div style='display:flex;justify-content:space-between;align-items:center'>
<div style='margin-right:20px;'>
<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${colors[index]}"></span>
${item.seriesName}
</div>
<span> ${item.value ? item.value : '-'}</span>
</div>`;
});
return str;
},
},
grid: {
left: '5%',
right: '5%',
top: '12%',
bottom: '5%',
containLabel: true,
},
legend: {
left: 'center',
top: '0%',
show: true,
selectedMode: true, // 取消图例点击事件 目前图例显示隐藏指标值位置会错误
textStyle: {
color: '#fff',
fontSize: 20,
},
data: legendArr.map((item, index) => {
return {
name: item,
textStyle: {
color: '#fff',
fontSize: 20,
},
itemStyle: {
color: colorArr[index % colorArr.length][0],
},
};
}),
},
xAxis: {
type: 'category',
data: xData,
axisLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(239, 247, 253, .1)',
},
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 20,
color: '#fff',
margin: 20,
},
},
yAxis: [
{
name: "kWh",
nameTextStyle: {
color: '#fff',
fontSize: 20,
// padding: [0, 60, 0, 0],
},
type: 'value',
splitLine: {
lineStyle: {
color: '#0f3451',
},
},
axisLine: {
show: false,
lineStyle: {
color: '#87baf8',
},
},
axisTick: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
},
fontSize: 20,
},
},
{
type: 'value',
splitLine: {
lineStyle: {
color: '#0f3451',
},
},
axisLine: {
show: false,
lineStyle: {
color: '#87baf8',
},
},
axisTick: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
},
fontSize: 20,
},
},
],
series: series,
};