// 上一篇文章介紹了如何實(shí)現(xiàn)有背景的柱狀圖，現(xiàn)在又遇到一個問題，鼠標(biāo)滑過柱子，提示信息是背景柱子的值，解決方案，自定義tooltip的formatter，上代碼tooltip: {//鼠標(biāo)懸浮提示數(shù)據(jù)formatter: function (param) {// param.seriesIndex 會告訴你是第一個柱狀圖，用這個來判斷你要顯示的數(shù)值let str = ''if (param.seriesIndex === 1) {str = `<div>${param.name}: ${param.value} 輛</div>`}return str},backgroundColor: 'rgba(0,123,177,0.2)',borderColor: "#030C31",textStyle: {color: '#ffffff',}},//完整代碼import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'const CarAgeEcharts = (props) => {const chartRef = useRef()console.log(props)useEffect(() => {console.log(props)var salvProName = [];var salvProValue = [];if (props?.info?.length) {salvProName = props?.info[0];salvProValue = props?.info[1];}var salvProMax = [];//背景按最大值let bigNum = 0// props?.info[1].map((res)=>{// })bigNum = Math.max.apply(null, props?.info[1])for (let i = 0; i < salvProValue.length; i++) {salvProMax.push(bigNum)}const options = {grid: {// 左右邊距left: 50,bottom: 30,top: 10,},tooltip: {//鼠標(biāo)懸浮提示數(shù)據(jù)formatter: function (param) {console.log(param)let str = ''if (param.seriesIndex === 1) {str = `<div>${param.name}: ${param.value} 輛</div>`}return str},backgroundColor: 'rgba(0,123,177,0.2)',borderColor: "#030C31",textStyle: {color: '#ffffff',}},xAxis: {type: 'category',data: props?.info[0],axisTick: {show: false,},axisLabel: {interval: 0}},yAxis: {type: 'value',splitLine: {//分割線配置show: true,lineStyle: {color: "rgba(48,170,219,0.15)",},},axisLabel: {//y軸文字的配置textStyle: {color: "#ffffff",margin: 15,},}},series: [{name: '背景',type: 'bar',barWidth: 20,barGap: '-100%',data: salvProMax,itemStyle: {normal: {color: 'rgba(0, 123, 177, 0.2)',barBorderRadius: 30,}},},{data: props?.info[1],type: 'bar',smooth: true,barWidth: 20,itemStyle: {normal: {barBorderRadius: 10,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#18FFE1'}, {offset: 0.5,color: '#18EBFF'}, {offset: 1,color: '#00A2FF'}]),},},},]};// 創(chuàng)建一個echarts實(shí)例，返回echarts實(shí)例。不能在單個容器中創(chuàng)建多個echarts實(shí)例const chart = echarts.init(chartRef.current)// 設(shè)置圖表實(shí)例的配置項(xiàng)和數(shù)據(jù)chart.setOption(options)// 組件卸載return () => {// myChart.dispose() 銷毀實(shí)例。實(shí)例銷毀后無法再被使用chart.dispose()}}, [props])return (// 把圖表封裝單獨(dú)放入一個組件中<div style={{ width: "100%", height: "70%" }} ref={chartRef}></div>)
}
export default CarAgeEcharts