tooltip: {formatter: function (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',}},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 = 0bigNum = 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: {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'}]),},},},]};const chart = echarts.init(chartRef.current)chart.setOption(options)return () => {chart.dispose()}}, [props])return (<div style={{ width: "100%", height: "70%" }} ref={chartRef}></div>)
}
export default CarAgeEcharts