echarts使用title代替坐标轴名称

最新推荐文章于 2025-04-24 09:14:04 发布

大熊猫玩菜刀

最新推荐文章于 2025-04-24 09:14:04 发布

阅读量660

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： echarts

本文链接：https://blog.csdn.net/u013727805/article/details/110960229

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用ECharts的title组件来替代坐标轴名称的方法，以此解决因名称长度变化导致的位置控制难题。通过实例展示了如何配置title以适配不同的图表需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

坐标轴名称的位置，随着名称长度、坐标轴最值长度的变化，属实难以控制，所以尝试使用title取代：

option = {
        title: [{
            text: "单位：左边一个坐标轴名称",
            left: "18px",
            top: 0,
            textStyle: {
                color: "#999",
                fontSize: 12,
                fontWeight: '400'
            }
        }, {
            text: "单位：右边一个坐标轴名称",
            right: "18px",
            top: 0,
            textStyle: {
                color: "#999",
                fontSize: 12,
                fontWeight: '400'
            }
        }],
        grid: {
            left: '25',
            right: '25',
            bottom: '24',
            top: '75',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
        },
        yAxis: [{
            type: 'value',
            axisLabel: {
                color: '#999',
                textStyle: {
                    fontSize: 12
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#F3F4F4'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
        }, {
            type: 'value',
            axisLabel: {
                color: '#999',
                textStyle: {
                    fontSize: 12
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#F3F4F4'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
        }],
        series: [{
                name: '订单总数',
                type: 'line',
                smooth: true,
                data: [3, 2, 4, 4, 5, 3, 8],
                yAxisIndex: 0,
            },
            {
                name: '消费金额',
                type: 'line',
                smooth: true,
                data: [999, 54, 34, 2222, 32225, 1111],
                yAxisIndex: 1,
            }
        ]
    };

很完美（神奇的title，很多场景都可以用title处理）：