巴林闲侠
2 years ago
12 changed files with 493 additions and 15 deletions
@ -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 |
@ -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 |
@ -0,0 +1,15 @@ |
|||||
|
import React from 'react' |
||||
|
import LeftBottom from './left/left-bottom' |
||||
|
import LeftCenter from './left/left-center' |
||||
|
import LeftTop from './left/left-top' |
||||
|
|
||||
|
const Left = () => { |
||||
|
return ( |
||||
|
<div style={{ display: 'flex',flexDirection: 'column', width: "23%", height: "100%", marginLeft: "1%" }}> |
||||
|
<LeftTop /> |
||||
|
<LeftCenter /> |
||||
|
<LeftBottom /> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
export default Left |
@ -0,0 +1,14 @@ |
|||||
|
import React from 'react' |
||||
|
import Module from '../../../public/module' |
||||
|
|
||||
|
const LeftBottom = () => { |
||||
|
const style = { height: "30%", marginTop: "5%" } |
||||
|
return ( |
||||
|
<> |
||||
|
<Module style={style} title={"已绿化里程统计"}> |
||||
|
|
||||
|
</Module> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
export default LeftBottom |
@ -0,0 +1,14 @@ |
|||||
|
import React from 'react' |
||||
|
import Module from '../../../public/module' |
||||
|
|
||||
|
const LeftCenter = () => { |
||||
|
const style = { height: "30%", marginTop: "5%" } |
||||
|
return ( |
||||
|
<> |
||||
|
<Module style={style} title={"可绿化里程统计"}> |
||||
|
|
||||
|
</Module> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
export default LeftCenter |
@ -0,0 +1,14 @@ |
|||||
|
import React from 'react' |
||||
|
import Module from '../../../public/module' |
||||
|
|
||||
|
const LeftTop = () => { |
||||
|
const style = { height: "30%", marginTop: "5%" } |
||||
|
return ( |
||||
|
<> |
||||
|
<Module style={style} title={"道路养护周期统计"}> |
||||
|
|
||||
|
</Module> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
export default LeftTop |
@ -0,0 +1,15 @@ |
|||||
|
import React from 'react' |
||||
|
import RightBottom from './right/right-bottom' |
||||
|
import RightCenter from './right/right-center' |
||||
|
import RightTop from './right/right-top' |
||||
|
|
||||
|
const Right = () => { |
||||
|
return ( |
||||
|
<div style={{ display: 'flex',flexDirection: 'column', width: "23%", height: "100%", marginLeft: "1%", }}> |
||||
|
<RightTop /> |
||||
|
<RightCenter /> |
||||
|
<RightBottom /> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
export default Right |
@ -0,0 +1,14 @@ |
|||||
|
import React from 'react' |
||||
|
import Module from '../../../public/module' |
||||
|
|
||||
|
const RightBottom = () => { |
||||
|
const style = { height: "30%", marginTop: "5%" } |
||||
|
return ( |
||||
|
<> |
||||
|
<Module style={style} title={"养护完成情况"}> |
||||
|
|
||||
|
</Module> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
export default RightBottom |
@ -0,0 +1,14 @@ |
|||||
|
import React from 'react' |
||||
|
import Module from '../../../public/module' |
||||
|
|
||||
|
const RightCenter = () => { |
||||
|
const style = { height: "30%", marginTop: "5%" } |
||||
|
return ( |
||||
|
<> |
||||
|
<Module style={style} title={"各类附属设施数量统计"}> |
||||
|
|
||||
|
</Module> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
export default RightCenter |
@ -0,0 +1,14 @@ |
|||||
|
import React from 'react' |
||||
|
import Module from '../../../public/module' |
||||
|
|
||||
|
const RightTop= () => { |
||||
|
const style = { height: "30%", marginTop: "5%" } |
||||
|
return ( |
||||
|
<> |
||||
|
<Module style={style} title={"道路设施数量统计"}> |
||||
|
|
||||
|
</Module> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
export default RightTop |
Loading…
Reference in new issue