const offsetX = 10;
const offsetY = 3;
// 绘制左侧面
const CubeLeft =echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
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);
const MAX = [800, 800, 800, 800, 800, 800, 800];
const VALUE = [210.9, 260.8, 204.2, 504.9, 740.5, 600.3, 119.0];
option = {
backgroundColor:'black',
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function (params, ticket, callback) {
const item = params[1];
// return item.name + ' : ' + item.value;
return (
params[1].name +
"\n" +
"<div>" +
"<span style='display:inline-block;border-radius:1px;width:10px;height:10px;background:rgba(63, 196, 235, 1);option:0.5'></span>" +
"<span style=''> " +
"平均执行到位率" +
": " +
params[1].value +
"%" +
"\n" +
" </span>"
);
},
},
color: ['RGBA(119, 198, 220, 1)'],
legend: {
itemWidth: 12,
itemHeight: 12,
itemGap: 12,
icon:'',
top: "5%",
right:'5%',
textStyle: {
color: "#B2C7CD",
fontSize: 14,
},
},
grid: {
left: 0,
right: '7%',
bottom: "10%",
top: '20%',
containLabel: true,
},
xAxis: {
name:'(时)',
nameTextStyle: {
// x轴name的样式调整
color: "#B2C7CD",
fontSize: 14,
padding: [30, 0, 0, -10], // 加上padding可以调整其位置
},
type: "category",
axisLabel: {
interval: 0,
textStyle: {
color: "#B2C7CD",
},
formatter: function (params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 3; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
},
// 默认x轴字体大小
fontSize: 12,
// margin:文字到x轴的距离
margin: -15,
},
data:[1,3,5,7,9,11,13,15,17,19,21,23],
axisLine: {
show: true,
lineStyle: {
color: "#394C4F",
},
},
offset: 25,
axisTick: {
show: false,
},
},
yAxis: {
min: 0,
// max: 1200,
// interval: 200,
type: "value",
name: "单位：KW.h",
nameTextStyle: {
// x轴name的样式调整
color: "#B2C7CD",
fontSize: 14,
},
axisLabel: {
textStyle: {
color: "#B2C7CD",
},
},
axisLine: {
show: true,
lineStyle: {
color: "#394C4F",
},
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#394C4F",
},
},
axisTick: {
show: false,
},
boundaryGap: ["20%", "20%"],
},
series: [
{
type: "custom",
name:'电量',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
var color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0.4,
color: "rgba(68, 245, 240, .7)",
},
{
offset: 1,
color: "rgba(216, 216, 216, 0.10)",
},
]);
return {
type: "group",
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: color,
},
},
{
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: color,
},
},
{
type: "CubeTop",
shape: {
api,
xValue: api.value(2),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: color,
},
},
],
};
},
data: VALUE,
},
{
type: "bar",
barWidth: 11,
symbolSize: [10 - 4, (10 * (10 - 4)) / 10],
itemStyle: {
color: "transparent",
},
tooltip: {},
data: MAX,
},
],
};