shujukanbancolorsChange
This commit is contained in:
parent
dfc84e220b
commit
2249f5fc3e
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<el-container class="container">
|
||||
<el-header class="pageHeader"><span class="top-line top-line-left"></span>光子科技<span class="top-line top-line-right"></span></el-header>
|
||||
<el-main style="padding:0">
|
||||
<el-header class="pageHeader">
|
||||
<span class="top-line top-line-left"></span>
|
||||
光子科技
|
||||
<span class="top-line top-line-right"></span>
|
||||
</el-header>
|
||||
<el-main style="padding:0" id="mainBlock">
|
||||
<el-row style="height:100%">
|
||||
<el-col :span="6">
|
||||
<div style="display:flex;flex-direction: column;height:100%;padding:20px">
|
||||
|
|
@ -19,7 +23,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">12</el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="6">
|
||||
<div style="display:flex;flex-direction: column;height:100%;padding:20px">
|
||||
<div class="flexItem" style="flex:1">
|
||||
|
|
@ -32,7 +36,7 @@
|
|||
</div>
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle"><div class="blockTitleIcon"></div>模块六</div>
|
||||
<dv-scroll-board id="scrollTable" :config="taskBoard" style="width:100%;height:92%"/>
|
||||
<dv-scroll-board id="scrollTable" :config="taskBoard" :style="{'width':'100%','height':blockHeight}"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -45,7 +49,9 @@ import * as echarts from 'echarts';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
blockHeight:null,
|
||||
taskBoard: {
|
||||
headerBGC:'#0a3f44',
|
||||
header: ['列1', '列2', '列3'],
|
||||
data: [
|
||||
['行1列1', '行1列2', '行1列3'],
|
||||
|
|
@ -66,10 +72,14 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
let height = document.getElementById('mainBlock').clientHeight;
|
||||
let height0 = height/3-50;
|
||||
this.blockHeight = height0+'px'
|
||||
//左1
|
||||
let chartDom = document.getElementById('line1');
|
||||
chartDom.style.height = height0+'px';
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option = {
|
||||
color: ['#FF0087', '#FFBF00'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
|
|
@ -83,14 +93,40 @@ export default {
|
|||
icon: "stack",
|
||||
right:0,
|
||||
data: [{
|
||||
backgroundColor:'rgb(1,235,239)',
|
||||
name:'Line 1',
|
||||
itemStyle:{
|
||||
// color:'rgb(1,235,239)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(1,235,239)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(5, 158, 163)'
|
||||
}])
|
||||
},
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
}, {
|
||||
name:'Line 2',textStyle:{
|
||||
name:'Line 2',
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
}}],
|
||||
itemStyle:{
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(250,205,0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(254,129,0)'
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
|
|
@ -126,6 +162,9 @@ export default {
|
|||
axisLabel: {
|
||||
color:'#ffffff'
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
|
@ -143,19 +182,20 @@ export default {
|
|||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
width: 1,color:'rgb(1,235,239)'
|
||||
},
|
||||
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
color: 'rgba(1,235,239)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
color: 'rgb(5, 158, 163)'
|
||||
}
|
||||
])
|
||||
},
|
||||
|
|
@ -170,7 +210,7 @@ export default {
|
|||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
width: 1,color:'rgb(250,205,0)'
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
|
|
@ -178,11 +218,11 @@ export default {
|
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
color: 'rgb(254,129,0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
color: 'rgb(250,205,0)'
|
||||
}
|
||||
])
|
||||
},
|
||||
|
|
@ -194,8 +234,9 @@ export default {
|
|||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
|
||||
//左边2
|
||||
let bar1 = document.getElementById('bar1');
|
||||
bar1.style.height = height0+'px';
|
||||
let bar1Chart = echarts.init(bar1);
|
||||
let bar1option = {
|
||||
tooltip: {
|
||||
|
|
@ -208,13 +249,40 @@ export default {
|
|||
right:0,
|
||||
data:[
|
||||
{
|
||||
name:'棒',textStyle:{
|
||||
name:'棒',
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
itemStyle:{
|
||||
// color:'rgb(1,235,239)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(1,235,239)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(5, 158, 163)'
|
||||
}])
|
||||
},
|
||||
}, {
|
||||
name:'管',textStyle:{
|
||||
name:'管',
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
}}
|
||||
},
|
||||
itemStyle:{
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(250,205,0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(254,129,0)'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
|
|
@ -263,7 +331,19 @@ export default {
|
|||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
barWidth:20,
|
||||
itemStyle:{
|
||||
// color:'rgb(1,235,239)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(1,235,239)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(5, 158, 163)'
|
||||
}])
|
||||
},
|
||||
barWidth:15,
|
||||
data: [120, 132, 101, 134, 90, 230]
|
||||
},
|
||||
{
|
||||
|
|
@ -274,20 +354,48 @@ export default {
|
|||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
itemStyle:{
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(250,205,0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(254,129,0)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330]
|
||||
}
|
||||
]
|
||||
};
|
||||
bar1Chart.setOption(bar1option);
|
||||
|
||||
//左3
|
||||
let line2Dom = document.getElementById('line2');
|
||||
line2Dom.style.height = height0+'px';
|
||||
let line2Chart = echarts.init(line2Dom);
|
||||
let line2option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['温度'],
|
||||
color: ['rgb(250,205,0)'],
|
||||
data: [{
|
||||
name:'温度',
|
||||
itemStyle:{
|
||||
// color:'rgb(1,235,239)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'orange'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'yellow'
|
||||
}])
|
||||
},
|
||||
}],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
|
|
@ -303,7 +411,7 @@ export default {
|
|||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1', '2', '3', '4', '5', '6'],
|
||||
data: ['1', '2', '3', '4', '5', '6','7','8','9','10'],
|
||||
nameTextStyle: {
|
||||
color:'#ffffff'
|
||||
},
|
||||
|
|
@ -332,13 +440,27 @@ export default {
|
|||
},
|
||||
|
||||
series: {
|
||||
name: 'Email',
|
||||
name: '温度',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbolSize:8, //设置折线上圆点大小
|
||||
symbol:'circle',
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'orange'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'yellow'
|
||||
}])
|
||||
}
|
||||
},
|
||||
smooth: 0.5, // 设置折线弧度
|
||||
data: [10, 10, 0, 0, -2, -2, 0],
|
||||
data: [10, 10, 0, 0, -10, -8, 0,10, 10, 0, 0, -10, -8, 0],
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
|
@ -347,9 +469,9 @@ export default {
|
|||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#FF0000' // 0% 处的颜色
|
||||
offset: 0, color: 'orange' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#ffa500' // 100% 处的颜色
|
||||
offset: 1, color: 'yellow' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
|
|
@ -357,8 +479,9 @@ export default {
|
|||
}
|
||||
};
|
||||
line2Chart.setOption(line2option);
|
||||
|
||||
//柱状图折线
|
||||
let line3Dom = document.getElementById('line3');
|
||||
line3Dom.style.height = height0+'px';
|
||||
let line3Chart = echarts.init(line3Dom);
|
||||
let line3option = {
|
||||
tooltip: {
|
||||
|
|
@ -451,12 +574,26 @@ export default {
|
|||
return value;
|
||||
}
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230]
|
||||
barWidth:15,
|
||||
data: [120, 132, 101, 134, 90, 230],
|
||||
itemStyle:{
|
||||
borderRadius: [5, 5, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(13,176,176)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(246,163,58)'
|
||||
}])
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '合格率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
// 255,120,0
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value ;
|
||||
|
|
@ -467,10 +604,12 @@ export default {
|
|||
]
|
||||
};
|
||||
line3Chart.setOption(line3option);
|
||||
|
||||
//饼状图
|
||||
let pieDom = document.getElementById('pie');
|
||||
pieDom.style.height = height0+'px';
|
||||
let pieChart = echarts.init(pieDom);
|
||||
let pieoption = {
|
||||
color:['rgb(155,248,249)','rgb(248,189,118)','rgb(110,181,249)'],
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
textStyle:{
|
||||
|
|
@ -496,7 +635,7 @@ export default {
|
|||
{
|
||||
name: '完成率',
|
||||
type: 'pie',
|
||||
radius: [40, 90],
|
||||
radius: [20, 60],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
|
|
@ -504,8 +643,8 @@ export default {
|
|||
},
|
||||
data: [
|
||||
{ value: 40, name: '棒' },
|
||||
{ value: 38, name: '管' },
|
||||
{ value: 32, name: 'AVG' },
|
||||
{ value: 20, name: '管' },
|
||||
{ value: 10, name: 'AVG' },
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -578,10 +717,10 @@ export default {
|
|||
.row-item{
|
||||
height:40px!important;
|
||||
line-height:40px!important;
|
||||
background-color:rgb(10,63,68)!important;
|
||||
/* background-color:rgb(10,63,68)!important; */
|
||||
}
|
||||
#scrollTable>.hader{
|
||||
background:rgb(10,63,68)!important;
|
||||
background-color:rgb(10,63,68)!important;
|
||||
background-color:#0a3f44!important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue