学习整理使用echarts自定义图表内文字series、坐标轴xAxis-yAxis、图例legend的字体颜色属性

最新推荐文章于 2025-05-26 16:38:55 发布

原创

最新推荐文章于 2025-05-26 16:38:55 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在Echarts中自定义图表系列、坐标轴及图例的字体颜色，以解决深色背景下的可读性问题。通过修改折线图的坐标轴和图例的字体颜色，提高图表的清晰度。

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

学习整理使用echarts自定义图表内文字和坐标轴的字体颜色属性

学习背景

无背景颜色折线图，可以看清楚折线图的文字信息
在这里插入图片描述
加上深颜色的背景之后，很多文字都看不清楚了

在这里插入图片描述

修改折线图坐标轴字体颜色

   xAxis: {
   
            type: 'category',
            boundaryGap: false,
            axisLabel: {
   
                textStyle: {
   
                    show: true,
                    fontFamily: '微软雅黑',
                    color: "#FFFF00",
                    fontSize: '20',
                },
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
   
            type: 'value',
            axisLabel: {
   
                textStyle: {
   
                    show: true,
                    fontFamily: '微软雅黑',
                    color: "#FFFF00",
                    fontSize: '10',
                },
            },
        },

在这里插入图片描述

修改图例字体颜色

legend: {
   
            textStyle:{
   
                color:"#FFFF00"
            },
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },

在这里插入图片描述

全部代码

<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-stack
-->
<!DOCTYPE h

最低0.47元/天解锁文章