let table, layer, form;
let myChart = null,
myChart2 = null;
layui.use(["layer", "table", "form"], function () {
layer = layui.layer;
table = layui.table;
form = layui.form;
// 初始化土建
getCivilEngineering()
//初始化电气
getElectrical()
});
function getCivilEngineering() {
const MAX = [10, 80, 60, 40, 20, 30];
const VALUE = [5, 60, 40, 20, 15, 25];
initCivilEngineering(MAX,VALUE);
}
function initCivilEngineering(MAX,VALUE) {
myChart = echarts.init(document.getElementById("civilEngineering"));
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;
// 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);
const legendData = [
{
name: '未验收',
textStyle: {
color: '#fff',
},
itemStyle: {
color: '#00E6F4',
},
},
{
name: '已验收',
textStyle: {
color: '#fff',
},
itemStyle: {
color: '#1CFFA3',
},
}
];
const option = {
legend: {
selectedMode: false, // 图例点击失效
right: '2%', // 右边距离，可以根据实际情况调整
top: '15%', // 上边距离，可以根据实际情况调整
textStyle: {
color: '#cccccc',
fontSize: 14,
},
icon: 'circle', // 设置图例标记为圆点
data: legendData,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
borderColor: 'rgba(255,255,255,.3)',
backgroundColor: 'rgba(19,51,55,.6)',
textStyle: {
color: 'white', //设置文字颜色
},
borderWidth: 1,
padding: 10,
formatter: function (params) {
var str = params[0].name + '
';
params.forEach(function (item) {
var color = item.seriesName === "未验收" ? '#00FEFC' : '#1CFFA3'; // 注意你之前说颜色反了
str += ''
+ item.seriesName + '：' + item.value + '
';
});
return str;
}
},
grid: {
left: '2%',
right: '2%',
bottom: '8%',
top: '25%',
containLabel: true,
},
xAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {
width: 1,
color: '#6A7577',
},
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 14,
color: '#BDC2C2',
},
data: ['单位工程', '子单位工程', '分部工程', '子分部工程', '分项工程', '检验批'],
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
width: 2,
color: '#2B7BD6',
},
},
splitLine: {
show: true,
lineStyle: {
color: '#24363A',
type: 'dashed',
},
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 14,
color: '#BDC2C2',
},
},
series: [
{
type: 'custom',
name: '未验收',
renderItem: function (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: '#1CFFA3',
},
{
offset: 1,
color: '#1CFFA3',
},
]),
},
},
{
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: '#1CFFA3',
},
{
offset: 1,
color: '#1CFFA3',
},
]),
},
},
{
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: '#1CFFA3',
},
{
offset: 1,
color: '#1CFFA3',
},
]),
},
},
],
};
},
data: MAX,
},
{
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: '#00FEFC',
},
{
offset: 1,
color: '#00FEFC',
},
]),
},
},
{
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: '#00FEFC',
},
{
offset: 1,
color: '#00FEFC',
},
]),
},
},
{
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: '#00FEFC',
},
{
offset: 1,
color: '#00FEFC',
},
]),
},
},
],
};
},
data: VALUE,
},
],
};
// 设置图表（假设你已定义 myChart2）
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function getElectrical() {
const MAX = [10, 80, 60];
const VALUE = [5, 60, 40];
initElectrical(MAX,VALUE);
}
function initElectrical(MAX,VALUE) {
myChart2 = echarts.init(document.getElementById("electrical"));
const offsetX = 25;
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);
const legendData = [
{
name: '未验收',
textStyle: {
color: '#fff',
},
itemStyle: {
color: '#00E6F4',
},
},
{
name: '已验收',
textStyle: {
color: '#fff',
},
itemStyle: {
color: '#1CFFA3',
},
}
];
const option = {
legend: {
selectedMode: false, // 图例点击失效
right: '2%', // 右边距离，可以根据实际情况调整
top: '15%', // 上边距离，可以根据实际情况调整
textStyle: {
color: '#cccccc',
fontSize: 14,
},
icon: 'circle', // 设置图例标记为圆点
data: legendData,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
borderColor: 'rgba(255,255,255,.3)',
backgroundColor: 'rgba(19,51,55,.6)',
textStyle: {
color: 'white', //设置文字颜色
},
borderWidth: 1,
padding: 10,
formatter: function (params) {
var str = params[0].name + '
';
params.forEach(function (item) {
var color = item.seriesName === "未验收" ? '#00FEFC' : '#1CFFA3'; // 注意你之前说颜色反了
str += ''
+ item.seriesName + '：' + item.value + '
';
});
return str;
}
},
grid: {
left: '2%',
right: '2%',
bottom: '8%',
top: '25%',
containLabel: true,
},
xAxis: {
type: 'category',
axisLine: {
show: true,
lineStyle: {
width: 1,
color: '#6A7577',
},
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 14,
color: '#BDC2C2',
},
data: ['单位工程', '分部工程', '分项工程'],
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
width: 2,
color: '#2B7BD6',
},
},
splitLine: {
show: true,
lineStyle: {
color: '#24363A',
type: 'dashed',
},
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 14,
color: '#BDC2C2',
},
},
series: [
{
type: 'custom',
name: '未验收',
renderItem: function (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: '#1CFFA3',
},
{
offset: 1,
color: '#1CFFA3',
},
]),
},
},
{
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: '#1CFFA3',
},
{
offset: 1,
color: '#1CFFA3',
},
]),
},
},
{
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: '#1CFFA3',
},
{
offset: 1,
color: '#1CFFA3',
},
]),
},
},
],
};
},
data: MAX,
},
{
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: '#00FEFC',
},
{
offset: 1,
color: '#00FEFC',
},
]),
},
},
{
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: '#00FEFC',
},
{
offset: 1,
color: '#00FEFC',
},
]),
},
},
{
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: '#00FEFC',
},
{
offset: 1,
color: '#00FEFC',
},
]),
},
},
],
};
},
data: VALUE,
},
],
};
// 设置图表（假设你已定义 myChart2）
myChart2.setOption(option, true);
window.addEventListener("resize", function () {
myChart2.resize();
});
}