Browse Source

给部分图表增加tooltip

release_0.0.4
dengyinhuan 2 years ago
parent
commit
fd9c6a6516
  1. 2
      web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
  2. 4
      web/client/src/sections/quanju/containers/footer/build/index.js
  3. 12
      web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js

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

@ -190,7 +190,7 @@ legend: {
fontSize: 16,
fontFamily: 'YouSheBiaoTiHei',
color: '#fff',
padding:[0,0,0,15]
padding:[0,0,0,12]
},
}
}

4
web/client/src/sections/quanju/containers/footer/build/index.js

@ -118,7 +118,7 @@ const Build = (props) => {
<Module title={"各种状态公路数量统计"} style={{ width: "100%",
height:" 33%"
}} customize = {true}>
<div className='build-left-top'>
{buildingnumber&&buildingnumber.buildedRoad!==0&&totalgongli!==0?<div className='build-left-top'>
<div className='build-left-top-item'>
<div>
{/* <i>&#9658;</i> */}
@ -136,7 +136,7 @@ const Build = (props) => {
</div>
<div>{buildingnumber?.buildedRoad || 0}</div>
</div>
</div>
</div>:<NoData/>}
</Module>
<Module title={"各乡镇道路分布统计"} style={{ width: "100%",
height:" 33%",marginTop:'3%'

12
web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js

@ -7,6 +7,16 @@ export default function LeftItem({datas}) {
useEffect(() => {
let chartInstance = echarts.init(seasonChartRef.current);
const option = {
tooltip: {
show: true,
trigger: 'item',
position: 'right',
backgroundColor: 'rgba(0,0,0,0.7)',
textStyle: {
color: '#fff',
},
formatter: (values) => ` ${values.name}<b>${datas.processed}个</b>`,
},
title: {
text: `${(datas.processed*100/datas.total).toFixed(2)}%`,
top:'35%',
@ -70,7 +80,7 @@ export default function LeftItem({datas}) {
type: 'bar',
data: [{
name: '已处理',
value: (datas.processed/datas.total).toFixed(2)*100,
value: (datas.processed*100/datas.total).toFixed(2),
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ {

Loading…
Cancel
Save