修改echarts中双Y轴标题样式

最新推荐文章于 2025-03-11 14:22:47 发布

原创最新推荐文章于 2025-03-11 14:22:47 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

echarts 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何使用Echarts库创建具有双Y轴的图表，包括设置不同Y轴的名称、文字样式、颜色、大小、网格线等关键代码。通过对Y轴属性的定制，可以实现专业且美观的数据展示效果。

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

效果图
在这里插入图片描述
双Y轴关键代码

yAxis: [   // 双y轴显示
{
    type: "value",
    name: "(T)", //  y轴文字提示
    nameTextStyle: {
        color: '#ffffff',
        fontSize: 18, // 大小
        padding: [20, 2, 2,-40]
    },
    axisLabel: {
        formatter: "{value} ",
        textStyle: {
            fontSize: 17,//字体大小
            color: '#ffffff'
        }
    },
    // y轴样式  颜色
    axisLine: {
        lineStyle: {
            color: "#1C67BE"
        },
        show: true
    },
    //网格线  
    splitLine: {
        lineStyle:{
           color: ['rgb(28,103,190,0.6)'],
           width: 1,
           type: 'dashed'
        },
        show: true 
    },
    axisTick: { 
        show: false 
    } 
},
{
    type: "value",
    name: "(kwh)",
    nameTextStyle: {
        color: '#ffffff',
        fontSize: 18, // 大小
        padding: [20, 2, 2,50]
    },
    axisLabel: {
        formatter: "{value} ",
        textStyle: {
            fontSize: 17,
            color: '#ffffff'
        }
    },
    // y轴样式
    axisLine: {
        lineStyle: {
            color: "#1C67BE"
        },
        show: true 
    },
    splitLine: {
        lineStyle:{
           color: ['rgb(28,103,190,0.6)'],
           width: 1,
           type: 'dashed'
        },
        show: false 
    },
    axisTick: { 
        show: false 
    }
}],

修改Y轴标题样式

nameTextStyle: {
    color: '#ffffff',
    fontSize: 18, // 大小
    padding: [20, 2, 2,50]
},