free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

建设部分大屏部分左右下角图表

release_0.0.1
dengyinhuan 2 years ago
parent
d7b6926a80
commit
41d9b2dd5e
4 changed files with 379 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 165
      web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
  2. 206
      web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
  3. 11
      web/client/src/sections/quanju/containers/footer/build/index.js
  4. 12
      web/client/src/sections/quanju/containers/footer/build/style.less

165
web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
View File

@ -1,7 +1,164 @@
import React from 'react'
import './style.less' import './style.less'
export default function Leftbottom() { import { Col, Progress, Row } from 'antd';
import React, { useEffect, useRef } from 'react';
// import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
function Leftbottom() {
// const {
// safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
// } = props;
const chartRef = useRef(null);
const safetyData = [
{name: '县道', value: 72},
{name: '乡道', value: 17},
{name: '村道', value: 4},
]
const chartTitle = '道路总公里';
const title = '基础设施安全监测版块';
// const number = 2738;
// const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']
const rightLegend = ['县道', '乡道', '村道']
const legendColor = undefined;
const width = undefined
const height = undefined
var titleNum = 15
let safetyOption = {
tooltip: {
show: true,
trigger: 'item',
position: 'right',
backgroundColor: 'rgba(0,0,0,0.7)',
textStyle: {
color: '#fff',
},
formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name} <b>${values.value}</b>个(${values.percent}%)`,
},
title: {
text:titleNum,//主标题文本
left:'center',
top:'35%',
subtext:chartTitle,//副标题文本
textStyle:{
fontFamily : "YouSheBiaoTiHei",
fontSize: 20,
color:'#FFFFFF',
// align:'center'
},
subtextStyle:{
fontFamily : "PingFangSC-Medium PingFang SC",
fontSize: 12,
fontWeight:500,
color:'#E9F7FF',
}
},
legend: [
{
orient: 'vertical',
textStyle: {
color: '#DDEFFF',
fontFamily: 'SourceHanSansCN-Regular',
fontSize: 12,
},
right: 0,
top: 'center',
align: 'left',
itemWidth: 10,
itemHeight: 10,
data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
formatter: (name) => {
for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
if (name === safetyOption.series[0].data[i].name) {
return `${name} \t ${safetyOption.series[0].data[i].value}`;
}
}
},
},
],
series: [
{
name: '道路统计',
type: 'pie',
radius: ['50%', '65%'],
// emphasis: { // 设置高亮时显示标签
// label: {
// show: true
// },
// // scale: true, // 设置高亮时放大图形
// // scaleSize: 20
// },
label: {
show: false,
},
// selectedMode: 'single',
data: safetyData,
itemStyle: {
normal: {
color: (color) => {
const colorList = legendColor || [
'#98D8CA',
'#9494FF',
'#2A43FF',
'#FFD39F',
'#9D5F8B',
'#ADDE81',
'#F8EBA2',
'#5F8EFD',
'#2BB4D3',
'#1488C8',
];
return colorList[color.dataIndex];
},
},
},
},
],
};
let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
useEffect(() => {
let myChart = echarts.init(chartRef.current);
const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
for(var idx in safetyOption.series[0].data)
// 遍历饼图数据，取消所有图形的高亮效果
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: idx
});
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex,
});
}
const selectPie=() =>{ // 高亮效果切换到下一个图形
var dataLen = safetyOption.series[0].data.length;
currentIndex = (currentIndex + 1) % dataLen;
highlightPie();
}
let changePieInterval = setInterval(selectPie, 1000);
myChart.onChartReady = (instance) => {
chartRef.current.safetyChart = instance;
}
myChart.setOption(safetyOption);
return ()=>{
clearInterval(changePieInterval)
}
}, []);
return ( return (
<div className='build-left-bottom'>Leftbottom</div> <div className='build-left-bottom'>
) <div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div>
</div>
);
} }
export default Leftbottom

206
web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
View File

@ -1,7 +1,205 @@
import React from 'react'
import './style.less' import './style.less'
export default function Rightbottom() { import { Col, Progress, Row } from 'antd';
import React, { useEffect, useRef } from 'react';
// import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
function Leftbottom() {
// const {
// safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
// } = props;
const chartRef = useRef(null);
const safetyData = [
{name: '一级公路', value: 42},
{name: '二级公路', value: 17},
{name: '三级公路', value: 17},
{name: '四级公路', value: 30},
{name: '等外公路', value: 30},
]
const chartTitle = '道路总公里';
const title = '基础设施安全监测版块';
// const number = 2738;
// const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']
const rightLegend = ['一级公路', '二级公路', '三级公路','四级公路','等外公路']
const legendColor = undefined;
const width = undefined
const height = undefined
var titleNum = 15
let safetyOption = {
tooltip: {
show: true,
trigger: 'item',
position: 'right',
backgroundColor: 'rgba(0,0,0,0.7)',
textStyle: {
color: '#fff',
},
formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name} <b>${values.value}</b>个(${values.percent}%)`,
},
title: {
text:titleNum,//主标题文本
left:'center',
top:'35%',
subtext:chartTitle,//副标题文本
textStyle:{
fontFamily : "YouSheBiaoTiHei",
fontSize: 20,
color:'#FFFFFF',
// align:'center'
},
subtextStyle:{
fontFamily : "PingFangSC-Medium PingFang SC",
fontSize: 12,
fontWeight:500,
color:'#E9F7FF',
}
},
// graphic: {
// elements: [
// {
// type: 'text',
// style: {
// text: chartTitle || '安全\n监测',
// align: 'center',
// fill: '#fff',
// z: -999,
// zlevel: -999,
// font: '20px "YouSheBiaoTiHei", sans-serif',
// },
// left: 'center',
// top: 'center',
// position: [100, 100],
// },
// ],
// },
legend: [
// {
// orient: 'vertical',
// left: 'left',
// top: 'center',
// textStyle: {
// color: '#DDEFFF',
// fontFamily: 'SourceHanSansCN-Regular',
// fontSize: 12,
// },
// itemWidth: 10,
// itemHeight: 10,
// data: leftLegend || ['基坑', '桥梁', '地铁', '边坡', '建筑物'],
// formatter: (name) => {
// for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
// if (name === safetyOption.series[0].data[i].name) {
// return `${name} \t ${safetyOption.series[0].data[i].value}`;
// }
// }
// },
// },
{
orient: 'vertical',
textStyle: {
color: '#DDEFFF',
fontFamily: 'SourceHanSansCN-Regular',
fontSize: 12,
},
right: 0,
top: 'center',
align: 'left',
itemWidth: 10,
itemHeight: 10,
data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
formatter: (name) => {
for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
if (name === safetyOption.series[0].data[i].name) {
return `${name} \t ${safetyOption.series[0].data[i].value}`;
}
}
},
},
],
series: [
{
name: '道路统计',
type: 'pie',
radius: ['50%', '65%'],
// emphasis: { // 设置高亮时显示标签
// label: {
// show: true
// },
// // scale: true, // 设置高亮时放大图形
// // scaleSize: 20
// },
label: {
show: false,
},
// selectedMode: 'single',
data: safetyData,
itemStyle: {
normal: {
color: (color) => {
const colorList = legendColor || [
'#98D8CA',
'#9494FF',
'#2A43FF',
'#FFD39F',
'#9D5F8B',
'#ADDE81',
'#F8EBA2',
'#5F8EFD',
'#2BB4D3',
'#1488C8',
];
return colorList[color.dataIndex];
},
},
},
},
],
};
let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
useEffect(() => {
let myChart = echarts.init(chartRef.current);
const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
for(var idx in safetyOption.series[0].data)
// 遍历饼图数据，取消所有图形的高亮效果
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: idx
});
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex,
});
}
const selectPie=() =>{ // 高亮效果切换到下一个图形
var dataLen = safetyOption.series[0].data.length;
currentIndex = (currentIndex + 1) % dataLen;
highlightPie();
}
let changePieInterval = setInterval(selectPie, 1000);
myChart.onChartReady = (instance) => {
chartRef.current.safetyChart = instance;
}
myChart.setOption(safetyOption);
return ()=>{
clearInterval(changePieInterval)
}
}, []);
return ( return (
<div className='build-right-bottom'>Rightbottom</div> <div className='build-right-bottom'>
) <div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div>
</div>
);
} }
export default Leftbottom

