696 lines
26 KiB
JavaScript
696 lines
26 KiB
JavaScript
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 + '<br/>';
|
||
params.forEach(function (item) {
|
||
var color = item.seriesName === "未验收" ? '#00FEFC' : '#1CFFA3'; // 注意你之前说颜色反了
|
||
str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'
|
||
+ color + ';"></span>'
|
||
+ item.seriesName + '：' + item.value + '<br/>';
|
||
});
|
||
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 + '<br/>';
|
||
params.forEach(function (item) {
|
||
var color = item.seriesName === "未验收" ? '#00FEFC' : '#1CFFA3'; // 注意你之前说颜色反了
|
||
str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'
|
||
+ color + ';"></span>'
|
||
+ item.seriesName + '：' + item.value + '<br/>';
|
||
});
|
||
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();
|
||
});
|
||
}
|