const data = [1700, 2800, 3700, 3600, 4800, 5700, 1700, 4800, 3700];
var barWidth = 40;
const offsetX = 20;
const offsetY = 10;
// 绘制左侧面
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);
var option = {
backgroundColor: '#012366',
tooltip: {
trigger: 'axis',
formatter: function (params) {
var str = params[0].name + ":";
params.filter(function (item) {
if (item.componentSubType == "bar") {
str += "<br/>" + item.seriesName + "：" + item.value;
}
});
return str;
},
},
legend: {
show: true,
bottom: '0',
itemWidth: 30,
itemHeight: 11,
itemStyle: {
color: 'rgb(12,160,254)'
},
textStyle: {
fontSize: 22,
color: 'rgb(233,240,255)'
},
data: ['进港货量'],
right: "center", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
bottom: "15px"
},
//图表大小位置限制
grid: {
x: '13%',
x2: '14%',
y: '20%',
y2: '20%',
},
xAxis: {
// data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
data: ['非洲', '欧洲', '日韩', '中东', '北美', '南美', '南亚', '东南亚', '西南太平洋'],
//坐标轴
axisLine: {
show: false,
lineStyle: {
width: 1,
color: '#214776'
},
textStyle: {
color: '#fff',
fontSize: 20
}
},
type: 'category',
axisLabel: {
textStyle: {
color: 'rgba(233, 240, 255, 1)',
fontWeight: 500,
fontSize: '20'
}
},
axisTick: {
textStyle: {
color: '#fff',
fontSize: '16'
},
show: false,
},
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: false,
lineStyle: {
type: 'dashed',//线的类型 虚线
color: '#DEDEDE',
},
},
},
yAxis: [
{
name: '%',
nameTextStyle: {
color: 'rgb(233,240,255)',
fontSize: 22,
padding: 10,
},
min: 0,//最小
max: 30,//最大
interval: 5,//相差
type: 'value',
splitLine: {
show: false,
},
axisTick: {
show: true,
inside: true,
length: 7
},
axisLine: {
show: true,
lineStyle: {
color: 'rgb(195,213,248)'
}
},
//坐标值标注
axisLabel: {
show: true,
textStyle: {
color: 'rgba(195, 213, 248, 1)',
fontSize: 22
}
},
}, {
name: '吨',
nameTextStyle: {
color: 'rgb(233,240,255)',
fontSize: 22,
padding: 10,
},
min: 0,//最小
max: 6000,//最大
interval: 1000,//相差
type: 'value',
splitLine: {
show: false,
},
axisTick: {
show: true,
inside: true,
length: 7
},
axisLine: {
show: true,
lineStyle: {
color: 'rgb(195,213,248)'
}
},
//坐标值标注
axisLabel: {
show: true,
textStyle: {
color: 'rgba(195, 213, 248, 1)',
fontSize: 22
}
},
}
],
series: [
{
name: '',
type: 'line',
showAllSymbol: true,
lineStyle: {
color: "#00D8FF"
},
showSymbol: true,
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
color: "#121E43",
borderColor: '#00D8FF',
borderWidth: 3
}
},
data: ["20", "25", "24", "27", "14", '18', '15', '19', '29',],
yAxisIndex: 0,
},
//中
// {
// z: 1,
// name: '进港货量',
// type: "bar",
// yAxisIndex: 1,
// barWidth: barWidth,
// barGap: 0,
// data: data,
// itemStyle: {
// normal: {
// color: {
// type: "linear",
// x: 0,
// x2: 1,
// y: 0,
// y2: 0,
// colorStops: [
// { offset: 0, color: 'rgba(60, 122, 185, 1)' },
// { offset: 0.5, color: 'rgba(60, 122, 185, 1)' },
// { offset: 0.5, color: 'rgba(51, 152, 188, 1)' },
// { offset: 1, color: 'rgba(51, 152, 188, 1)' }
// ],
// },
// //柱形图上方标题
// }
// },
// },
// //下
// {
// z: 2,
// name: '绿色',
// type: "pictorialBar",
// data: data.map(item => item + 90),
// symbol: "diamond",
// yAxisIndex: 1,
// symbolOffset: ["0%", "0%"],
// symbolSize: [barWidth, 10],
// itemStyle: {
// normal: {
// color: 'transparent'
// },
// },
// tooltip: {
// show: false,
// },
// },
// //上
// {
// z: 3,
// name: '绿色',
// type: "pictorialBar",
// symbolPosition: "end",
// data: data,
// yAxisIndex: 1,
// symbol: "diamond",
// symbolOffset: ["0%", "-58%"],
// symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
// itemStyle: {
// normal: {
// borderWidth: 2,
// color: 'rgba(56, 227, 255, 1)'
// },
// },
// tooltip: {
// show: false,
// },
// },
{
yAxisIndex: 1,
type: 'custom',
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: 'rgba(60, 122, 185, 1)'
},
{
offset: 1,
color: 'rgba(51, 152, 188, 1)',
},
]),
},
},
{
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: 'rgba(77, 172, 255, 1)',
},
{
offset: 1,
color: 'rgba(68, 217, 252, 1)',
},
]),
},
},
{
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: 'rgba(56, 227, 255, 1)',
},
{
offset: 1,
color: 'rgba(56, 227, 255, 1)',
},
]),
},
},
],
};
},
data: data,
},
{
type: 'bar',
yAxisIndex: 1,
itemStyle: {
color: 'transparent',
},
tooltip: {},
data: data,
},
],
}