在线公司网站查询,虚拟主机WordPress建站,dede手机网站模版,石家庄seo霸屏// 上一篇文章介绍了如何实现有背景的柱状图#xff0c;现在又遇到一个问题#xff0c;鼠标滑过柱子#xff0c;提示信息是背景柱子的值#xff0c;解决方案#xff0c;自定义tooltip的formatter#xff0c;上代码tooltip: {//鼠标悬浮提示数据formatter: function (para…// 上一篇文章介绍了如何实现有背景的柱状图现在又遇到一个问题鼠标滑过柱子提示信息是背景柱子的值解决方案自定义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 echartsconst 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
