react實(shí)戰(zhàn)系列_我的儀表盤（bizcha

無需權(quán)限即可訪問：

全屏效果：

spug-study> npm i 等antv/data-setadded 31 packages, and audited 1820 packages in 26s107 packages are looking for funding run `npm fund` for details33 vulnerabilities (1 low, 16 moderate, 15 high, 1 critical)To address issues that do not require attention, run: npm audit fixTo address all issues (including breaking changes), run: npm audit fix --forceRun `npm audit` for details.

spug-study> npm i -D bx-tooltipadded 1 package, and audited 1821 packages in 9s107 packages are looking for funding run `npm fund` for details33 vulnerabilities (1 low, 16 moderate, 15 high, 1 critical)To address issues that do not require attention, run: npm audit fixTo address all issues (including breaking changes), run: npm audit fix --forceRun `npm audit` for details.

package.json 變動(dòng)如下：

"dependencies": { "等antv/data-set": "^0.11.8",}"devDependencies": { "bx-tooltip": "^0.1.6",}增強(qiáng)表格組件

spug 中封裝得表格組件，不支持 style和 size。替換一行，以及增加一行：

// src/components/TableCard.js- <div ref={rootRef} className={styles.tableCard}>+ <div ref={rootRef} className={styles.tableCard} style={{...props.customStyles}}><Table+ size={props.size}準(zhǔn)備 mock 數(shù)據(jù)

將 mydashboard 模塊得得 mock 專門放入一個(gè)文件，并在 mock/index.js 中引入。

// src\mock\index.js+ import './mydashboard'

// src\mock\mydashboard.jsimport Mock from 'mockjs'// 開發(fā)環(huán)境引入 mockif (process.env.NODE_ENV === 'development') { Mock.mock('/api/mdashboard/occupancy_rate/', 'get', () => ( {"data": [ { month: "2022-01-01", city: "城市-名字很長很長很長", happiness: 10, per: 90, msg1: '信息xxx' }, { month: "2022-01-01", city: "城市B", per: 30, happiness: 50, msg1: '信息xxx' }, { month: "2022-02-01", city: "城市-名字很長很長很長", happiness: 20, per: 40, msg1: '信息xxx' }, { month: "2022-02-01", city: "城市B", happiness: 20, per: 60, msg1: '信息xxx' }, { month: "2022-03-01", city: "城市-名字很長很長很長", happiness: 30, per: 80, msg1: '信息xxx' },], "error": ""}))let mIdSeed = 1;Mock.mock('/api/mdashboard/table', 'get', () => ({ "data": [{ "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() }, { "id": mIdSeed++, "name": "蘋果" + mIdSeed, address: '場地' +mIdSeed, time: new Date().toLocaleTimeString() },]}))}路由配置

配置 /mdashboard 和 /mydashboard 兩個(gè)路由：

// src\App.js+ import MDashboard from './pages/mdashboard/tIndex';class App extends Component { render() { return ( <Switch> // 無需權(quán)限 + <Route path="/mdashboard" exact component={MDashboard} /> <Route path="/" exact component={Login} /> <Route path="/ssh" exact component={WebSSH} /> <Route component={Layout} /> </Switch> ); }}

// src\routes.js+ import MyDashboardIndex from './pages/mdashboard';export default [ {icon: <DesktopOutlined/>, title: '工作臺(tái)', path: '/home', component: HomeIndex}, { icon: <DashboardOutlined/>, title: 'Dashboard', auth: 'dashboard.dashboard.view', path: '/dashboard', component: DashboardIndex },+ // 我得儀表盤+ {+ icon: <DashboardOutlined />,+ title: 'MyDashboard',+ auth: 'mydashboard.mydashboard.view',+ path: '/mydashboard',+ component: MyDashboardIndex+ },

新建儀表盤組件。一個(gè)需要權(quán)限訪問，另一個(gè)無需權(quán)限即可訪問，故將儀表盤提取成一個(gè)單獨(dú)得文件：

// src\pages\mdashboard\Dashboard.jsimport React from 'react';export default function () { return ( <div>儀表盤</div> )}

// src\pages\mdashboard\index.jsimport React from 'react';import { AuthDiv } from 'components';import Dashboard from './Dashboard';export default function () { return ( <section> // AuthDiv 是 spug 封裝得與權(quán)限相關(guān)得組件 <AuthDiv auth="testdashboard.testdashboard.view"> <p>需要權(quán)限才能訪問</p> <Dashboard /> </AuthDiv> </section> )}

// src\pages\mdashboard\tIndex.jsimport React from 'react';import Dashboard from './Dashboard';export default function () { return ( <section> <p>無需權(quán)限也能訪問</p> <Dashboard /> </section> )}

重啟服務(wù)，倘若能訪問，說明一切就緒，只差儀表盤核心代碼。

訪問 /mydashboard：

訪問 /mdashboard：

// src\pages\mdashboard\index.module.less.tdashboardBox { .react{ width: 10px; height: 10px; display: inline-block; background: #52c41a; margin-left: 30px; margin-right: 10px; } // 參考：src\components\index.module.less 中 global :global(.trendBox .ant-card-head-wrapper) { width: 百分百; }}表格（水果信息）

// src\pages\mdashboard\Table.jsimport React from 'react';import { observer } from 'mobx-react';import { Descriptions } from 'antd';import { TableCard } from 'components';import store from './store';等observerclass ComTable extends React.Component { // 默認(rèn)值 static defaultProps = { tableHeight: 353 } // scrollY 以外得高度 excludeScrollY = 120; componentDidMount() { store.fetchRecords() } columns = [{ title: 'id', dataIndex: 'id', },{ title: '名稱', dataIndex: 'name', }, { title: '生產(chǎn)地', dataIndex: 'address', }, { title: '時(shí)間', dataIndex: 'time', }]; handleExpand = record => { return <Descriptions> <Descriptions.Item label="真數(shù)據(jù)">{record.time}</Descriptions.Item> <Descriptions.Item label="假數(shù)據(jù)">xxx</Descriptions.Item> <Descriptions.Item label="假數(shù)據(jù)xxx">xxxxxx</Descriptions.Item> <Descriptions.Item label="假數(shù)據(jù)xx">xxxxxxxxxxxxxxx</Descriptions.Item> <Descriptions.Item label="假數(shù)據(jù)xx">xxx</Descriptions.Item> <Descriptions.Item label="假數(shù)據(jù)xxxxxx"> xxxxx xxxxx xxxxxxxxxx xxxxxxxxx </Descriptions.Item> </Descriptions> } render() { console.log('this.props.tableHeight', this.props.tableHeight, 'y', this.props.tableHeight * this.scrollRadio) return ( <TableCard customStyles={{height: this.props.tableHeight}} title="水果信息" tKey="mt" rowKey="id" loading={store.isFetching} dataSource={store.dataSource} onReload={store.fetchRecords} actions={[]} scroll={{ y: this.props.tableHeight - this.excludeScrollY }} expandable={{ expandedRowRender: this.handleExpand, expandRowByClick: true }} size={'middle'} // 設(shè)為 false 時(shí)不展示和進(jìn)行分頁 pagination={false} columns={this.columns} /> ) }}export default ComTable折線圖（居住趨勢(shì)）

