echarts自定义图表内字体颜色（坐标轴字体颜色、图例字体颜色）-蒲公英云

echarts自定义图表内字体颜色（坐标轴字体颜色、图例字体颜色）

川长思鸟来 2022-04-14 02:52 3893阅读 0赞

最近接触到一个大数据可视化项目，需要用到echarts图标，在使用中会需要对部分图标或字体做自定义设定，这些设定虽然不是太难，设定方法也仅在官网上的配置文档中，但我还是想把它记录下来，以便以后再次用到时能够快捷的解决问题；

echarts官网：http://echarts.baidu.com/

我使用的折线图中（样式主题是shine）坐标轴字体颜色是灰色的，这样在深色的背景中坐标轴上的数字会看不清，因此我想修改成浅色字体;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70

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

xAxis: {
            type: 'category',
            data: ['6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'],
            //设置坐标轴字体颜色和宽度
            axisLine: {
                lineStyle: {
                    color: "#fff",
                }
            }
        },
        yAxis: {
            type: 'value',
            //设置坐标轴字体颜色和宽度
            axisLine: {
                lineStyle: {
                    color: "#fff",
                }
            }
        }

2.修改图例字体颜色

legend: {
            data: ["今日人数趋势", "昨日人数趋势"],
            textStyle:{
                color:"#fff"
            }
        },

修改后的完整代码：

$(function () {
//    人数趋势
    var myChart2 = echarts.init(document.getElementById('number-trend'), "shine");
    option2 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ["今日人数趋势", "昨日人数趋势"],
            textStyle:{
                color:"#fff"
            }
        },
        xAxis: {
            type: 'category',
            data: ['6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'],
            //设置坐标轴字体颜色和宽度
            axisLine: {
                lineStyle: {
                    color: "#fff",
                }
            }
        },
        yAxis: {
            type: 'value',
            //设置坐标轴字体颜色和宽度
            axisLine: {
                lineStyle: {
                    color: "#fff",
                }
            }
        },
        series: [
            {
                name: "今日人数趋势",
                data: [121820, 129321, 129501, 129134, 121290, 121330, 121320, 121336, 121423, 121547, 121586],
                type: 'line',
                smooth: true
            },
            {
                name: "昨日人数趋势",
                data: [121720, 125532, 123971, 129725, 128275, 126364, 124327, 121436, 121323, 125447, 128686],
                type: 'line',
                smooth: true
            }
        ]
    };
    myChart2.setOption(option2, true);
});