11
web/client/src/sections/quanju/containers/footer/build/index.js
View File

@ -1,12 +1,13 @@
import React from 'react' import React from 'react'
// import LeftTop from './Lefttop' // import LeftTop from './Lefttop'
// import LeftCenter from './Leftcenter' // import LeftCenter from './Leftcenter'
// import LeftBottom from './Leftbottom' import LeftBottom from './Leftbottom'
// import RightTop from './Righttop' // import RightTop from './Righttop'
// import Rightcenter from './Rightcenter' // import Rightcenter from './Rightcenter'
// import Rightbottom from './Rightbottom' // import Rightbottom from './Rightbottom'
import { Carousel } from 'antd' import { Carousel } from 'antd'
import Module from '../../public/module' import Module from '../../public/module'
import RightBottom from './Rightbottom'
import './style.less' import './style.less'
const Build = () => { const Build = () => {
return ( return (
@ -98,7 +99,9 @@ const Build = () => {
</Module> </Module>
<Module title={"道路统计"} style={{ width: "100%", <Module title={"道路统计"} style={{ width: "100%",
height:" 30%",marginTop:'3%' height:" 30%",marginTop:'3%'
}}></Module> }}>
<LeftBottom/>
</Module>
</div> </div>
<div className='bgbuild-right'> <div className='bgbuild-right'>
@ -115,7 +118,9 @@ const Build = () => {
}}></Module> }}></Module>
<Module title={"公路等级统计"} style={{ width: "100%", <Module title={"公路等级统计"} style={{ width: "100%",
height:" 30%",marginTop:'3%' height:" 30%",marginTop:'3%'
}}></Module> }}>
<RightBottom/>
</Module>
</div> </div>
</div> </div>
) )

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

@ -155,8 +155,10 @@
} }
.build-left-bottom{ .build-left-bottom{
width: 100%; width: 100%;
height: 30%; height: 100%;
background-color: rgba(0,33,98,0.8); display: flex;
justify-content: center;
align-items: center;
} }
} }
@ -199,8 +201,10 @@
} }
.build-right-bottom{ .build-right-bottom{
width: 100%; width: 100%;
height: 30%; height: 100%;
background-color: pink; display: flex;
justify-content: center;
align-items: center;
} }
} }
} }

Write Preview
Loading…
Cancel
Save