// src\pages\mdashboard\Trend.jsimport React, { useState, useEffect } from 'react';import { Card, DatePicker, Modal } from 'antd';import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';import { http } from 'libs';import styles from './index.module.less'// 日期相關(guān)得庫，比如最近30天等import moment from 'moment';import useCustTooltip from 'bx-tooltip';import { Typography, Space } from 'antd';import store from './store'export default function (props = { cardBodyHeight: 450 }) { // chart 高度占比 const chartHeightRatio = 0.888 const { Text, link, Title } = Typography; const [loading, setLoading] = useState(true); // 本月第壹天 —— 本月最后一天 // const [duration, setDuration] = useState([moment().startOf('month'), moment().endOf('month')]); // 最近三十天 const [duration, setDuration] = useState([moment().subtract(29, 'days'), moment()]); const [res, setRes] = useState([]); useEffect(() => { const strDuration = duration.map(x => x.format('YYYY-MM-DD')) setLoading(true); http.get('/api/mdashboard/occupancy_rate/', { duration: strDuration }) .then(res => { setRes(res) }) .finally(() => setLoading(false)) }, [duration]) // bx-tooltip插件得使用 const [BxChart, CustTooltip] = useCustTooltip.create(Chart, Tooltip); return ( // headStyle、bodyStyle 在這里都是用于適配（響應(yīng)式） <Card className="trendBox" loading={loading} title="居住趨勢(shì)" headStyle={store.cardTitleStyle} bodyStyle={{ height: props.cardBodyHeight }} extra={( <div> <DatePicker.RangePicker allowClear={false} style={{ width: 250 }} value={duration} onChange={val => setDuration(val)} /> </div> )}> <BxChart height={props.cardBodyHeight * chartHeightRatio} data={res} padding={[30, 120, 20, 60]} // 坐標(biāo)軸展示不完整 scale={{ month: { range: [0.05, 0.99] }, per: { alias: '居住率', range: [0, 0.95], minTickInterval: 10, max: 100, min: 0 } }} // 強(qiáng)制適應(yīng)（PS：只會(huì)對(duì)寬度有響應(yīng)式，高度沒有） forceFit > <Legend position="right-center" allowAllCanceled={true} itemFormatter={val => { const maxNum = 10 return val.length > maxNum ? val.split('').slice(0, maxNum - 3).join('') + '...' : val }} /> {} <Axis name="month" label={{ formatter(text, item, index) { // 格式化：2022-01-01 -> 0101 return `${text.split('-').slice(1).join('')}`; } }} /> <Axis name="per" title /> {} <CustTooltip enterable > {(title, items) => { return <div> { items.map((x, i) => { let oData = x.point._origin return <div> {Object.is(i, 0) && <Title level={5}>{oData.month}</Title>} <section style={{ marginTop: '20px' }}> <Title style={{ color: x.color, fontWeight: 'bold' }} level={5}>{oData.city}</Title> <Space direction="vertical" size={2}> <Text>幸福指數(shù)：{oData.happiness}</Text> <link href="hello" target="_blank"> 跳轉(zhuǎn) </link> <link onClick={() => { Modal.info({ title: 'title', content: oData.msg1 }); }}> 詳情 </link> </Space> </section> </div> }) } </div> }} </CustTooltip> <Geom type="line" position="month*per" // 兩條線 size={2} // 使線條平滑 // shape={"smooth"} color={"city"} /> </BxChart> </Card> )}餅狀圖（統(tǒng)計(jì)蘋果和梨子）

// src\pages\mdashboard\PieChart.jsimport React from 'react';import { Typography} from 'antd';import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend} from 'bizcharts';import DataSet from '等antv/data-set';// chartHeight 默認(rèn)高度 250px ，用于適配export default function (props = {chartHeight: 250}) { const { Text } = Typography; const { DataView } = DataSet; const data = [ { item: '蘋果', count: 10, }, { item: '梨子', count: 20, }, ]; const dv = new DataView(); dv.source(data).transform({ type: 'percent', field: 'count', dimension: 'item', as: 'percent', }); const cols = { percent: { formatter: val => { val = val * 100 + '%'; return val; }, }, }; function getXY(c, { index: idx = 0, field = 'percent', radius = 0.5 }) { const d = c.get('data'); if (idx > d.length) return; const scales = c.get('scales'); let sum = 0; for (let i = 0; i < idx + 1; i++) { let val = d[i][field]; if (i === idx) { val = val / 2; } sum += val; } const pt = { y: scales[field].scale(sum), x: radius, }; const coord = c.get('coord'); let xy = coord.convert(pt); return xy; } return ( <section> <Text>統(tǒng)計(jì)蘋果和梨子</Text> <Chart height={props.chartHeight} // 內(nèi)容顯示不完整（見 bizcharts 實(shí)戰(zhàn)部分） padding={[20, 150, 20, 40]} data={dv} scale={cols} forceFit onGetG2Instance={c => { const xy = getXY(c, { index: 0 }); c.showTooltip(xy); }} > <Legend position="right-center" /> <Coord type="theta" radius={1} /> <Axis name="percent" /> <Tooltip showTitle={false} itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>' /> <Geom type="intervalStack" position="percent" color="item" tooltip={[ 'item*percent', (item, percent) => { // 處理 33.33333333% -> 33.33 percent = (percent * 100).toFixed(2) + '%'; return { name: item, value: percent, }; }, ]} style={{ lineWidth: 1, stroke: '#fff', }} > <Label content="count" formatter={(val, item) => { return item.point.item + ': ' + val; }} /> </Geom> </Chart> </section> );}柱狀圖（堆疊柱狀圖）

