844 lines
30 KiB
JavaScript
844 lines
30 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;
|
||
|
||
// 查询工程质量验收项
|
||
getSelectProQualityData()
|
||
|
||
//查询工程质量验收项-柱状图
|
||
getSelectProQualityEcharts()
|
||
});
|
||
|
||
function getSelectProQualityData() {
|
||
const url =
|
||
commonUrl +
|
||
"screen/proQuality/selectProQualityData"
|
||
ajaxRequestGet(
|
||
url,
|
||
"GET",
|
||
true,
|
||
function () {
|
||
},
|
||
function (result) {
|
||
if (result.code === 200) {
|
||
setData(result.data);
|
||
} else if (result.code === 500) {
|
||
console.error("实时监测" + result.msg);
|
||
setData(null);
|
||
} else if (result.code === 401) {
|
||
loginout(1);
|
||
}
|
||
},
|
||
function (xhr, status, error) {
|
||
errorFn(xhr, status, error);
|
||
setData(null);
|
||
},
|
||
aqEnnable
|
||
);
|
||
|
||
/* 实时检测赋值 */
|
||
function setData(data) {
|
||
if (data) {
|
||
$("#totalItem").html(data.totalItem);
|
||
$("#acceptItem").html(data.acceptItem);
|
||
$("#acceptTable").html(data.acceptTable);
|
||
$("#acceptQualifiedTable").html(data.acceptQualifiedTable);
|
||
$("#acceptRate").html(data.acceptRate+"%");
|
||
|
||
$("#acceptTbRate").html(data.acceptTbRate+"%");
|
||
$("#mainAcceptRate").html(data.mainAcceptRate+"%");
|
||
$("#commAcceptRate").html(data.commAcceptRate+"%");
|
||
}
|
||
}
|
||
}
|
||
|
||
function getSelectProQualityEcharts() {
|
||
const url =
|
||
commonUrl +
|
||
"screen/proQuality/selectProQualityEcharts"
|
||
ajaxRequestGet(
|
||
url,
|
||
"GET",
|
||
true,
|
||
function () {
|
||
},
|
||
function (result) {
|
||
if (result.code === 200) {
|
||
setData(result.data);
|
||
} else if (result.code === 500) {
|
||
console.error("实时监测" + result.msg);
|
||
setData(null);
|
||
} else if (result.code === 401) {
|
||
loginout(1);
|
||
}
|
||
},
|
||
function (xhr, status, error) {
|
||
errorFn(xhr, status, error);
|
||
setData(null);
|
||
},
|
||
aqEnnable
|
||
);
|
||
|
||
/* 实时检测赋值 */
|
||
function setData(data) {
|
||
let civilEngineering ="";
|
||
let electrical ="";
|
||
if( data){
|
||
civilEngineering = data["土建"]
|
||
electrical = data["电气"];
|
||
|
||
}
|
||
getCivilEngineering(civilEngineering);
|
||
getElectrical(electrical);
|
||
}
|
||
|
||
}
|
||
|
||
function getCivilEngineering(civilEngineering) {
|
||
let acceptItem =[];
|
||
let notAcceptItem = [];
|
||
let nameTitle = [];
|
||
if(civilEngineering){
|
||
for (let i = 0; i < civilEngineering.length; i++){
|
||
acceptItem.push(civilEngineering[i].acceptItem);
|
||
notAcceptItem.push(civilEngineering[i].notAcceptItem);
|
||
nameTitle.push(civilEngineering[i].proStructure)
|
||
}
|
||
}
|
||
initCivilEngineering(acceptItem, notAcceptItem,nameTitle);
|
||
}
|
||
|
||
function initCivilEngineering(acceptItem, notAcceptItem,nameTitle) {
|
||
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;
|
||
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: nameTitle,
|
||
},
|
||
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',
|
||
},
|
||
},
|
||
"dataZoom": [{
|
||
"show": true,
|
||
"height": 12,
|
||
"xAxisIndex": [
|
||
0
|
||
],
|
||
bottom:'8%',
|
||
"start": 10,
|
||
"end": 90,
|
||
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||
handleSize: '110%',
|
||
handleStyle:{
|
||
color:"#d3dee5",
|
||
|
||
},
|
||
textStyle:{
|
||
color:"#fff"},
|
||
borderColor:"#90979c"
|
||
}, {
|
||
"type": "inside",
|
||
"show": true,
|
||
"height": 15,
|
||
"start": 1,
|
||
"end": 35
|
||
}],
|
||
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: '#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: notAcceptItem,
|
||
},
|
||
{
|
||
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: '#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: acceptItem,
|
||
},
|
||
],
|
||
};
|
||
|
||
// 设置图表（假设你已定义 myChart2）
|
||
myChart.setOption(option, true);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
}
|
||
|
||
function getElectrical(electrical) {
|
||
let acceptItem =[];
|
||
let notAcceptItem = [];
|
||
let nameTitle = [];
|
||
if(electrical){
|
||
for (let i = 0; i < electrical.length; i++){
|
||
acceptItem.push(electrical[i].acceptItem);
|
||
notAcceptItem.push(electrical[i].notAcceptItem);
|
||
nameTitle.push(electrical[i].proStructure)
|
||
}
|
||
}
|
||
initElectrical(acceptItem, notAcceptItem,nameTitle);
|
||
}
|
||
|
||
function initElectrical(acceptItem, notAcceptItem,nameTitle) {
|
||
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;
|
||
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: nameTitle,
|
||
},
|
||
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',
|
||
},
|
||
},
|
||
"dataZoom": [{
|
||
"show": true,
|
||
"height": 12,
|
||
"xAxisIndex": [
|
||
0
|
||
],
|
||
bottom:'8%',
|
||
"start": 10,
|
||
"end": 90,
|
||
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||
handleSize: '110%',
|
||
handleStyle:{
|
||
color:"#d3dee5",
|
||
|
||
},
|
||
textStyle:{
|
||
color:"#fff"},
|
||
borderColor:"#90979c"
|
||
}, {
|
||
"type": "inside",
|
||
"show": true,
|
||
"height": 15,
|
||
"start": 1,
|
||
"end": 35
|
||
}],
|
||
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: '#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: notAcceptItem,
|
||
},
|
||
{
|
||
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: '#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: acceptItem,
|
||
},
|
||
],
|
||
};
|
||
|
||
// 设置图表（假设你已定义 myChart2）
|
||
myChart2.setOption(option, true);
|
||
window.addEventListener("resize", function () {
|
||
myChart2.resize();
|
||
});
|
||
}
|