echarts柱状图 x轴名字太长处理

最新推荐文章于 2024-07-18 15:48:23 发布

liuxi_happy

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量894

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/liuxi_happy/article/details/134262369

版权

// 如果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