Commit f72613d8 authored by 王礼鸿 Baimax Wang's avatar 王礼鸿 Baimax Wang

数据格式化提交

parent c46c4c5b
...@@ -175,6 +175,9 @@ export default { ...@@ -175,6 +175,9 @@ export default {
{ {
type: 'line', type: 'line',
color: 'red', color: 'red',
lineStyle:{
width: 6,
},
label: { label: {
show: true, show: true,
position: 'bottom', position: 'bottom',
......
...@@ -17,6 +17,9 @@ export default { ...@@ -17,6 +17,9 @@ export default {
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
tooltip: {
valueFormatter: this.valueFormatter
},
label: { label: {
show: true, show: true,
// position: 'center', // position: 'center',
...@@ -89,7 +92,13 @@ export default { ...@@ -89,7 +92,13 @@ export default {
formatter:{ formatter:{
type: Function, type: Function,
default: function (param) { default: function (param) {
return param.name + '\r\n' + param.value return param.name + '\r\n' + param.value;
},
},
valueFormatter:{
type: Function,
default: function (param) {
return param.value
}, },
} }
} }
......
<template> <template>
<div class="bd" :class="{'center-bd': isCenter}"> <div class="bd" :class="{'center-bd': isCenter}">
<div class="title" v-if="title" :class="{'center-title': isCenter}" :style="titleStyle,{'--titleHeight': titleHeight}"> <div class="title" v-if="title" :class="{'center-title': isCenter}" :style="{'--titleHeight': titleHeight,...titleStyle}">
{{title}} {{title}}
</div> </div>
<div class="content" :style="{'--titleHeight': titleHeight}"> <div class="content" :style="{'--titleHeight': titleHeight}">
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<b v-if="!isBold" style="font-weight: normal" :style="contentStyle"> <b v-if="!isBold" style="font-weight: normal" :style="contentStyle">
{{content}} {{content}}
</b> </b>
<span class="mark" :style="{'--markWidth': mark.length},markStyle"> <span class="mark" :style="{'--markWidth': mark.length,...markStyle}">
{{mark}} {{mark}}
</span> </span>
</div> </div>
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
:class="{'selectCard': currentCard === key}" :class="{'selectCard': currentCard === 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','line-height': '30px'}" :mark-style="{'bottom': '12%'}" :title="key" :content="data.amount" mark="万元" isBold/>
<div <div
style="width: 60%; height: 100%; float:left; padding: 2% 2% 0 8%; line-height: 60px; display: flex; align-items: center;font-size: 16px;"> style="width: 60%; height: 100%; float:left; padding: 2% 2% 0 8%; line-height: 60px; display: flex; align-items: center;font-size: 16px;">
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/> <table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
...@@ -35,6 +35,7 @@ import TableColumn from "../components/table/table-column.vue"; ...@@ -35,6 +35,7 @@ import TableColumn from "../components/table/table-column.vue";
import ContrastCard from "../components/card/contrast-card.vue"; import ContrastCard from "../components/card/contrast-card.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import {getTrunOver} from "./turnoverDetail" import {getTrunOver} from "./turnoverDetail"
import {conver_amont} from "../../utils/numUtil";
export default { export default {
name: "TurnoverDetail", name: "TurnoverDetail",
...@@ -112,12 +113,12 @@ export default { ...@@ -112,12 +113,12 @@ export default {
} }
}, },
detail: [ detail: [
{"汽运(元)": 0, "水运(元)": 0, "铁运(元)": 0, "date": "2023-05-06"} {"汽运(万元)": 0, "水运(万元)": 0, "铁运(万元)": 0, "date": "2023-05-06"}
] ]
}, },
chart: null, chart: null,
currentBtn: "day", currentBtn: "day",
currentLegend: '汽运(元)', currentLegend: '汽运(元)',
currentCard: '营业额', currentCard: '营业额',
chartOption: { chartOption: {
legend: { legend: {
...@@ -125,9 +126,12 @@ export default { ...@@ -125,9 +126,12 @@ export default {
color: 'white' color: 'white'
} }
}, },
tooltip: {}, tooltip: {
trigger: 'axis',
valueFormatter: this.valueFormatter
},
dataset: { dataset: {
dimensions: ['date', '汽运(元)', '水运(元)', '铁运(元)'], dimensions: ['date', '汽运(万元)', '水运(万元)', '铁运(万元)'],
source: [] source: []
}, },
xAxis: { xAxis: {
...@@ -150,6 +154,7 @@ export default { ...@@ -150,6 +154,7 @@ export default {
show: true, show: true,
position: 'top', position: 'top',
color: "#00CCD2", color: "#00CCD2",
formatter:this.labelFormatter(1)
}, },
color: { color: {
type: 'linear', type: 'linear',
...@@ -166,6 +171,7 @@ export default { ...@@ -166,6 +171,7 @@ export default {
show: true, show: true,
position: 'top', position: 'top',
color: "#FFFAB7", color: "#FFFAB7",
formatter:this.labelFormatter(2)
}, },
color: { color: {
type: 'linear', type: 'linear',
...@@ -182,6 +188,7 @@ export default { ...@@ -182,6 +188,7 @@ export default {
show: true, show: true,
position: 'top', position: 'top',
color: "#81FBB8", color: "#81FBB8",
formatter:this.labelFormatter(3)
}, },
color: { color: {
type: 'linear', type: 'linear',
...@@ -195,6 +202,9 @@ export default { ...@@ -195,6 +202,9 @@ export default {
{ {
type: 'line', type: 'line',
color: 'red', color: 'red',
lineStyle:{
width: 6,
},
data: [] data: []
} }
] ]
...@@ -211,6 +221,15 @@ export default { ...@@ -211,6 +221,15 @@ export default {
this.chart.resize(); this.chart.resize();
} }
}, },
valueFormatter(param) {
return conver_amont(param);
},
labelFormatter(dimensionNames){
return function (param){
return conver_amont(param.value[param.dimensionNames[dimensionNames]]) + "万元";
}
},
async changeDimension(dimension) { async changeDimension(dimension) {
this.currentBtn = dimension; this.currentBtn = dimension;
switch (dimension) { switch (dimension) {
...@@ -246,32 +265,32 @@ export default { ...@@ -246,32 +265,32 @@ export default {
case '营业额': case '营业额':
break; break;
case '汽运营业额': case '汽运营业额':
name = "汽运(元)"; name = "汽运(元)";
break; break;
case '水运营业额': case '水运营业额':
name = "水运(元)"; name = "水运(元)";
break; break;
case '铁运营业额': case '铁运营业额':
name = "铁运(元)"; name = "铁运(元)";
break; break;
case '汽运成本': case '汽运成本':
name = "汽运(元)"; name = "汽运(元)";
break; break;
case '水运成本': case '水运成本':
name = "水运(元)"; name = "水运(元)";
break; break;
case '铁运成本': case '铁运成本':
name = "铁运(元)"; name = "铁运(元)";
break; break;
case '汽运毛利': case '汽运毛利':
name = "汽运(元)"; name = "汽运(元)";
break; break;
case '水运毛利': case '水运毛利':
name = "水运(元)"; name = "水运(元)";
break; break;
case '铁运毛利': case '铁运毛利':
name = "铁运(元)"; name = "铁运(元)";
break; break;
default: default:
break; break;
......
...@@ -387,35 +387,35 @@ export const detailConver = function (type, detailList) { ...@@ -387,35 +387,35 @@ export const detailConver = function (type, detailList) {
//初始化 //初始化
if (type == 'yye') { if (type == 'yye') {
if (data.cur_transport_type == '10') { if (data.cur_transport_type == '10') {
detail['汽运(元)'] = data.cur_sell_settle_amount; detail['汽运(元)'] = data.cur_sell_settle_amount;
} }
if (data.cur_transport_type == '30') { if (data.cur_transport_type == '30') {
detail['水运(元)'] = data.cur_sell_settle_amount detail['水运(元)'] = data.cur_sell_settle_amount
} }
if (data.cur_transport_type == '20') { if (data.cur_transport_type == '20') {
detail['铁运(元)'] = data.cur_sell_settle_amount detail['铁运(元)'] = data.cur_sell_settle_amount
} }
} }
if (type == 'cb') { if (type == 'cb') {
if (data.cur_transport_type == '10') { if (data.cur_transport_type == '10') {
detail['汽运(元)'] = data.cur_buy_settle_amount detail['汽运(元)'] = data.cur_buy_settle_amount
} }
if (data.cur_transport_type == '30') { if (data.cur_transport_type == '30') {
detail['水运(元)'] = data.cur_buy_settle_amount detail['水运(元)'] = data.cur_buy_settle_amount
} }
if (data.cur_transport_type == '20') { if (data.cur_transport_type == '20') {
detail['铁运(元)'] = data.cur_buy_settle_amount detail['铁运(元)'] = data.cur_buy_settle_amount
} }
} }
if (type == 'ml') { if (type == 'ml') {
if (data.cur_transport_type == '10') { if (data.cur_transport_type == '10') {
detail['汽运(元)'] = data.cur_gross_profit_amount detail['汽运(元)'] = data.cur_gross_profit_amount
} }
if (data.cur_transport_type == '30') { if (data.cur_transport_type == '30') {
detail['水运(元)'] = data.cur_gross_profit_amount detail['水运(元)'] = data.cur_gross_profit_amount
} }
if (data.cur_transport_type == '20') { if (data.cur_transport_type == '20') {
detail['铁运(元)'] = data.cur_gross_profit_amount detail['铁运(元)'] = data.cur_gross_profit_amount
} }
} }
} }
...@@ -426,9 +426,9 @@ export const detailConver = function (type, detailList) { ...@@ -426,9 +426,9 @@ export const detailConver = function (type, detailList) {
*/ */
export const initDetail = function () { export const initDetail = function () {
let detail = {}; let detail = {};
detail['汽运(元)'] = 0 detail['汽运(元)'] = 0
detail['水运(元)'] = 0 detail['水运(元)'] = 0
detail['铁运(元)'] = 0 detail['铁运(元)'] = 0
return detail; return detail;
} }
...@@ -132,8 +132,8 @@ ...@@ -132,8 +132,8 @@
</div> </div>
<display-board class="trade_right" title="当日订单量占比"> <display-board class="trade_right" title="当日订单量占比">
<div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;"> <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;z-index: 999" name="运输类型占比" :data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')" :formatter="pieDataFormatter"/> <ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;z-index: 999" name="运输类型占比" :data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')" :value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')" :formatter="pieDataFormatter"/> <ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')" :value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
</div> </div>
</display-board> </display-board>
</div> </div>
...@@ -492,9 +492,12 @@ export default { ...@@ -492,9 +492,12 @@ export default {
getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res,this.today); getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res,this.today);
getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res,this.today); getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res,this.today);
}, },
pieDataFormatter(param){ pieDataValueFormatter(param){
return param.name + '\r\n' + conver_num_retain(param.value); return conver_amont(param) + "万元";
} },
pieDataFormatter (param) {
return param.name + '\r\n' + this.pieDataValueFormatter(param.value) + "万元";
},
}, },
mounted() { mounted() {
this.showBusinessConditionDatas(); this.showBusinessConditionDatas();
...@@ -503,7 +506,7 @@ export default { ...@@ -503,7 +506,7 @@ export default {
}, 500) }, 500)
this.getArSummaryBar(); this.getArSummaryBar();
this.getArCompanyList(); this.getArCompanyList();
this.refreshData() this.refreshData();
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener("resize", this.resizeChart); window.removeEventListener("resize", this.resizeChart);
......
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