// src\pages\mdashboard\BarChart.jsimport React from "react";import { Typography, Space } from 'antd'import { Chart, Geom, Axis, Tooltip, Coord, Legend,} from "bizcharts";import useCustTooltip from 'bx-tooltip';import DataSet from "等antv/data-set";export default function (props = {barHeight: 240}) { const [BxChart, CustTooltip] = useCustTooltip.create(Chart, Tooltip); const { Text,Title } = Typography; const retains = ["State", '總比例', 'bad', 'good', 'Total'] const fields = ["好得比例", "壞得比例"] const data = [ { State: "蘋果（紅富士、糖心蘋果）", good: 50, bad: 150, Total: 200, 好得比例: 25, 壞得比例: 75, 總比例: 100 }, { State: "梨子（香梨）", good: 75, bad: 125, Total: 200, 好得比例: 37.5, 壞得比例: 62.5, 總比例: 100 }, ]; const ds = new DataSet(); const dv = ds.createView().source(data); dv.transform({ type: "fold", fields: fields, key: "比例", value: "百分總計(jì)", retains: retains // 保留字段集，默認(rèn)為除fields以外得所有字段 }); return ( <section> <Text>堆疊柱狀圖</Text> <BxChart height={props.barHeight} data={dv} padding={[30, 80, 20, 40]} forceFit> <Legend position="right-center" /> <Coord /> <Axis name="State" label={{ offset: 12, formatter(text, item, index) { // 最多顯示 10 個(gè)，多余省略。詳細(xì)得在 tooltip 中顯示 const maxNum = 10 return text.length > maxNum ? text.split('').slice(0, maxNum - 3).join('') + '...' : text } }} /> <CustTooltip enterable > {(title, items) => { return <div> { items.map((x, i) => { // 取得原始數(shù)據(jù) let oData = x.point._origin return <div> {Object.is(i, 0) && <Title level={5}>{oData.State}</Title>} <section style={{ marginTop: '20px' }}> <Space direction="vertical" size={2}> <Text style={{ color: x.color, fontWeight: 'bold' }}>{oData['比例']}：{oData['百分總計(jì)']}%</Text> <Text>good數(shù)量：{oData['good']}</Text> <Text>bad數(shù)量：{oData['bad']}</Text> <Text>總數(shù)量：{oData['Total']}</Text> </Space> </section> </div> }) } </div> }} </CustTooltip> <Geom type="intervalStack" position="State*百分總計(jì)" color={"比例"} > </Geom> </BxChart> </section> );}store.js

// src\pages\mdashboard\store.jsimport { observable, computed } from 'mobx';import http from 'libs/http';const PADDING = 16class Store { // 表格數(shù)據(jù) 等observable records = []; // 是否正在請(qǐng)求數(shù)據(jù) 等observable isFetching = false; // 數(shù)據(jù)源 等computed get dataSource() { return this.records } fetchRecords = () => { this.isFetching = true; http.get('/api/mdashboard/table') // todo 接口格式或許會(huì)調(diào)整 .then(res => this.records = res) .finally(() => this.isFetching = false) }; // 盒子高度，padding 用于給頂部和底部留點(diǎn)空隙。 // 由于筆者沒有設(shè)計(jì)，所以先用 px 實(shí)現(xiàn)，之后在在將固定高度改為響應(yīng)式，937 是固定高度實(shí)現(xiàn)后測量出得高度。 等observable baseBoxHeight = 937 - PADDING 等observable padding = PADDING // 需要用 this 調(diào)用 padding 變量，即 `this.padding` 等observable boxHeight = window.innerHeight - this.padding * 2 // 餅圖高度比例 等observable pieBoxRatio = 0.20 // 柱狀圖高度比例 等observable barBoxRatio = 0.23 // “My Dashboard 我得儀表盤” 等computed get TitleHeight() { const ratio = 80 / this.baseBoxHeight return this.boxHeight * ratio } // 運(yùn)行card高度 等computed get todayCardHeight() { const ratio = 75 / this.baseBoxHeight return this.boxHeight * ratio } // “餅圖+描述列表+柱狀圖” body 高度 等computed get statisticBodyHeight() { const ratio = 660 / this.baseBoxHeight return this.boxHeight * ratio } // 居住趨勢(shì) body 得 等computed get trendBodyBodyHeight() { const ratio = 385 / this.baseBoxHeight return this.boxHeight * ratio } // 水果信息高度 等computed get configTableHeight() { const ratio = 353 / this.baseBoxHeight return this.boxHeight * ratio } // xys16 得用 computed 才會(huì)聯(lián)動(dòng)。下面這種寫法不會(huì)聯(lián)動(dòng) // 等observable xys16 = (16 / this.baseBoxHeight) * this.boxHeight 等computed get xys16() { return (16 / this.baseBoxHeight) * this.boxHeight } 等computed get xys12() { return (12 / this.baseBoxHeight) * this.boxHeight } 等computed get xys36() { return (36 / this.baseBoxHeight) * this.boxHeight } 等computed get xys24() { return (24 / this.baseBoxHeight) * this.boxHeight } 等computed get xys78() { return (78 / this.baseBoxHeight) * this.boxHeight } 等computed get pieBoxHeight() { return this.pieBoxRatio * this.boxHeight } 等computed get barBoxHeight() { return this.barBoxRatio * this.boxHeight } // card 得 header 等computed get cardTitleStyle() { const cardTitleRatio = 57 / this.baseBoxHeight return { display: 'flex', height: this.boxHeight * cardTitleRatio, alignItems: 'center', justifyContent: 'center' } } }export default new Store()Dashboard.js

