williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改up

Browse Source
This commit is contained in:
熊丽君
2021-12-09 10:15:29 +08:00
parent 0905e4f5bd
commit cb3aedd130
3 changed files with 147 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/bigScreen/drivingCabin/center.vue
View File

@ -5,30 +5,30 @@
<rocketTit class="tit">全年目标</rocketTit> <rocketTit class="tit">全年目标</rocketTit>
<div class="data"> <div class="data">
<div class="data-item"> <div class="data-item">
<div><img src="./icon1.png" alt="" /><span>收入</span></div> <div><img src="./icon1.png" alt="" /><span style="font-weight: bold">收入</span></div>
<div class="box"><i>3380/</i><i class="num">12342</i><span class="num2">万</span></div> <div class="box"><i>3380/</i><i class="num">12342</i><span class="num2">万</span></div>
<div style="padding: 0 15px"> <div>
<progressBar :percentage="70" /> <progressBar :percentage="70" />
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><img src="./icon2.png" alt="" /><span>利润</span></div> <div><img src="./icon2.png" alt="" /><span style="font-weight: bold">利润</span></div>
<div class="box"><i>380/</i><i class="num">12342</i><span class="num2">万</span></div> <div class="box"><i>380/</i><i class="num">12342</i><span class="num2">万</span></div>
<div style="padding: 0 15px"> <div>
<progressBar :percentage="70" /> <progressBar :percentage="70" />
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><img src="./icon3.png" alt="" /><span>装药量</span></div> <div><img src="./icon3.png" alt="" /><span style="font-weight: bold">装药量</span></div>
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div> <div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
<div style="padding: 0 15px"> <div>
<progressBar :percentage="70" /> <progressBar :percentage="70" />
</div> </div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><img src="./icon4.png" alt="" /><span>交付数量</span></div> <div><img src="./icon4.png" alt="" /><span style="font-weight: bold">交付数量</span></div>
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div> <div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
<div style="padding: 0 15px"> <div>
<progressBar :percentage="70" /> <progressBar :percentage="70" />
</div> </div>
</div> </div>
@ -74,12 +74,17 @@ export default {
} }
.data { .data {
display: flex; display: flex;
margin: 0 15px; justify-content: space-evenly;
margin: 0 30px;
background: rgba(2, 18, 63, 0.33); background: rgba(2, 18, 63, 0.33);
color: #ffffff; color: #ffffff;
font-size: 18px; font-size: 18px;
.data-item { .data-item {
flex: 1; // flex: 1;
width: 20%;
display: flex;
flex-direction: column;
align-items: flex-start;
> div { > div {
margin: 5px 0; margin: 5px 0;
text-align: center; text-align: center;

107
src/views/bigScreen/drivingCabin/left1.vue
View File

@ -49,7 +49,16 @@ export default {
}, },
data() { data() {
return { return {
index: 0, data: [
{ value: 154, name: '类别一' },
{ value: 775, name: '类别二' },
{ value: 679, name: '类别三' },
{ value: 679, name: '类别四' },
{ value: 679, name: '类别五' },
{ value: 679, name: '类别六' },
{ value: 679, name: '类别七' },
{ value: 679, name: '类别八' },
],
} }
}, },
mounted() { mounted() {
@ -65,6 +74,10 @@ export default {
this.setOptions() this.setOptions()
}, },
setOptions() { setOptions() {
const calcAverageValue = (data, name) => {
const items = data.filter(d => d.name === name)
return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-'
}
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
@ -81,6 +94,9 @@ export default {
color: '#fff', color: '#fff',
fontSize: 16, fontSize: 16,
}, },
// formatter: value => {
// return value + calcAverageValue(this.data, value)
// },
}, },
series: [ series: [
{ {
@ -89,23 +105,14 @@ export default {
radius: [0, '85%'], radius: [0, '85%'],
center: ['35%', '50%'], center: ['35%', '50%'],
label: { label: {
formatter: '{d}%', formatter: '',
position: 'inner', position: 'inner',
fontSize: 14, fontSize: 14,
}, },
labelLine: { labelLine: {
show: false, show: false,
}, },
data: [ data: this.data,
{ value: 154, name: '类别一' },
{ value: 775, name: '类别二' },
{ value: 679, name: '类别三' },
{ value: 679, name: '类别四' },
{ value: 679, name: '类别五' },
{ value: 679, name: '类别六' },
{ value: 679, name: '类别七' },
{ value: 679, name: '类别八' },
],
}, },
], ],
}) })
@ -118,22 +125,37 @@ export default {
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
formatter: '{a1}<br/>{b1}：{c1}%', formatter: '{a1}<br/>{b1}：{c1}',
}, },
legend: { legend: {
data: ['收入', '实际', '目标'], data: ['收入', '实际', '目标'],
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: '#fff', //legend字体颜色
}, },
// selectedMode: false,
}, },
grid: { grid: {
containLabel: true, containLabel: true,
left: 50, left: 20,
right: 10,
top: 30, top: 30,
bottom: 50, bottom: 50,
}, },
xAxis: { xAxis: {
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08'], data: [
'2021-01',
'2021-02',
'2021-03',
'2021-04',
'2021-05',
'2021-06',
'2021-07',
'2021-08',
'2021-09',
'2021-10',
'2021-11',
'2021-12',
],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: 'rgb(255, 255, 255)',
@ -146,24 +168,47 @@ export default {
end: 50, end: 50,
}, },
color: ['#ccc', 'red'], color: ['#ccc', 'red'],
yAxis: { yAxis: [
splitLine: { {
show: true, name: '件',
// 改变轴线颜色 splitLine: {
lineStyle: { show: true,
// 使用深浅的间隔色 // 改变轴线颜色
color: ['rgba(255, 255, 255,.5)'], lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
},
},
axisLabel: {
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
}, },
}, },
axisLabel: { {
formatter: '{value}%', type: 'value',
}, min: 0,
axisLine: { max: 100,
lineStyle: { interval: 20,
color: 'rgb(255, 255, 255)', axisLabel: {
formatter: '{value} %',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
}, },
}, },
}, ],
series: [ series: [
{ {
name: '收入', name: '收入',
@ -184,7 +229,7 @@ export default {
itemStyle: { itemStyle: {
color: 'rgba(90, 216, 166, 0.85)', color: 'rgba(90, 216, 166, 0.85)',
}, },
data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95], data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
}, },
{ {
name: '目标', name: '目标',
@ -196,7 +241,7 @@ export default {
itemStyle: { itemStyle: {
color: '#F6D97E', color: '#F6D97E',
}, },
data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20], data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
}, },
], ],
}) })

