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, fontSize: 16,
fontFamily: 'YouSheBiaoTiHei', fontFamily: 'YouSheBiaoTiHei',
color: '#fff', 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%", <Module title={"各种状态公路数量统计"} style={{ width: "100%",
height:" 33%" height:" 33%"
}} customize = {true}> }} 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 className='build-left-top-item'>
<div> <div>
{/* <i>&#9658;</i> */} {/* <i>&#9658;</i> */}
@ -136,7 +136,7 @@ const Build = (props) => {
</div> </div>
<div>{buildingnumber?.buildedRoad || 0}</div> <div>{buildingnumber?.buildedRoad || 0}</div>
</div> </div>
</div> </div>:<NoData/>}
</Module> </Module>
<Module title={"各乡镇道路分布统计"} style={{ width: "100%", <Module title={"各乡镇道路分布统计"} style={{ width: "100%",
height:" 33%",marginTop:'3%' 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(() => { useEffect(() => {
let chartInstance = echarts.init(seasonChartRef.current); let chartInstance = echarts.init(seasonChartRef.current);
const option = { 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: { title: {
text: `${(datas.processed*100/datas.total).toFixed(2)}%`, text: `${(datas.processed*100/datas.total).toFixed(2)}%`,
top:'35%', top:'35%',
@ -70,7 +80,7 @@ export default function LeftItem({datas}) {
type: 'bar', type: 'bar',
data: [{ data: [{
name: '已处理', name: '已处理',
value: (datas.processed/datas.total).toFixed(2)*100, value: (datas.processed*100/datas.total).toFixed(2),
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ {

Loading…
Cancel
Save