dengyinhuan
2 years ago
4 changed files with 379 additions and 15 deletions
@ -1,7 +1,164 @@ |
|||
import React from 'react' |
|||
|
|||
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 ( |
|||
<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' |
|||
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 ( |
|||
<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 |
|||
Loading…
Reference in new issue