const offsetX = 10;
const offsetY = 5;
// 绘制左侧面
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 VALUE = [110, 80, 90, 140, 120, 110, 150, 200]; // 最后一位为隐藏值，用于撑开y轴
const MAX = [10, 8, 15, 19, 13, 11, 15];
const legendData = [
{
name: '正常运行',
textStyle: {
color: '#eeeeef',
},
itemStyle: {
color: '#004B76',
},
},
{
name: '异常运行',
textStyle: {
color: '#eeeeef',
},
itemStyle: {
color: '#AD7E19',
},
},
];
option = {
backgroundColor: '#03060f',
fontSize: 14,
legend: {
top: 20,
right: '10',
itemWidth: 18,
itemHeight: 7,
textStyle: {
color: '#eeeeef',
fontSize: 14,
},
data: legendData,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
borderColor: '#374d74',
backgroundColor: 'rgba(7, 33, 78, 0.67)',
textStyle: {
color: '#eeeeef', //设置文字颜色
},
borderWidth: 1,
padding: 5,
formatter: function (params) {
var str =
// params[0].name +
// '</br>' +
params[0].marker.replace('border-radius:10px;', '') +
params[0].seriesName +
'：' +
params[0].value +
'</br>' +
params[1].marker.replace('border-radius:10px;', '') +
params[1].seriesName +
'：' +
params[1].value +
'</br>';
return str;
},
},
grid: {
left: 10,
right: 15,
bottom: 10,
top: 60,
containLabel: true,
},
color: ['#004B76', '#AD7E19'],
xAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {
width: 1,
color: '#414958',
},
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 14,
color: '#dedfe2',
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
yAxis: {
type: 'value',
// name: '单位:个',
nameTextStyle: {
fontSize: 14,
},
axisLine: {
show: false,
lineStyle: {
color: '#dedfe2',
},
},
splitLine: {
show: true,
lineStyle: {
color: '#414958',
},
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 14,
},
data: [10, 300]
},
series: [
{
type: 'custom',
name: '正常运行',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
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: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#004B76',
},
{
offset: 1,
color: '#004B76',
},
]),
},
},
{
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: '#0C83A0',
},
{
offset: 1,
color: '#0C83A0',
},
]),
},
},
{
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: '#0077C2',
},
{
offset: 1,
color: '#0077C2',
},
]),
},
},
],
};
},
data: VALUE,
},
{
type: 'custom',
name: '异常运行',
renderItem: function (params, api) {
const index = api.value(0); // 索引
const curValue = api.value(1);
const preValue = VALUE[index] + 2; // 增加上线柱形的间隔
const location = api.coord([index, preValue + curValue]);
return {
type: 'group',
children: [
{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: preValue || api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), preValue]),
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#72510B',
},
{
offset: 1,
color: '#72510B',
},
]),
},
},
{
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: preValue || api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), preValue]),
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#AD7E19',
},
{
offset: 1,
color: '#AD7E19',
},
]),
},
},
{
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: preValue || api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), preValue]),
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FFC300',
},
{
offset: 1,
color: '#FFC300',
},
]),
},
},
],
};
},
data: MAX,
},
],
};