74
src/views/bigScreen/drivingCabin/right1.vue
View File

@ -125,22 +125,37 @@ export default {
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
formatter: '{a1}<br/>{b1}：{c1}%', formatter: '{a1}<br/>{b1}：{c1}',
}, },
legend: { legend: {
data: ['预测', '实际', '目标'], data: ['预测', '实际', '目标'],
textStyle: { textStyle: {
color: '#fff', //legend字体颜色 color: '#fff', //legend字体颜色
}, },
// selectedMode: false,
}, },
grid: { grid: {
containLabel: true, containLabel: true,
left: 50, left: 20,
right: 10,
top: 30, top: 30,
bottom: 50, bottom: 50,
}, },
xAxis: { xAxis: {
data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七', '型号八'], data: [
'型号一',
'型号二',
'型号三',
'型号四',
'型号五',
'型号六',
'型号七',
'型号八',
'型号九',
'型号十',
'型号十一',
'型号十二',
],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgb(255, 255, 255)', color: 'rgb(255, 255, 255)',
@ -153,29 +168,52 @@ export default {
end: 50, end: 50,
}, },
color: ['#ccc', 'red'], color: ['#ccc', 'red'],
yAxis: { yAxis: [
splitLine: { {
show: true, name: '件',
// 改变轴线颜色 splitLine: {
lineStyle: { show: true,
// 使用深浅的间隔色 // 改变轴线颜色
color: ['rgba(255, 255, 255,.5)'], lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
},
},
axisLabel: {
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
}, },
}, },
axisLabel: { {
formatter: '{value}%', type: 'value',
}, min: 0,
axisLine: { max: 100,
lineStyle: { interval: 20,
color: 'rgb(255, 255, 255)', axisLabel: {
formatter: '{value} %',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
}, },
}, },
}, ],
series: [ series: [
{ {
name: '预测', name: '预测',
type: 'bar', type: 'bar',
z: '-1', // z: '-1',
barGap: '-75%', barGap: '-75%',
barWidth: 30, barWidth: 30,
itemStyle: { itemStyle: {