From 4adfb60b225a00798e8bdd3cdcc81cd2bec7b78e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B9=E8=AF=9A=E8=AF=9A?= Date: Mon, 17 Oct 2022 16:20:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=86=E9=A5=BC=E5=9B=BE?= =?UTF-8?q?=EF=BC=8C=E6=B1=87=E7=8E=87=E8=B5=B0=E5=8A=BF=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 8 +- src/charts/ExchangeRate.js | 76 +++++++ src/config.js | 4 +- src/stores/AuthStore.js | 2 +- src/stores/DashboardStore.js | 405 ++++++++++++++++++---------------- src/views/Credit_card_bill.js | 74 ++++--- src/views/Dashboard.js | 55 ++--- src/views/Orders.js | 95 +++++++- 8 files changed, 462 insertions(+), 257 deletions(-) create mode 100644 src/charts/ExchangeRate.js diff --git a/src/App.js b/src/App.js index d37c0a5..4929d43 100644 --- a/src/App.js +++ b/src/App.js @@ -14,10 +14,12 @@ import Customer_care_regular from "./charts/Customer_care_regular"; import Wechat_session from "./charts/Wechat_session"; import WhatsApp_session from "./charts/WhatsApp_session"; import Credit_card_bill from "./views/Credit_card_bill"; +import exchange_rate from "./charts/ExchangeRate"; import Sale from "./views/Sale"; import Logo from "./logo.png"; import { stores_Context } from "./config"; import { observer } from "mobx-react"; +import ExchangeRate from "./charts/ExchangeRate"; const App = () => { const { Content, Footer, Sider } = Layout; @@ -56,7 +58,10 @@ const App = () => { key: 4, label: "财务", icon: , - children: [{ key: 41, label: 信用卡账单 }], + children: [ + { key: 41, label: 信用卡账单 }, + { key: 42, label: 汇率 }, + ], }, ]; @@ -92,6 +97,7 @@ const App = () => { }> } /> + } /> }> } /> diff --git a/src/charts/ExchangeRate.js b/src/charts/ExchangeRate.js new file mode 100644 index 0000000..828abea --- /dev/null +++ b/src/charts/ExchangeRate.js @@ -0,0 +1,76 @@ +import React, { Component } from "react"; +import { Table, Button, Space, Radio } from "antd"; +import { SearchOutlined } from "@ant-design/icons"; +import GroupSelect from "./GroupSelect"; +import DatePickerCharts from "./DatePickerCharts"; +import { stores_Context } from "../config"; +import { observer } from "mobx-react"; +import * as comm from "../utils/commons"; +import { Line } from "@ant-design/charts"; +import * as config from "../config"; + +class ExchangeRate extends Component { + static contextType = stores_Context; + + constructor(props) { + super(props); + } + + render() { + const { dashboard_store, date_picker_store } = this.context; + const { exchangeRate_data } = dashboard_store; + const line_data_source = comm.empty(exchangeRate_data.data) ? [] : exchangeRate_data.data.CurrencyData1; + const line_config = { + data: line_data_source, + padding: "auto", + xField: "er_date", + yField: "er_htrate", + seriesField: "er_currency", + xAxis: { + type: "timeCat", + }, + point: { + size: 4, + shape: "cicle", + }, + label: {}, //显示标签 + tooltip: { + // customContent: (title, items) => { + // const data = items[0]?.data || {}; + // return `
${title}
${data.seriesField} ${data.yField}
`; + // }, + // itemTpl: '
  • {name}: {value}
    • ', + customItems: items => { + let result_arr = []; + items.forEach(item => { + item.value = item.data.er_htrate + " | " + item.data.er_bankrate; + return result_arr.push(item); + }); + return result_arr; //return [{color:'red',name:'sss',value:22},{color:'red',name:'aaaa',value:22}]; + }, + }, + smooth: true, + }; + + return ( +
    +

    汇率 HT|Bank

    + + + + + +
    + ); + } +} + +export default observer(ExchangeRate); diff --git a/src/config.js b/src/config.js index 2da73bd..b44be47 100644 --- a/src/config.js +++ b/src/config.js @@ -2,5 +2,5 @@ import React from "react"; export const stores_Context = React.createContext(); export const DATE_FORMAT = "YYYY-MM-DD"; -export const HT_HOST = 'https://p9axztuwd7x8a7.mycht.cn'; -//export const HT_HOST = "http://202.103.68.100:890"; //889正式库 +//export const HT_HOST = 'https://p9axztuwd7x8a7.mycht.cn'; +export const HT_HOST = "http://202.103.68.100:890"; //889正式库 diff --git a/src/stores/AuthStore.js b/src/stores/AuthStore.js index 2c624fb..7e28d1b 100644 --- a/src/stores/AuthStore.js +++ b/src/stores/AuthStore.js @@ -9,7 +9,7 @@ class AuthStore { constructor(rootStore) { this.rootStore = rootStore; makeAutoObservable(this); - this.get_auth(); //放到钉钉环境才能开启 + //this.get_auth(); //放到钉钉环境才能开启 } auth = ['admin']; //开发时候用，正式环境留空 diff --git a/src/stores/DashboardStore.js b/src/stores/DashboardStore.js index 7d7c025..e722cbd 100644 --- a/src/stores/DashboardStore.js +++ b/src/stores/DashboardStore.js @@ -1,198 +1,219 @@ -import {makeAutoObservable, runInAction} from "mobx"; +import { makeAutoObservable, runInAction } from "mobx"; import * as config from "../config"; - class DashboardStore { - - constructor(rootStore) { - this.rootStore = rootStore; - makeAutoObservable(this); - } - - loading = false; - site_select_mode = 'multiple';//是否多选站点 - webcode = ['CHT', 'AH', 'GH']; - - //订单统计 begin - orders_data = { - loading: false, - data: [], - getOrderCount_all: this.getOrderCount_all.bind(this), - } - - getOrderCount_all() { //统计所有站点订单数量 - this.orders_data.loading = true; - const date_picker_store = this.rootStore.date_picker_store; - let url = '/service-web/QueryData/GetOrderCount' - url += '?WebCode=all&COLI_ApplyDate1=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&COLI_ApplyDate2=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59'; - - fetch(config.HT_HOST + url) - .then((response) => response.json()) - .then((json) => { - runInAction(() => { - this.orders_data.data = json.ordercount1; - this.orders_data.loading = false; - }) - }) - .catch((error) => { - this.orders_data.loading = false; - console.log('fetch data failed', error); - }); - } - - //订单统计 end - - // 临时订单 begin - - ordersTemp_data = { - data: [], - data_detail: [], - loading: false, - loading_detail: false, - show_table: false, - site_select_mode: 'multiple', - webcode: ['CHT', 'AH', 'GH'], - handleChange_webcode: this.handleChange_site_select.bind(this), - asyncFetch: this.get_CountOrdersData.bind(this), - asyncFetch_detail: this.get_CountOrdersData_detail.bind(this), - } - - handleChange_site_select(value) { - this.ordersTemp_data.webcode = value; - } - - get_CountOrdersData() { - this.ordersTemp_data.loading = true; - this.ordersTemp_data.show_table = false; - const date_picker_store = this.rootStore.date_picker_store; - let url = '/service-baseinfo/QueryWebData?type=orders_temp&db=1'; - const website_code = "'" + this.ordersTemp_data.webcode.join("','") + "'"; - url += '&WebSite=' + website_code + '&ApplyDateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&ApplyDateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59'; - fetch(config.HT_HOST + url) - .then((response) => response.json()) - .then((json) => { - runInAction(() => { - this.ordersTemp_data.data = json.data; - this.ordersTemp_data.loading = false; - }) - }) - .catch((error) => { - this.ordersTemp_data.loading = false; - console.log('fetch data failed', error); - }); - } - - get_CountOrdersData_detail() { - this.ordersTemp_data.loading_detail = true; - this.ordersTemp_data.show_table = true; - const date_picker_store = this.rootStore.date_picker_store; - let url = '/service-baseinfo/QueryWebData?type=orders_temp_detail&db=1'; - const website_code = "'" + this.ordersTemp_data.webcode.join("','") + "'"; - url += '&WebSite=' + website_code + '&ApplyDateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&ApplyDateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59'; - fetch(config.HT_HOST + url) - .then((response) => response.json()) - .then((json) => { - runInAction(() => { - this.ordersTemp_data.data_detail = json.data; - this.ordersTemp_data.loading_detail = false; - }) - }) - .catch((error) => { - this.ordersTemp_data.loading_detail = false; - console.log('fetch data failed', error); - }); - } - - // 临时订单 end - - - // 移动成交 beign - handleChange_webcode = (value) => { - this.webcode = value; - }; - - handleChange_group_select(value) { - this.mobile_data.groups = value; - }; - - onChange_datetype(e) { - this.mobile_data.date_type = e.target.value; - }; - - get_CountYDOrder() { - const date_picker_store = this.rootStore.date_picker_store; - this.mobile_data.loading = true; - let url = '/service-tourdesign/CountYDOrder?DEI_SNList=' + this.mobile_data.groups.toString(); - if (this.mobile_data.date_type == 'applyDate') { - url += '&ApplydateCheck=1&OrderStartdateCheck=0'; - } else { - url += '&ApplydateCheck=0&OrderStartdateCheck=1'; - } - url += '&ApplydateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&ApplydateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59'; - url += '&OrderStartdateStart=' + date_picker_store.start_date.format(config.DATE_FORMAT) + '&OrderStartdateEnd=' + date_picker_store.end_date.format(config.DATE_FORMAT) + '%2023:59:59'; - fetch(config.HT_HOST + url) - .then((response) => response.json()) - .then((json) => { - let table_data = [] - json && json.map((item, index) => { - table_data.push({ - key: index, - department_name: item.DEI_DepartmentName, - mobile_order: item.YDOrderNum + '/' + item.OrderNum + ' (' + (item.OrderNumRate * 100).toFixed(1) + '%)', - mobile_deal: item.YDOrderNumSUC + ' / ' + item.OrderNumSUC + ' (' + (item.OrderNumSUCRate * 100).toFixed(1) + '%)', - mobile_gross: item.YDML + ' / ' + item.ML + ' (' + (item.MLRate * 100).toFixed(1) + '%)', - }) - }) - runInAction(() => { - this.mobile_data.data = table_data; - this.mobile_data.loading = false; - }) - }) - .catch((error) => { - this.mobile_data.loading = false; - console.log('fetch data failed', error); - }); - }; - - mobile_data = { - loading: false, - data: [], - group_select_mode: 'multiple',//是否多选分组 - groups: ['1', '2', '28', '7', '8', '9', '11', '12', '20', '21','18'], - columns: [ - { - title: '市场', - dataIndex: 'department_name', - key: 'department_name', - }, - { - title: '移动订单/总订单', - dataIndex: 'mobile_order', - key: 'mobile_order', - }, - { - title: '移动成交/总成交', - dataIndex: 'mobile_deal', - key: 'mobile_deal', - }, - { - title: '移动毛利/总毛利', - dataIndex: 'mobile_gross', - key: 'mobile_gross', - }, - ], - date_type: 'applyDate', - group_handleChange: this.handleChange_group_select.bind(this), - onChange_datetype: this.onChange_datetype.bind(this), - asyncFetch: this.get_CountYDOrder.bind(this), - } -// 移动成交 end - - - - + constructor(rootStore) { + this.rootStore = rootStore; + makeAutoObservable(this); + } + + loading = false; + site_select_mode = "multiple"; //是否多选站点 + webcode = ["CHT", "AH", "GH"]; + + //订单统计 begin + orders_data = { + loading: false, + data: [], + getOrderCount_all: this.getOrderCount_all.bind(this), + }; + + getOrderCount_all() { + //统计所有站点订单数量 + this.orders_data.loading = true; + const date_picker_store = this.rootStore.date_picker_store; + let url = "/service-web/QueryData/GetOrderCount"; + url += "?WebCode=all&COLI_ApplyDate1=" + date_picker_store.start_date.format(config.DATE_FORMAT) + "&COLI_ApplyDate2=" + date_picker_store.end_date.format(config.DATE_FORMAT) + "%2023:59:59"; + + fetch(config.HT_HOST + url) + .then(response => response.json()) + .then(json => { + runInAction(() => { + this.orders_data.data = json.ordercount1; + this.orders_data.loading = false; + }); + }) + .catch(error => { + this.orders_data.loading = false; + console.log("fetch data failed", error); + }); + } + + //订单统计 end + + // 临时订单 begin + + ordersTemp_data = { + data: [], + data_detail: [], + loading: false, + loading_detail: false, + show_table: false, + site_select_mode: "multiple", + webcode: ["CHT", "AH", "GH"], + handleChange_webcode: this.handleChange_site_select.bind(this), + asyncFetch: this.get_CountOrdersData.bind(this), + asyncFetch_detail: this.get_CountOrdersData_detail.bind(this), + }; + + handleChange_site_select(value) { + this.ordersTemp_data.webcode = value; + } + + get_CountOrdersData() { + this.ordersTemp_data.loading = true; + this.ordersTemp_data.show_table = false; + const date_picker_store = this.rootStore.date_picker_store; + let url = "/service-baseinfo/QueryWebData?type=orders_temp&db=1"; + const website_code = "'" + this.ordersTemp_data.webcode.join("','") + "'"; + url += "&WebSite=" + website_code + "&ApplyDateStart=" + date_picker_store.start_date.format(config.DATE_FORMAT) + "&ApplyDateEnd=" + date_picker_store.end_date.format(config.DATE_FORMAT) + "%2023:59:59"; + fetch(config.HT_HOST + url) + .then(response => response.json()) + .then(json => { + runInAction(() => { + this.ordersTemp_data.data = json.data; + this.ordersTemp_data.loading = false; + }); + }) + .catch(error => { + this.ordersTemp_data.loading = false; + console.log("fetch data failed", error); + }); + } + + get_CountOrdersData_detail() { + this.ordersTemp_data.loading_detail = true; + this.ordersTemp_data.show_table = true; + const date_picker_store = this.rootStore.date_picker_store; + let url = "/service-baseinfo/QueryWebData?type=orders_temp_detail&db=1"; + const website_code = "'" + this.ordersTemp_data.webcode.join("','") + "'"; + url += "&WebSite=" + website_code + "&ApplyDateStart=" + date_picker_store.start_date.format(config.DATE_FORMAT) + "&ApplyDateEnd=" + date_picker_store.end_date.format(config.DATE_FORMAT) + "%2023:59:59"; + fetch(config.HT_HOST + url) + .then(response => response.json()) + .then(json => { + runInAction(() => { + this.ordersTemp_data.data_detail = json.data; + this.ordersTemp_data.loading_detail = false; + }); + }) + .catch(error => { + this.ordersTemp_data.loading_detail = false; + console.log("fetch data failed", error); + }); + } + + // 临时订单 end + + // 移动成交 beign + handleChange_webcode = value => { + this.webcode = value; + }; + + handleChange_group_select(value) { + this.mobile_data.groups = value; + } + + onChange_datetype(e) { + this.mobile_data.date_type = e.target.value; + } + + get_CountYDOrder() { + const date_picker_store = this.rootStore.date_picker_store; + this.mobile_data.loading = true; + let url = "/service-tourdesign/CountYDOrder?DEI_SNList=" + this.mobile_data.groups.toString(); + if (this.mobile_data.date_type == "applyDate") { + url += "&ApplydateCheck=1&OrderStartdateCheck=0"; + } else { + url += "&ApplydateCheck=0&OrderStartdateCheck=1"; + } + url += "&ApplydateStart=" + date_picker_store.start_date.format(config.DATE_FORMAT) + "&ApplydateEnd=" + date_picker_store.end_date.format(config.DATE_FORMAT) + "%2023:59:59"; + url += "&OrderStartdateStart=" + date_picker_store.start_date.format(config.DATE_FORMAT) + "&OrderStartdateEnd=" + date_picker_store.end_date.format(config.DATE_FORMAT) + "%2023:59:59"; + fetch(config.HT_HOST + url) + .then(response => response.json()) + .then(json => { + let table_data = []; + json && + json.map((item, index) => { + table_data.push({ + key: index, + department_name: item.DEI_DepartmentName, + mobile_order: item.YDOrderNum + "/" + item.OrderNum + " (" + (item.OrderNumRate * 100).toFixed(1) + "%)", + mobile_deal: item.YDOrderNumSUC + " / " + item.OrderNumSUC + " (" + (item.OrderNumSUCRate * 100).toFixed(1) + "%)", + mobile_gross: item.YDML + " / " + item.ML + " (" + (item.MLRate * 100).toFixed(1) + "%)", + }); + }); + runInAction(() => { + this.mobile_data.data = table_data; + this.mobile_data.loading = false; + }); + }) + .catch(error => { + this.mobile_data.loading = false; + console.log("fetch data failed", error); + }); + } + + mobile_data = { + loading: false, + data: [], + group_select_mode: "multiple", //是否多选分组 + groups: ["1", "2", "28", "7", "8", "9", "11", "12", "20", "21", "18"], + columns: [ + { + title: "市场", + dataIndex: "department_name", + key: "department_name", + }, + { + title: "移动订单/总订单", + dataIndex: "mobile_order", + key: "mobile_order", + }, + { + title: "移动成交/总成交", + dataIndex: "mobile_deal", + key: "mobile_deal", + }, + { + title: "移动毛利/总毛利", + dataIndex: "mobile_gross", + key: "mobile_gross", + }, + ], + date_type: "applyDate", + group_handleChange: this.handleChange_group_select.bind(this), + onChange_datetype: this.onChange_datetype.bind(this), + asyncFetch: this.get_CountYDOrder.bind(this), + }; + // 移动成交 end + + // 汇率变化 begin + exchangeRate_data = { + loading: false, + data: [], + asyncFetch: this.get_currency_exchange_rate.bind(this), + }; + + get_currency_exchange_rate(Currdate1_start, Currdate1_end) { + const date_picker_store = this.rootStore.date_picker_store; + this.exchangeRate_data.loading = true; + let url = "/service-web/QueryData/GetCurrency?Currency=ALL"; + url += "&Currdate1=" + Currdate1_start + "&Currdate2=" + Currdate1_end + "%2023:59:59"; + fetch(config.HT_HOST + url) + .then(response => response.json()) + .then(json => { + runInAction(() => { + this.exchangeRate_data.data = json; + this.exchangeRate_data.loading = false; + }); + }) + .catch(error => { + this.exchangeRate_data.loading = false; + console.log("fetch data failed", error); + }); + } + + // 汇率变化 end } - export default DashboardStore; - diff --git a/src/views/Credit_card_bill.js b/src/views/Credit_card_bill.js index 7dcfcb1..50a0340 100644 --- a/src/views/Credit_card_bill.js +++ b/src/views/Credit_card_bill.js @@ -9,7 +9,7 @@ import BillTypeSelect from "../charts/BillTypeSelect"; import GroupSelect from "../charts/GroupSelect"; import Business_unit from "../charts/Business_unit"; import DatePickerCharts from "../charts/DatePickerCharts"; -import { Line } from "@ant-design/charts"; +import { Line, Pie } from "@ant-design/charts"; import * as comm from "../utils/commons"; import * as config from "../config"; @@ -224,38 +224,50 @@ const Credit_card_bill = () => { return result; }; + //格式化数据，饼图只支持数字模式 + const format_data_for_pie = data => { + let result_arr = []; + if (!comm.empty(data)) { + data.map(item => { + item.cb_usd_number = parseFloat(item.cb_usd.replace(/,/g, "")); + result_arr.push(item); + }); + } + return result_arr; + }; + const credit_card_bills = !comm.empty(credit_card_data.data) ? format_data_detail(credit_card_data.data) : format_data_detail([]); const credit_card_bills_by_type = !comm.empty(credit_card_data.data_by_type) ? format_data(credit_card_data.data_by_type) : format_data([]); - const line_config = { - data: credit_card_bills.dataSource, - padding: "auto", - xField: "cb_datetime", - yField: "cb_usd", - seriesField: "groups", - xAxis: { - type: "timeCat", - }, - point: { - size: 4, - shape: "cicle", + const pie_config = { + appendPadding: 10, + data: [], + angleField: "cb_usd_number", + colorField: "cb_billtype", + radius: 0.8, + label: { + type: "outer", + content: "{name} \n {percentage}", }, - label: {}, //显示标签 - legend: { - itemValue: { - formatter: (text, item) => { - const items = credit_card_bills.dataSource.filter(d => d.groups === item.value); //按站点筛选 - return items.length ? Math.round(items.reduce((a, b) => a + b.cb_usd, 0)) : ""; //计算总数 - }, + tooltip: { + customItems: items => { + let result_arr = []; + items.forEach(item => { + item.value = "$" + item.data.cb_usd + " | ￥" + item.data.cb_rmb; + return result_arr.push(item); + }); + return result_arr; }, }, - // tooltip: { - // customContent: (title, items) => { - // const data = items[0]?.data || {}; - // return `
    ${title}
    ${data.seriesField} ${data.yField}
    `; - // } - // }, - smooth: true, + legend: false, //不显示图例 + interactions: [ + { + type: "element-selected", + }, + { + type: "element-active", + }, + ], }; return ( @@ -269,7 +281,6 @@ const Credit_card_bill = () => { - {/**/} @@ -294,8 +305,11 @@ const Credit_card_bill = () => { - - + + + + + diff --git a/src/views/Dashboard.js b/src/views/Dashboard.js index c2bb78f..c3608fa 100644 --- a/src/views/Dashboard.js +++ b/src/views/Dashboard.js @@ -1,38 +1,39 @@ -import React, {Component} from 'react'; -import {Col, Row} from "antd"; +import React, { Component } from "react"; +import { Col, Row } from "antd"; import OrdersTempTable from "../charts/OrdersTempTable"; import MobileDeal from "../charts/MobileDeal"; import Orders from "../charts/Orders"; +import ExchangeRate from "../charts/ExchangeRate"; class Dashboard extends Component { + constructor(props) { + super(props); + } - constructor(props) { - super(props); - } + render() { + return ( +
    +
    + + + + - render() { + + + + + + - return ( -
    -
    - - - - - - - - - - - - - -
    -
    - ); - } + + + +     +
    +
    + ); + } } export default Dashboard; diff --git a/src/views/Orders.js b/src/views/Orders.js index 058c11c..676634d 100644 --- a/src/views/Orders.js +++ b/src/views/Orders.js @@ -1,8 +1,8 @@ import React, { Component } from "react"; import { Row, Col, Button, Tabs, Table, Divider } from "antd"; -import { ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, SearchOutlined,FullscreenOutlined,DingtalkOutlined } from "@ant-design/icons"; +import { ContainerOutlined, CarryOutOutlined, BlockOutlined, SmileOutlined, TagsOutlined, GlobalOutlined, SearchOutlined, FullscreenOutlined, DingtalkOutlined } from "@ant-design/icons"; import { stores_Context } from "../config"; -import { Line } from "@ant-design/charts"; +import { Line, Pie } from "@ant-design/charts"; import SiteSelect from "../charts/SiteSelect"; import { observer } from "mobx-react"; import DatePickerCharts from "../charts/DatePickerCharts"; @@ -186,6 +186,9 @@ class Orders extends Component { const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : []; const data_source = orders_store.orderCountData ? orders_store.orderCountData : []; const avg_line_y = data_source.length ? Math.round(data_source.reduce((a, b) => a + b.yField, 0) / data_source.length) : 0; //平均值，显示一条平均线 + const pie_data = comm.empty(orders_store.orderCountData_Form) ? [] : orders_store.orderCountData_Form.ordercount1; //饼图的显示 + const pie_data2 = comm.empty(orders_store.orderCountData_Form) ? [] : orders_store.orderCountData_Form.ordercount2; + const config = { data: data_source, padding: "auto", @@ -240,6 +243,26 @@ class Orders extends Component { }, smooth: true, }; + const pie_config = { + appendPadding: 10, + data: [], + angleField: "OrderCount", + colorField: "OrderType", + radius: 0.8, + label: { + type: "outer", + content: "{name} {value} \n {percentage}", + }, + legend: false, //不显示图例 + interactions: [ + { + type: "element-selected", + }, + { + type: "element-active", + }, + ], + }; return (
    @@ -289,6 +312,14 @@ class Orders extends Component { 导出excel + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - @@ -403,8 +474,16 @@ class Orders extends Component { 导出excel + + + + + + + + - @@ -422,6 +501,14 @@ class Orders extends Component { 导出excel + + + + + + + +