修改echarts的x轴y轴的刻度和刻度线文本颜色和xy轴的轴线颜色和标题title的字体颜色

迈不过友情╰ 2023-01-13 14:57 688阅读 0赞

## 1，x轴y轴都是一样的： ##

### 1.1修改刻度文本颜色： ###

找到xAxis和yAxis：

添加如下代码：（和data和type同级并列）

>     axisLabel: {
>       show: true,
>       textStyle: {
>         color: '#fff'
>       }
>     }

如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][]

### 1.2修改xy轴的轴线颜色+刻度线颜色（是同一个参数）： ###

添加axisLine参数（和axisLabel和type并列）：

>     axisLine: {
>       show:true,//是否显示轴线
>       lineStyle: {
>         color: '#fff',//刻度线的颜色
>       }
>     }

如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 1][]

## 2，修改title的颜色： ##

添加：

>     textStyle: {
>       color: '#fff'
>     }

如图：

![20210419113555762.png][]

成功！

如图：默认都是灰色的文字。现在都变成白色的文字了！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20221022/42cdaf16e96146f3b4f27e89be4aa4fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 1]: /images/20221022/fb7c8954e3ab454a96022be245831520.png
[20210419113555762.png]: /images/20221022/8a2952502af746f49dfafb4be2888970.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 2]: /images/20221022/a49312330c8a4fb1af2fcca920769680.png