// 如果x轴名字太长,echarts会隔断展示,一下是处理方案
// 1.强制展示所有x轴名称 ,名称长度大于4,显示为省略号,鼠标滑过显示全部
import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
const CarTypeEcharts = (props) => {
const chartRef = useRef()
console.log(props)
useEffect(() => {
console.log(props)
const options = {
grid: {
// 左右边距
left: 50,
bottom: 30,
top: 10,
},
tooltip: {
//鼠标悬浮提示数据
formatter: '{b}:{c}'
},
xAxis: {
type: 'category',
data: props?.info[0],
axisTick: {
show: false,
},
// axisLabel: {
// interval: 0
// }
axisLabel: {
margin: 8,
interval: 0, // 强制显示所有名称
formatter: function (params) {
var val = "";
// 超过四个字隐藏
if (params.length > 4) {
val = params.substr(0, 4) + '...';
return val;
} else {
return params;
}
}
}
},
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: 25,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFB264'
}, {
offset: 1,
color: '#33FFE5'
}]),
},
},
}
]
};
// 创建一个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 CarTypeEcharts
echarts柱状图 x轴名字太长处理
最新推荐文章于 2024-07-30 16:51:37 发布