2024-03-27 20:57:39 +08:00
|
|
|
|
let layer,table;
|
|
|
|
|
|
let myChart = echarts.init(document.getElementById('tendency'));
|
|
|
|
|
|
layui.use(['layer','table'], function () {
|
|
|
|
|
|
layer = layui.layer;
|
|
|
|
|
|
table = layui.table;
|
|
|
|
|
|
init();
|
|
|
|
|
|
inits();
|
|
|
|
|
|
initEchartsOne();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function init(){
|
|
|
|
|
|
var data = [
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'}
|
|
|
|
|
|
];
|
|
|
|
|
|
table.render({
|
|
|
|
|
|
elem: '#demo1',
|
|
|
|
|
|
data: data,
|
|
|
|
|
|
skin: 'line',
|
|
|
|
|
|
page: true,
|
|
|
|
|
|
cols: [[
|
|
|
|
|
|
{field: 'id', title: '排名',align:'center'},
|
|
|
|
|
|
{field: 'proName', title: '工程名称',align:'center'},
|
|
|
|
|
|
{field: 'teamName', title: '班组名称',align:'center'},
|
|
|
|
|
|
{field: 'teamLeader', title: '班组长',align:'center'},
|
|
|
|
|
|
{field: 'quality', title: '施工质量',align:'center'},
|
|
|
|
|
|
]]
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function inits(){
|
|
|
|
|
|
var data = [
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 1, proName: '张三', teamName: '666', teamLeader: '男', quality: 1, content: '芜湖'},
|
|
|
|
|
|
{id: 2, proName: '李四', teamName: '666', teamLeader: '女', quality: 1, content: '起飞'}
|
|
|
|
|
|
];
|
|
|
|
|
|
table.render({
|
|
|
|
|
|
elem: '#demo2',
|
|
|
|
|
|
data: data,
|
|
|
|
|
|
skin: 'line',
|
|
|
|
|
|
page: true,
|
|
|
|
|
|
cols: [[
|
|
|
|
|
|
{field: 'id', title: '排名',align:'center'},
|
|
|
|
|
|
{field: 'proName', title: '工程名称',align:'center'},
|
|
|
|
|
|
{field: 'teamName', title: '班组名称',align:'center'},
|
|
|
|
|
|
{field: 'teamLeader', title: '班组长',align:'center'},
|
|
|
|
|
|
{field: 'quality', title: '施工质量',align:'center'},
|
|
|
|
|
|
]]
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 变化趋势 */
|
|
|
|
|
|
function initEchartsOne() {
|
|
|
|
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|
|
|
|
|
let xLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
|
|
|
|
|
let dataValue = [20, 30, 40, 35, 34, 15, 56, 15, 12, 25, 34, 42];
|
|
|
|
|
|
const tooltip = {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow'
|
|
|
|
|
|
},
|
|
|
|
|
|
backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: fontColor,
|
|
|
|
|
|
fontFamily: fontFamily
|
|
|
|
|
|
},
|
|
|
|
|
|
borderColor: "rgba(255,255,255, .5)",
|
|
|
|
|
|
};
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
|
tooltip,
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
top: '25%',
|
|
|
|
|
|
left: '5%',
|
|
|
|
|
|
right: '5%',
|
|
|
|
|
|
bottom: '15%',
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
boundaryGap: true,
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#5A6E71',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: fontColor,
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
fontFamily: fontFamily
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#233653',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
data: xLabel,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
color: fontColor,
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
padding: [0, 60, 0, 0],
|
|
|
|
|
|
fontFamily: fontFamily
|
|
|
|
|
|
},
|
|
|
|
|
|
// minInterval: 1,
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#25393B',
|
|
|
|
|
|
type: 'dashed'
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#008de7',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: fontColor,
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
fontFamily: fontFamily
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '周计划数',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
width: 3,
|
|
|
|
|
|
// color: '#1ED6FF', // 线条颜色
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
1,
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: '#0DF0FD',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0.6,
|
|
|
|
|
|
color: '#00F1D4',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: '#0EEEFC',
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
false
|
|
|
|
|
|
),
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: '#1ED6FF',//拐点颜色
|
|
|
|
|
|
// borderColor: '#fff600',//拐点边框颜色
|
|
|
|
|
|
// borderWidth: 13//拐点边框大小
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true, //开启显示
|
|
|
|
|
|
color: fontColor,
|
|
|
|
|
|
fontFamily: fontFamily,
|
|
|
|
|
|
position: 'top', //在上方显示
|
|
|
|
|
|
formatter: function (res) {
|
|
|
|
|
|
if (res.value) {
|
|
|
|
|
|
return res.value
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return 0
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
symbolSize: 8, //设定实心点的大小
|
|
|
|
|
|
areaStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
0,
|
|
|
|
|
|
1,
|
|
|
|
|
|
[
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: '#01DDE9',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0.6,
|
|
|
|
|
|
color: '#086A79',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: '#0D3134',
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
false
|
|
|
|
|
|
),
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: dataValue,
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
myChart.setOption(option, true);
|
|
|
|
|
|
window.addEventListener("resize", function () {
|
|
|
|
|
|
myChart.resize();
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
