人民日报客户端视界北京seo招聘网

// 上一篇文章介绍了如何实现有背景的柱状图，现在又遇到一个问题，鼠标滑过柱子，提示信息是背景柱子的值，解决方案，自定义tooltip的formatter，上代码tooltip: {//鼠标悬浮提示数据formatter: function (param) {// param.seriesIndex 会告诉你是第一个柱状图，用这个来判断你要显示的数值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: {//鼠标悬浮提示数据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'}]),},},},]};// 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例const chart = echarts.init(chartRef.current)// 设置图表实例的配置项和数据chart.setOption(options)// 组件卸载return () => {// myChart.dispose() 销毁实例。实例销毁后无法再被使用chart.dispose()}}, [props])return (// 把图表封装单独放入一个组件中<div style={{ width: "100%", height: "70%" }} ref={chartRef}></div>)
}
export default CarAgeEcharts