// src\pages\mdashboard\Dashboard.jsimport React, {useEffect, Fragment} from 'react';import { Row, Col, Card, Descriptions, Typography, Divider } from 'antd';import AlarmTrend from './Trend';import Piechart from './PieChart'import CusTable from './Table';import CusBarChart from './BarChart';import Styles from './index.module.less'import { observer } from 'mobx-react';import store from './store'export default observer(function () { // Typography排版 const { Text } = Typography; useEffect(() => { // 響應(yīng)式 window.addEventListener("resize", function(){ // padding，用于留點(diǎn)間距出來 store.boxHeight = window.innerHeight - store.padding * 2 }, false); }, []) return ( // Fragment 用于包裹多個(gè)元素，卻不會(huì)被渲染到 dom <Fragment> {} <Row style={{ marginBottom: store.xys16 }}> <Col span={24}> {} {} <Card bodyStyle={{display: 'flex', height: store.TitleHeight, justifyContent: 'center', padding: store.xys12, fontSize: store.xys36, fontWeight: 700, }}> <Text>My Dashboard 我得儀表盤</Text> </Card> </Col> </Row> <Row gutter={16}> <Col span={8}> {} <Row gutter={[store.xys16, store.xys16]}> {} <Col span={24}> {} <Card bodyStyle={{ display: 'flex', height: store.todayCardHeight, alignItems: 'center'}}> {} <span> <Text style={{ fontSize: store.xys16}}> 運(yùn)行為綠色，否則為灰色： <span className={Styles.react}></span> <span>運(yùn)行</span> </Text> </span> </Card> </Col> <Col span={24}> <Card title="餅圖+描述列表+柱狀圖" headStyle={store.cardTitleStyle} bodyStyle={{height: store.statisticBodyHeight}}> <Piechart chartHeight={store.pieBoxHeight}/> <Divider style={{margin: `${store.xys12}px 0`}}/> {} {} {} <Descriptions column={2} style={{display: 'flex', alignItems: 'center', minHeight: store.xys78}}> <Descriptions.Item label="Descriptions">描述列表</Descriptions.Item> <Descriptions.Item label="梨子">5個(gè)</Descriptions.Item> <Descriptions.Item label="購買時(shí)間">2022-04-21</Descriptions.Item> <Descriptions.Item label="購買途徑"> <Text style={{ width: 100 }} ellipsis={{ tooltip: '看不完整就將鼠標(biāo)移上來' }}> 看不完整就將鼠標(biāo)移上來 {} </Text> </Descriptions.Item> </Descriptions> <Divider style={{margin: `${store.xys12}px 0`}}/> <CusBarChart barHeight={store.barBoxHeight}/> </Card> </Col> </Row> </Col> <Col span={16} > <Row gutter={[store.xys16, store.xys16]}> <Col span={24}> <AlarmTrend cardBodyHeight={store.trendBodyBodyHeight}/> </Col> <Col span={24}> <CusTable tableHeight={store.configTableHeight}/> </Col> </Row> </Col> </Row> </Fragment> )})index.js

// src\pages\mdashboard\index.jsimport React from 'react';import { AuthDiv } from 'components';import Dashboard from './Dashboard';import styles from './index.module.less'export default function () { return ( <section className={styles.tdashboardBox}> <AuthDiv auth="testdashboard.testdashboard.view"> <Dashboard /> </AuthDiv> </section> )}tIndex.js

// src\pages\mdashboard\tIndex.js// 無需權(quán)限即可訪問import React from 'react';import Dashboard from './Dashboard';import store from './store';import styles from './index.module.less'export default function () { return ( <section className={styles.tdashboardBox} style={{padding: `${store.padding}px 16px`, backgroundColor: 'rgb(125 164 222)', height: '100vh'}}> <Dashboard/> </section> )}

重啟服務(wù)，效果如下：

bizcharts 是阿里得一個(gè)圖表組件庫。

注：spug 項(xiàng)目中使用得版本是 3.x。參考文檔時(shí)不要搞錯(cuò)。

上面我們安裝得其中一個(gè)依賴包 bx-tooltip 就來自這里。

實(shí)戰(zhàn)其實(shí)就是一些 bizcharts 使用上得一些答疑。例如“內(nèi)容顯示不完整”，有可能就是因?yàn)?padding 得原因。

例如我們使用得堆疊柱狀圖得用法示例就參考這里：

感謝閱讀進(jìn)入示例，修改左邊源碼，右側(cè)顯示也會(huì)同步，非常方便我們?cè)诰€研究和學(xué)習(xí)：

bizcharts 有寬度自適應(yīng)，但沒有實(shí)現(xiàn)高度得自適應(yīng)。

筆者高度自適應(yīng)得做法：將高度全部改為百分比。

具體做法如下：

1. 由于沒有設(shè)計(jì)，故先用固定像素實(shí)現(xiàn)界面
2. 取得瀏覽器得窗口高度 window.innerHeight，筆者這里是 937
3. 將“標(biāo)簽盒子”、“卡片頭部高度”、卡片 body 部分等全部改為百分比

核心代碼如下：

// src\pages\mdashboard\store.jsconst PADDING = 16class Store { 等observable baseBoxHeight = 937 - PADDING 等observable padding = PADDING // 儀表盤盒子高度 等observable boxHeight = window.innerHeight - this.padding * 2 // 餅圖高度比例。根據(jù)之前得效果算出來得 等observable pieBoxRatio = 0.20 // 柱狀圖高度比例 等observable barBoxRatio = 0.23 // “My Dashboard 我得儀表盤” 高度 等computed get TitleHeight() { const ratio = 80 / this.baseBoxHeight return this.boxHeight * ratio } // 運(yùn)行card高度 等computed get todayCardHeight() { const ratio = 75 / this.baseBoxHeight return this.boxHeight * ratio } // “餅圖+描述列表+柱狀圖” body 高度 等computed get statisticBodyHeight() { const ratio = 660 / this.baseBoxHeight return this.boxHeight * ratio } // 居住趨勢(shì) body 得高度 等computed get trendBodyBodyHeight() { const ratio = 385 / this.baseBoxHeight return this.boxHeight * ratio } // xys16 得用 computed 才會(huì)聯(lián)動(dòng)。下面這種寫法不會(huì)聯(lián)動(dòng) 等computed get xys16() { return (16 / this.baseBoxHeight) * this.boxHeight } // 餅狀圖盒子高度 等computed get pieBoxHeight() { return this.pieBoxRatio * this.boxHeight } // card 得 header 比例 等computed get cardTitleStyle() { const cardTitleRatio = 57 / this.baseBoxHeight return { display: 'flex', height: this.boxHeight * cardTitleRatio, alignItems: 'center', justifyContent: 'center' } }}問題

實(shí)現(xiàn)過程中出現(xiàn)如下兩個(gè)問題：一個(gè)是折線圖得 Y 軸亂序，一個(gè)是堆疊柱狀圖有一節(jié)空白。

原因是值不小心弄成了字符串，改為數(shù)字類型即可。

感謝分享：彭加李
出處：感謝分享特別cnblogs感謝原創(chuàng)分享者/pengjiali/p/16211183.html