Skip to content

S
shld-databoard-ui
Commit b910bbdc authored by 潘自豪's avatar 潘自豪
Browse files
Options

营业额数据

parent f137b7d4
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 58 deletions
src/module/databoard/databoard/turnover-detail.vue
View file @ b910bbdc
<template> <template>
<div class="turnover-detail"> <div class="turnover-detail">
<div class="card-board"> <div class="card-board">
<contrast-card v-for="(data,key) in currentData.head" style="height: 100%;width: 20%;" :class="{'selectCard': key}" <contrast-card v-for="(data,key) in currentData.head" style="height: 100%;width: 20%;"
:class="{'selectCard': key}"
@click.native="selectLegend(key)"> @click.native="selectLegend(key)">
<title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px" <title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px"
:title-style="{'font-weight': 'bold'}" :title="key" :content="data.amount" isBold/> :title-style="{'font-weight': 'bold'}" :title="key" :content="data.amount" isBold/>
...@@ -118,7 +119,7 @@ export default { ...@@ -118,7 +119,7 @@ export default {
currentBtn: "day", currentBtn: "day",
currentLegend: '汽运(元)', currentLegend: '汽运(元)',
currentCard: '营业额', currentCard: '营业额',
chartOption:{ chartOption: {
legend: { legend: {
textStyle: { textStyle: {
color: 'white' color: 'white'
...@@ -143,66 +144,66 @@ export default { ...@@ -143,66 +144,66 @@ export default {
} }
}, },
series: [ series: [
{ {
type: 'bar', type: 'bar',
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
color: "#00CCD2", color: "#00CCD2",
},
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#00CCD2'},
{offset: 1, color: '#00A2FF'}
]
},
}, },
{ color: {
type: 'bar', type: 'linear',
label: { x: 0, y: 0, x2: 0, y2: 1,
show: true, colorStops: [
position: 'top', {offset: 0, color: '#00CCD2'},
color: "#FFFAB7", {offset: 1, color: '#00A2FF'}
}, ]
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#FFFAB7'},
{offset: 1, color: '#FFF459'}
]
},
}, },
{ },
type: 'bar', {
label: { type: 'bar',
show: true, label: {
position: 'top', show: true,
color: "#81FBB8", position: 'top',
}, color: "#FFFAB7",
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#81FBB8'},
{offset: 1, color: '#28C76F'}
]
},
}, },
{ color: {
type: 'line', type: 'linear',
color: 'red', x: 0, y: 0, x2: 0, y2: 1,
data: [] colorStops: [
} {offset: 0, color: '#FFFAB7'},
{offset: 1, color: '#FFF459'}
]
},
},
{
type: 'bar',
label: {
show: true,
position: 'top',
color: "#81FBB8",
},
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#81FBB8'},
{offset: 1, color: '#28C76F'}
]
},
},
{
type: 'line',
color: 'red',
data: []
}
] ]
} }
} }
}, },
watch: {}, watch: {},
methods: { methods: {
back(){ back() {
this.$router.push({path: '/'}); this.$router.push({path: '/'});
}, },
resizeChart() { resizeChart() {
...@@ -253,10 +254,28 @@ export default { ...@@ -253,10 +254,28 @@ export default {
case '铁运营业额': case '铁运营业额':
name = "铁运(元)"; name = "铁运(元)";
break; break;
case '汽运成本':
name = "汽运(元)";
break;
case '水运成本':
name = "水运(元)";
break;
case '铁运成本':
name = "铁运(元)";
break;
case '汽运毛利':
name = "汽运(元)";
break;
case '水运毛利':
name = "水运(元)";
break;
case '铁运毛利':
name = "铁运(元)";
break;
default: default:
break; break;
} }
console.log(name)
if (name) { if (name) {
this.chart.dispatchAction({ this.chart.dispatchAction({
type: 'legendInverseSelect' type: 'legendInverseSelect'
...@@ -271,7 +290,7 @@ export default { ...@@ -271,7 +290,7 @@ export default {
this.chartOption.series[3].data = []; this.chartOption.series[3].data = [];
} }
this.currentLegend = name; this.currentLegend = name;
this.currentCard = data.title; this.currentCard = title;
this.chart.setOption(this.chartOption); this.chart.setOption(this.chartOption);
}, },
...@@ -345,11 +364,12 @@ input[type="button"] { ...@@ -345,11 +364,12 @@ input[type="button"] {
background-color: #1234a1; background-color: #1234a1;
} }
input[type="button"]:hover{ input[type="button"]:hover {
color: #1234a1 !important; color: #1234a1 !important;
background-color: #00c8d6 !important; background-color: #00c8d6 !important;
} }
.selectedBtn{
.selectedBtn {
color: #1234a1 !important; color: #1234a1 !important;
background-color: #00c8d6 !important; background-color: #00c8d6 !important;
} }
...@@ -358,7 +378,8 @@ input[type="button"]:hover{ ...@@ -358,7 +378,8 @@ input[type="button"]:hover{
color: #00c8d6; color: #00c8d6;
background-color: #1234a1; background-color: #1234a1;
} }
.selectCard{
.selectCard {
background-color: var(--card-background-select-color) !important; background-color: var(--card-background-select-color) !important;
} }
</style> </style>
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