提交代码
This commit is contained in:
@@ -95,6 +95,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-wrap">
|
||||
<div class="top">
|
||||
<div class="item">
|
||||
<div class="bw-b-bottom ptop6">
|
||||
<div class="bw-b-bottom-up">
|
||||
<div class="bw-item-content">
|
||||
<div id='three' style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -204,7 +217,7 @@
|
||||
var oneNameData = [];
|
||||
var oneArr = JSON.parse(oneArrStr);
|
||||
var oneData = JSON.parse(oneDataStr);
|
||||
$.each(oneData, function (inxex, item) {
|
||||
$.each(oneData, function (index, item) {
|
||||
var obj = { name: item };
|
||||
oneNameData.push(obj);
|
||||
});
|
||||
@@ -224,15 +237,6 @@
|
||||
tooltip: {
|
||||
formatter: '{a}:{c}%'//a 是series中每条数据name值，c 是data数值
|
||||
},
|
||||
//legend: {
|
||||
// orient: 'vertical', // 'horizontal'
|
||||
// data: oneData,
|
||||
// textStyle: { // 图列内容样式
|
||||
// color: '#fff', // 字体颜色
|
||||
// },
|
||||
// x: '70%',//图例位置，设置right发现图例和文字位置反了，设置一个数值就好了
|
||||
// y: 'center'//延Y轴居中
|
||||
//},
|
||||
grid: {
|
||||
left: '3%',
|
||||
//right: '30%',
|
||||
@@ -253,7 +257,9 @@
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: -90,
|
||||
formatter: function (value) {
|
||||
return value.split("").join("\n");
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
@@ -271,16 +277,6 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
//dataZoom: [
|
||||
// {
|
||||
// type: "slider",//slider表示有滑动块的，
|
||||
// show: true,
|
||||
//// xAxisIndex: [0],//表示x轴折叠
|
||||
// start: 1,//数据窗口范围的起始百分比,表示1%
|
||||
// end: 70,//数据窗口范围的结束百分比,表示35%坐标
|
||||
// bottom: "0",
|
||||
// },
|
||||
//],
|
||||
series: [{
|
||||
name: '进度率',
|
||||
type: 'bar',
|
||||
@@ -288,9 +284,11 @@
|
||||
data: oneArr,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
interval: 0,
|
||||
rotate: -90,
|
||||
position: 'top',
|
||||
color: "#00D8FE",
|
||||
fontWeight: "bold",
|
||||
//interval: 0,
|
||||
//rotate: -90,
|
||||
formatter: function (params) {
|
||||
if (params.value > 0) {
|
||||
return params.value + '%';
|
||||
@@ -308,35 +306,10 @@
|
||||
}
|
||||
}
|
||||
}]
|
||||
//series: oneNameData
|
||||
};
|
||||
//for (var i = 0; i < option.series.length; i++) {
|
||||
// var style = { //定义柱状图的样式
|
||||
// type: 'bar',
|
||||
// barWidth: 20,
|
||||
// normal: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'inside', //柱子下显示 数值
|
||||
// interval: 0,
|
||||
// rotate: -90,
|
||||
// formatter: function (params) {
|
||||
// if (params.value > 0) {
|
||||
// return params.value + '%';
|
||||
// } else {
|
||||
// return ' ';
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
// option.series[i].type = 'bar'; //每条数据指定类型为'bar'
|
||||
// option.series[i].itemStyle = style; // series中每条数据都加的样式
|
||||
// option.series[i].data = [bar_data[i]]; //series 中 data赋值
|
||||
//};
|
||||
chart.setOption(option);
|
||||
|
||||
|
||||
//图2
|
||||
var twoDataStr = '<%=twoDataStr%>';
|
||||
var towData = JSON.parse(twoDataStr);
|
||||
var data = towData.map((item, index) => item.Rate);
|
||||
@@ -397,11 +370,12 @@
|
||||
fontSize: 12,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderRadius: [10, 10, 10, 10],
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||||
{ offset: 0, color: '#395CFE' },
|
||||
{ offset: 1, color: '#2EC7CF' },
|
||||
]),
|
||||
barBorderRadius: [10, 10, 10, 10]
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -428,12 +402,406 @@
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
color: 'rgba(3,169,244, 0.5)',
|
||||
barBorderRadius: [10, 10, 10, 10]
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
chart1.setOption(option);
|
||||
|
||||
//图3
|
||||
var fourDecisionStr = '<%=fourDecisionStr%>';
|
||||
var threeData = JSON.parse(fourDecisionStr);
|
||||
var threewidth = Math.floor(100 / threeData.length);
|
||||
$.each(threeData, function (index, item) {
|
||||
$("#three").append("<div id='three" + index + "' style='width:" + threewidth + "%; height:100%; display:inline-block'></div>");
|
||||
});
|
||||
|
||||
$(function () {
|
||||
$.each(threeData, function (index, item) {
|
||||
var chart = echarts.init(document.getElementById('three' + index));
|
||||
var value = item.Rate;
|
||||
option = {
|
||||
backgroundColor: '000',
|
||||
title: {
|
||||
text: `${value}%`,
|
||||
subtext: '三查四定' + item.Name + '类',
|
||||
left: 'center',
|
||||
top: '45%', //top待调整
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20,
|
||||
fontFamily: 'DINAlternate-Bold',
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#ff',
|
||||
fontSize: 14,
|
||||
fontFamily: 'PingFangSC-Regular',
|
||||
top: 'center'
|
||||
},
|
||||
itemGap: 16 //主副标题间距
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 内圆
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['0', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
z: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#1a68c0'
|
||||
},
|
||||
{
|
||||
offset: 0.44,
|
||||
color: '#1a68c0'
|
||||
},
|
||||
{
|
||||
offset: 0.73,
|
||||
color: '#194c88'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#162c46'
|
||||
}
|
||||
]),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: "center",
|
||||
|
||||
}
|
||||
},
|
||||
data: [100],
|
||||
},
|
||||
// 进度圈
|
||||
{
|
||||
type: 'pie',
|
||||
clockWise: true,
|
||||
radius: ["60%", "55%"],
|
||||
data: [{
|
||||
value: value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 2,
|
||||
borderColor: {
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#1d87ff' || '#00cefc' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#1d87ff' || '#367bec' // 100% 处的颜色
|
||||
}]
|
||||
},
|
||||
color: { // 完成的圆环的颜色
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#1d87ff' || '#00cefc' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#1d87ff' || '#367bec' // 100% 处的颜色
|
||||
}]
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
value: 100 - value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
borderColor: 'rgba(0, 0, 0, 0)',
|
||||
borderWidth: 0,
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
//刻度尺
|
||||
{
|
||||
// name: "白色圈刻度",
|
||||
type: "gauge",
|
||||
radius: "77%",
|
||||
startAngle: 225, //刻度起始
|
||||
endAngle: -134.8, //刻度结束
|
||||
z: 4,
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#354e6c'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
length: 16, //刻度节点线长度
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#354e6c'
|
||||
} //刻度节点线
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255,255,255,0)',
|
||||
fontSize: 12,
|
||||
}, //刻度节点文字颜色
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [{
|
||||
value: 0,
|
||||
name: ""
|
||||
}]
|
||||
},
|
||||
]
|
||||
};
|
||||
chart.setOption(option);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
//data = [
|
||||
// {
|
||||
// name: 'A类',
|
||||
// value: 20,
|
||||
// },
|
||||
// {
|
||||
// name: 'B类',
|
||||
// value: 30,
|
||||
// },
|
||||
// {
|
||||
// name: 'C类',
|
||||
// value: 50,
|
||||
// },
|
||||
//];
|
||||
//arrName = getArrayValue(data, 'name');
|
||||
//arrValue = getArrayValue(data, 'value');
|
||||
//sumValue = eval(arrValue.join('+'));
|
||||
//objData = array2obj(data, 'name');
|
||||
//optionData = getData(data);
|
||||
|
||||
//function getArrayValue(array, key) {
|
||||
// var key = key || 'value';
|
||||
// var res = [];
|
||||
// if (array) {
|
||||
// array.forEach(function (t) {
|
||||
// res.push(t[key]);
|
||||
// });
|
||||
// }
|
||||
// return res;
|
||||
//}
|
||||
//function array2obj(array, key) {
|
||||
// var resObj = {};
|
||||
// for (var i = 0; i < array.length; i++) {
|
||||
// resObj[array[i][key]] = array[i];
|
||||
// }
|
||||
// return resObj;
|
||||
//}
|
||||
//function getData(data) {
|
||||
// var res = {
|
||||
// series: [],
|
||||
// yAxis: [],
|
||||
// };
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// res.series.push({
|
||||
// name: '',
|
||||
// type: 'pie',
|
||||
// clockWise: false, //顺时加载
|
||||
// hoverAnimation: false, //鼠标移入变大
|
||||
// radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
|
||||
// center: ['40%', '55%'],
|
||||
// label: {
|
||||
// show: false,
|
||||
// },
|
||||
// itemStyle: {
|
||||
// label: {
|
||||
// show: false,
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: false,
|
||||
// },
|
||||
// borderWidth: 5,
|
||||
// },
|
||||
// data: [
|
||||
// {
|
||||
// value: data[i].value,
|
||||
// name: data[i].name,
|
||||
// },
|
||||
// {
|
||||
// value: sumValue - data[i].value,
|
||||
// name: '',
|
||||
// itemStyle: {
|
||||
// color: 'rgba(0,0,0,0)',
|
||||
// borderWidth: 0,
|
||||
// },
|
||||
// tooltip: {
|
||||
// show: false,
|
||||
// },
|
||||
// hoverAnimation: false,
|
||||
// },
|
||||
// ],
|
||||
// });
|
||||
// res.series.push({
|
||||
// name: '',
|
||||
// type: 'pie',
|
||||
// silent: true,
|
||||
// z: 1,
|
||||
// clockWise: false, //顺时加载
|
||||
// hoverAnimation: false, //鼠标移入变大
|
||||
// radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
|
||||
// center: ['40%', '55%'],
|
||||
// label: {
|
||||
// show: false,
|
||||
// },
|
||||
// itemStyle: {
|
||||
// label: {
|
||||
// show: false,
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: false,
|
||||
// },
|
||||
// borderWidth: 5,
|
||||
// },
|
||||
// data: [
|
||||
// {
|
||||
// value: 7.5,
|
||||
// itemStyle: {
|
||||
// color: '#add2d2', //圆环背景色-全
|
||||
// borderWidth: 0,
|
||||
// },
|
||||
// tooltip: {
|
||||
// show: false,
|
||||
// },
|
||||
// hoverAnimation: false,
|
||||
// },
|
||||
// {
|
||||
// value: 2.5,
|
||||
// name: '',
|
||||
// itemStyle: {
|
||||
// color: 'rgba(0,0,0,0)',
|
||||
// borderWidth: 0,
|
||||
// },
|
||||
// tooltip: {
|
||||
// show: false,
|
||||
// },
|
||||
// hoverAnimation: false,
|
||||
// },
|
||||
// ],
|
||||
// });
|
||||
// res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + '%');
|
||||
// }
|
||||
// return res;
|
||||
//}
|
||||
//option = {
|
||||
// //backgroundColor: '#ddd',
|
||||
// legend: {
|
||||
// show: true,
|
||||
// icon: 'circle',
|
||||
// top: 'center',
|
||||
// top: '16%',
|
||||
// bottom: '53%',
|
||||
// left: '40%',
|
||||
// data: arrName,
|
||||
// width: 40,
|
||||
// padding: [0, 16],
|
||||
// itemGap: 25,
|
||||
// //图例显示
|
||||
// formatter: function (name) {
|
||||
// return '{title|' + name + '}{value|' + ((objData[name].value / sumValue) * 100).toFixed(2) + '} {title|%}';
|
||||
// },
|
||||
|
||||
// textStyle: {
|
||||
// rich: {
|
||||
// title: {
|
||||
// fontSize: 20,
|
||||
// lineHeight: 30,
|
||||
// color: '#fff',
|
||||
// },
|
||||
// value: {
|
||||
// fontSize: 18,
|
||||
// lineHeight: 20,
|
||||
// color: '#fff',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: '', //图形标题，配置在中间对应效果图的80%
|
||||
// left: '20%',
|
||||
// top: '50%',
|
||||
// textStyle: {
|
||||
// color: 'rgb(50,197,233)',
|
||||
// fontSize: 16,
|
||||
// align: 'left',
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// trigger: 'item',
|
||||
// formatter: '{a}<br>{b}:{c}({d}%)',
|
||||
// },
|
||||
// color: ['yellow', 'blue', 'green'],
|
||||
// xAxis: [
|
||||
// {
|
||||
// show: false,
|
||||
// },
|
||||
// ],
|
||||
// series: optionData.series,
|
||||
//};
|
||||
//chart2.setOption(option);
|
||||
|
||||
</script>
|
||||
|
||||
<%--<script type="text/javascript">
|
||||
|
||||
Reference in New Issue
Block a user