Commit 53bbe868 authored by 王礼鸿 Baimax Wang's avatar 王礼鸿 Baimax Wang

饼图代码提交

parent bedfa15c
......@@ -63,5 +63,6 @@ export const arCompanyMonthlyBar = (company) => fetch("/api/query/dash_board/act
// 开票月份 应收账款(结算单位)
export const arMonthlyCompanyBar = (month) => fetch("/api/query/dash_board/action/get_ar_monthly_company_bar", {aux: {month: month}}, "POST")
// export const transportTypeFinishPie = () => fetch("/api/query/dash_board/action/get_order_finish_data_by_transport_type_day", {}, "POST")
export const transportTypeOrderFinishPie = (date) => fetch("/api/query/dash_board/action/get_order_finish_data_by_transport_type_day", {aux: {"cur_day":date}}, "POST")
export const customerOrderFinishPie = (date) => fetch("/api/query/dash_board/action/get_order_finish_data_by_customer_day", {aux: {"cur_day":date}}, "POST")
......@@ -12,8 +12,7 @@ export default {
tooltip: {
trigger: 'item'
},
series: [
{
series: {
name: this.name,
type: 'pie',
radius: ['40%', '70%'],
......@@ -37,19 +36,16 @@ export default {
},
data: this.data
}
]
},
chart: null,
}
},
watch: {
data(newValue, oldValue){
this.option.data = newValue;
this.chart.setOption(this.option);
data(n, o){
this.refresh();
},
name(newName, oldName){
this.option.series.name = newName;
this.chart.setOption(this.option);
name(n, o){
this.refresh();
}
},
methods: {
......@@ -57,13 +53,20 @@ export default {
if (this.chart) {
this.chart.resize();
}
},
refresh(){
this.option.series.data = this.data;
this.option.series.name = this.name;
if (this.chart){
this.chart.setOption(this.option);
}
}
},
mounted() {
setTimeout(() => {
let chartDom = this.$refs.chart;
this.chart = echarts.init(chartDom);
this.chart.setOption(this.option);
this.refresh();
window.addEventListener('resize', this.resizeChart);
}, 500)
},
......
// import {transportTypeFinishPie} from '../../../api/apiList';
//
// export const getTransportTypeFinishPie = (month) => {
// var data = transportTypeFinishPie();
// var res = {};
// console.log(data);
// console.log("data");
// }
//
// export const refreshData = () => {
// getTransportTypeFinishPie();
// }
import {customerOrderFinishPie, transportTypeOrderFinishPie} from '../../../api/apiList';
export const getTransportTypeOrderFinishPie = async (callback,date) => {
let choiceMap = {
'10': '汽运',
'20': '铁运',
'30': '水运',
'50': '码头/仓库',
}
let resList = new Array();
await transportTypeOrderFinishPie(date).then(function (res) {
for (let key in choiceMap) {
resList.push({name: choiceMap[key], value: res.data[key].cur_unit_weight});
}
});
callback(resList);
return resList
}
export const getCustomerOrderFinishPie = async (callback,date) => {
let resList = new Array();
await customerOrderFinishPie(date).then(function (res) {
for (let key in res.data) {
resList.push({name: key, value: res.data[key].cur_unit_weight});
}
});
callback(resList);
return resList
}
<template>
<div class="main">
<div class="main" @click="log()">
<div class="middle">
<display-board class="trade_left" title="营业情况">
<div
......@@ -133,8 +133,8 @@
</div>
<display-board class="trade_right" title="当日订单量占比">
<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%;" name="运输类型占比" :data="mockData.drddlzb.transportType" @click.native="routerTo('/order-proportion')"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="mockData.drddlzb.customer" @click.native="routerTo('/order-proportion')"/>
<ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;z-index: 999" name="运输类型占比" :data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比" :data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')"/>
</div>
</display-board>
</div>
......@@ -150,10 +150,9 @@ import WinnersList from "./components/card/winners-list.vue";
import TitleContentMark from "./components/layout/title-content-mark.vue";
import TableColumn from "./components/table/table-column.vue";
import RingPieChart from "./components/chart/ring-pie-chart.vue";
import {calc_hb_str, calc_tb_str, conver_amont} from "../util/util";
import {arSummaryBar, arCompanyList,getBusinessConditionDatas} from "../api/apiList"
import {arSummaryBar, arCompanyList, getBusinessConditionDatas, customerOrderFinishPie} from "../api/apiList"
import {calc_hb_str, calc_tb_str, conver_amont} from "../utils/numUtil";
// import {refreshData} from "./databoard/js/api";
import {getTransportTypeOrderFinishPie,getCustomerOrderFinishPie} from "./databoard/js/indexPieData";
export default {
components: {
......@@ -403,13 +402,19 @@ export default {
"成本": "/turnover-detail",
"毛利": "/turnover-detail",
},
dataset:{},
transportTypeOrderFinishPie:[],
customerOrderFinishPie:[],
arCompanyList:[],
charts: {}
}
},
methods: {
log(){
},
cellStyleFunction(data) {
let res = {color: '#33ff66'};
console.log(data + ":" + data.indexOf('+'))
// console.log(data + ":" + data.indexOf('+'))
if (data.indexOf('-') !== -1) {
res.color = '#ff3300'
}
......@@ -476,8 +481,11 @@ export default {
}).catch(err => {
console.log(err);
});
},
refreshData(){
getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res,"2022-06-26");
getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res,"2022-06-26");
}
},
mounted() {
this.showBusinessConditionDatas();
......@@ -486,7 +494,7 @@ export default {
}, 500)
this.getArSummaryBar();
this.getArCompanyList();
// refreshData();
this.refreshData()
},
beforeDestroy() {
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