Skip to content

K
kanban-nanjing-11
Commit 226d941d authored by Allencl's avatar Allencl
Browse files
Options

1

parent cc5f8fa2
Show whitespace changes
Inline Side-by-side
Showing with 318 additions and 4 deletions
css/page2.css
View file @ 226d941d
......@@ -794,3 +794,9 @@
margin-top: 0px;
padding-bottom: 8px;
}
.echarts-div{
width: 100%;
height: 360px;
}
\ No newline at end of file
js/page2.js
View file @ 226d941d
// 开动率
function EchartsB3(){
var myChart = echarts.init(document.getElementById('echart_b3'));
var data1=['1月','2月','3月','4月','5月','6月','7月']; // x轴
var data2=[100,100,100,100,100,100,100]; // 柱状图数据
var data4=[100,100,100,100,100,100,100]; // 折线
var option = {
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'cross',
// crossStyle: {
// color: '#999'
// }
// }
// },
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
// legend: {
// data: ['Evaporation', 'Precipitation', 'Temperature']
// },
grid: {
left: 0,
right: 20,
top: 0,
bottom: 30,
containLabel: true
},
xAxis: [
{
type: 'category',
data: data1,
show: false, // 隐藏x轴
axisLabel: {
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize : 16 //更改坐标轴文字大小
},
},
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
// name: 'Precipitation',
min: 0,
max: 100,
interval: 20,
show: false, // 隐藏x轴
// axisLine:{
// lineStyle:{
// color:'#0087ED',
// width:1,//这里是为了突出显示加上的
// }
// },
splitLine: {
show: true,
lineStyle: {
type: 'line',
color: 'rgba(255, 255, 255,0.4)'
}
},
// splitLine: {
// show: false,
// lineStyle: {
// type: 'dotted',
// color: 'rgba(255, 255, 255,0.3)'
// }
// },
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize : 16 //更改坐标轴文字大小
},
}
},
],
series: [
{
name: 'Evaporation',
type: 'bar',
itemStyle: {
// 修改柱子颜色
color: '#72ccff',
width:"100"
},
// tooltip: {
// valueFormatter: function (value) {
// return value + ' ml';
// }
// },
label:{ show: true, position: "top", distance: -35, fontSize: 22, color: '#fff', lineHeight: 22, fontFamily: 'DIN-Medium',
formatter: function(value){
return value.data +'%'
},
},
data: data2,
},
{
name: 'Evaporation2',
type: 'bar',
itemStyle: {
// 修改柱子颜色
color: '#fac858',
width:"100"
},
// tooltip: {
// valueFormatter: function (value) {
// return value + ' ml';
// }
// },
label:{ show: true, position: "top", distance: -35, fontSize: 22, color: '#fff', lineHeight: 22, fontFamily: 'DIN-Medium',
formatter: function(value){
return value.data +'%'
},
},
data: data4,
},
]
};
myChart.setOption(option, true);
}
// 小时产量
function EchartsB5(){
var myChart = echarts.init(document.getElementById('echart_b5'));
var data1=['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00']; // x轴
var data2=[15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15]; // 柱状图数据
var data4=[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10]; // 折线
var option = {
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'cross',
// crossStyle: {
// color: '#999'
// }
// }
// },
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
// legend: {
// data: ['Evaporation', 'Precipitation', 'Temperature']
// },
grid: {
left: 30,
right: 30,
top: 50,
bottom: 48,
containLabel: true
},
xAxis: [
{
type: 'category',
data: data1,
// show: false, // 隐藏x轴
axisLabel: {
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize : 28 //更改坐标轴文字大小
},
},
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
// name: 'Precipitation',
min: 0,
// max: 100,
// interval: 20,
// show: false, // 隐藏x轴
// axisLine:{
// lineStyle:{
// color:'#0087ED',
// width:1,//这里是为了突出显示加上的
// }
// },
splitLine: {
show: true,
lineStyle: {
type: 'line',
color: 'rgba(255, 255, 255,0.4)'
}
},
// splitLine: {
// show: false,
// lineStyle: {
// type: 'dotted',
// color: 'rgba(255, 255, 255,0.3)'
// }
// },
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#fff', //更改坐标轴文字颜色
fontSize : 28 //更改坐标轴文字大小
},
}
},
],
series: [
{
name: 'Evaporation',
type: 'bar',
itemStyle: {
// 修改柱子颜色
color: '#72ccff',
width:"100"
},
// tooltip: {
// valueFormatter: function (value) {
// return value + ' ml';
// }
// },
label:{ show: true, position: "top", distance: -35, fontSize: 22, color: '#fff', lineHeight: 22, fontFamily: 'DIN-Medium',
// formatter: function(value){
// return value.data +'%'
// },
},
data: data2,
},
{
name: 'Evaporation2',
type: 'bar',
itemStyle: {
// 修改柱子颜色
color: '#91cc75',
width:"100"
},
// tooltip: {
// valueFormatter: function (value) {
// return value + ' ml';
// }
// },
label:{ show: true, position: "top", distance: -35, fontSize: 22, color: '#fff', lineHeight: 22, fontFamily: 'DIN-Medium',
// formatter: function(value){
// return value.data +'%'
// },
},
data: data4,
},
]
};
myChart.setOption(option, true);
}
\ No newline at end of file
page2.html
View file @ 226d941d
......@@ -178,6 +178,18 @@
<span class="box-tittle-text">开动率</span>
</div>
<div class="ibox_m">
<ul class="echarts-mark-box" style="top: 30px;">
<li>
<label style="background: #72ccff;"></label>
<span>班次一</span>
</li>
<li>
<label style="background: #fac858;"></label>
<span>班次二</span>
</li>
</ul>
<div id="echart_b3" class="echarts-div"></div>
</div>
</div>
<div class="main_t ul-index2">
......@@ -269,6 +281,17 @@
<span class="box-tittle-text">小时产量</span>
</div>
<div class="ibox_m">
<ul class="echarts-mark-box" style="top: 30px;">
<li>
<label style="background: #72ccff;"></label>
<span>计划产量</span>
</li>
<li>
<label style="background: #91cc75;"></label>
<span>实际产量</span>
</li>
</ul>
<div id="echart_b5" class="echarts-div"></div>
</div>
</div>
</div>
......@@ -285,11 +308,11 @@
<script>
$(document).ready(function() {
// 开动率
EchartsB3()
// 小时产量
EchartsB5()
});
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment