Browse Source

建设大屏UI

release_0.0.1
dengyinhuan 3 years ago
parent
commit
5e726d932c
  1. 3
      web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
  2. 9
      web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
  3. 12
      web/client/src/sections/quanju/containers/footer/build/style.less

3
web/client/src/sections/quanju/containers/footer/build/Leftbottom.js

@ -80,7 +80,7 @@ function Leftbottom() {
{ {
name: '道路统计', name: '道路统计',
type: 'pie', type: 'pie',
radius: ['50%', '65%'], radius: ['60%', '75%'],
// emphasis: { // 设置高亮时显示标签 // emphasis: { // 设置高亮时显示标签
// label: { // label: {
// show: true // show: true
@ -157,6 +157,7 @@ function Leftbottom() {
return ( return (
<div className='build-left-bottom'> <div className='build-left-bottom'>
<img src='/assets/images/quanju/chart-circle.png'></img>
<div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div> <div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div>
</div> </div>
); );

9
web/client/src/sections/quanju/containers/footer/build/Rightbottom.js

@ -4,7 +4,7 @@ import { Col, Progress, Row } from 'antd';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
// import ReactEcharts from 'echarts-for-react'; // import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
function Leftbottom() { function Rightbottom() {
// const { // const {
// safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height, // safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
// } = props; // } = props;
@ -119,9 +119,9 @@ function Leftbottom() {
], ],
series: [ series: [
{ {
name: '道路统计', name: '公路等级统计',
type: 'pie', type: 'pie',
radius: ['50%', '65%'], radius: ['60%', '75%'],
// emphasis: { // 设置高亮时显示标签 // emphasis: { // 设置高亮时显示标签
// label: { // label: {
// show: true // show: true
@ -198,8 +198,9 @@ function Leftbottom() {
return ( return (
<div className='build-right-bottom'> <div className='build-right-bottom'>
<img src='/assets/images/quanju/chart-circle.png'></img>
<div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div> <div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div>
</div> </div>
); );
} }
export default Leftbottom export default Rightbottom

12
web/client/src/sections/quanju/containers/footer/build/style.less

@ -159,6 +159,12 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative;
img{
position: absolute;
left: 38%;
top:26%
}
} }
} }
@ -226,6 +232,12 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative;
img{
position: absolute;
left: 38%;
top:26%
}
} }
} }
} }

Loading…
Cancel
Save