修改移交
This commit is contained in:
@@ -30,7 +30,7 @@
|
||||
</f:Form>
|
||||
</Items>
|
||||
</f:Panel>
|
||||
<div id='two' style="width: 100%; height: 500px;"></div>
|
||||
<div id='two' style="width: 95%; height: 600px;"></div>
|
||||
<%-- <f:Panel ID="Panel4" CssClass="blockpanel" runat="server" EnableCollapse="false"
|
||||
BodyPadding="10px" ShowBorder="true" ShowHeader="false" Hidden="true">
|
||||
|
||||
@@ -60,130 +60,6 @@
|
||||
<script type="text/javascript" src="../../res/index/js/swiper-3.4.2.jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../res/index/js/echarts.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
function category_Two(id, xArr, data, num) {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById(id))
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
title: {
|
||||
// left:'center',
|
||||
text: '移交统计图表',
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 12
|
||||
},
|
||||
show: true
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
left: '15%',
|
||||
show: true,
|
||||
textStyle: {//图例文字的样式
|
||||
color: '#000',
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#000',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 20,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#000'
|
||||
},
|
||||
interval: 0,
|
||||
formatter: function (value) {
|
||||
var ret = "";//拼接加\n返回的类目项
|
||||
var maxLength = num;//每项显示文字个数
|
||||
var valLength = value.length;//X轴类目项的文字个数
|
||||
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
||||
if (rowN > 1)//如果类目项的文字大于maxLength,
|
||||
{
|
||||
for (var i = 0; i < rowN; i++) {
|
||||
var temp = "";//每次截取的字符串
|
||||
var start = i * maxLength;//开始截取的位置
|
||||
var end = start + maxLength;//结束截取的位置
|
||||
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
||||
//temp = value.substring(start, end) + "\n";
|
||||
temp = value.substring(start, end) + (i == rowN - 1 ? "" : "\n");
|
||||
ret += temp; //凭借最终的字符串
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
},
|
||||
type: 'category',
|
||||
data: xArr,
|
||||
boundaryGap: [0, 0.01],
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: data,
|
||||
grid: {
|
||||
top: '20%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
containLabel: true,
|
||||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||||
// borderColor: 'rgba(0,162,233, 1)'
|
||||
},
|
||||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
}
|
||||
option.dataZoom = [//给x轴设置滚动条
|
||||
{
|
||||
|
||||
start: 0,//默认为0
|
||||
type: 'slider',
|
||||
show: true,
|
||||
startValue: 0,
|
||||
endValue: 9,
|
||||
height: 6,
|
||||
bottom: '6%',
|
||||
zoomLock: true,
|
||||
moveOnMouseWheel: true,
|
||||
brushSelect: true,
|
||||
showDetail: false,
|
||||
borderColor: "rgba(43,48,67,0.8)",
|
||||
fillerColor: '#269cdb',//滑动块的颜色
|
||||
backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
|
||||
|
||||
}]
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
||||
|
||||
var xArr = [<%=AllSystemNo%>]
|
||||
//var xArr = two2.categories
|
||||
var data = [
|
||||
@@ -242,5 +118,107 @@
|
||||
itemStyle: { normal: { color: '#EB3324' } }
|
||||
}
|
||||
]
|
||||
category_Two('two', xArr, data, 20)
|
||||
//category_Two('two', xArr, data, 20)
|
||||
|
||||
category_SystemChart('two', xArr, data, 20);
|
||||
|
||||
function category_SystemChart(id, xArr, data, num){
|
||||
var myChart = echarts.init(document.getElementById(id))
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: xArr
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '完成数量',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [<%=completed%>],
|
||||
itemStyle: { normal: { color: '#84CF75' } }
|
||||
},
|
||||
{
|
||||
name: '进行中数量',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [<%=Inprogress%>],
|
||||
itemStyle: { normal: { color: '#3282F6' } }
|
||||
},
|
||||
{
|
||||
name: '未完成数量',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [<%=NotStart%>],
|
||||
itemStyle: { normal: { color: '#EB3324' } }
|
||||
}
|
||||
],
|
||||
};
|
||||
option.dataZoom = [{
|
||||
type: "inside",
|
||||
startValue: 0,
|
||||
endValue: 10,
|
||||
minValueSpan: 10,
|
||||
maxValueSpan: 10,
|
||||
yAxisIndex: [0],
|
||||
zoomOnMouseWheel: false, // 关闭滚轮缩放
|
||||
moveOnMouseWheel: true, // 开启滚轮平移
|
||||
moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
realtime: true,
|
||||
startValue: 0,
|
||||
endValue: 10000,
|
||||
width: '8',
|
||||
yAxisIndex: [0], // 控制y轴滚动
|
||||
fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
|
||||
borderColor: "rgba(17, 100, 210, 0.12)",
|
||||
backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色
|
||||
handleSize: 0, // 两边手柄尺寸
|
||||
showDataShadow: false,//是否显示数据阴影 默认auto
|
||||
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
||||
top: 'middle',
|
||||
// 滚动条显示位置
|
||||
height: "80%",
|
||||
// 距离右边
|
||||
right: 3,
|
||||
}]
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user