javascript
复制代码
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
// 取返回数据中的最大值作为背景色
bigNum = Math.max.apply(null, props?.info[1])
for (let i = 0; i < salvProValue.length; i++) {
salvProMax.push(bigNum)
}
const options = {
grid: {
// 左右边距，调节整个echarts距离外面box的位置
left: 50,
bottom: 30,
top: 10,
},
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: [
{
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'
}]), // 柱状图的渐变色
},
},
},
{
name: '背景',
type: 'bar',
barWidth: 20,
barGap: '-100%',
data: salvProMax,
itemStyle: {
normal: {
color: 'rgba(0, 123, 177, 0.2)',
barBorderRadius: 30,
}
},
},
]
};
// 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
const chart = echarts.init(chartRef.current)
// 设置图表实例的配置项和数据
chart.setOption(options)
// 组件卸载
return () => {
// myChart.dispose() 销毁实例。实例销毁后无法再被使用
chart.dispose()
}
}, [props])
return (
// 把图表封装单独放入一个组件中
<div style={{ width: "100%", height: "100%" }} ref={chartRef}></div>
)
}
export default CarAgeEcharts