Vue echarts x轴或y轴文本字体颜色改变、设置x轴间隔显示 interval: 1

最新推荐文章于 2024-03-04 11:08:00 发布

林中明月间。

最新推荐文章于 2024-03-04 11:08:00 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue+Echart 文章标签： vue.js echarts 前端

原文链接：https://www.cnblogs.com/cocozj945/p/6268460.html

Vue+Echart 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何使用Echarts配置项改变x轴和y轴的文本字体颜色。通过设置axisLabel的textStyle属性，可以全局修改颜色，或者使用function动态设置不同索引位置的标签颜色。示例代码中展示了前几个、中间部分和后面几个标签分别设置不同颜色的方法，以及x轴间隔显示的配置。

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

echarts x轴或y轴文本字体颜色改变 - 童心小城 - 博客园

1：x轴文本字体颜色改变

xAxis : [
                    {
                        type : 'category',
                        data : ['<30','30-','40-','50-','60-','>=70'],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ]

2.y轴文本字体颜色改变

yAxis : [
                    {
                        type : 'value',
                        name : '%',
                        axisLabel : {
                            formatter: '{value}',
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
        ]

3.修改前面几个颜色后面几个颜色

xAxis: [
              {
                type: "category",
                data: xdata,["广州","深圳",],
                axisLabel: {
                  color: "#D3E4FF",
                  fontFamily: "PingFangSC-Medium",
                  fontSize: 14,
                  clickable: true,
                  textStyle: {
                    color: function (params, index) {
                      let colorValue;
                      if (index <= 5) {
                        colorValue = "#32CC7F";//前面6个
                      } else if (index > 5 && index <= 14) {
                        colorValue = "#FFA800";//中间9个
                      } else if (index > 8) {
                        colorValue = "#F81D22";//后面的几个
                      }
                      return colorValue;
                    },
                  },
                },
              },
            ],

设置x轴间隔显示 interval: 1

var myChart12 = echarts.init(document.getElementById('chart12'));
        option12 = {
            color: ['#63AFF9'],
            xAxis: {
                type: 'category',
                data:["示范区", "禹王台区", "龙亭区"],
                axisLabel: {
                    interval: 1  //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
                }
            },
            yAxis: {
                type: 'value',
                name: '家'
            },
            series: [{undefined
                data: [80, 32, 90, 34, 129, 133, 130, 200, 16, 150, 188, 178, 156],
                type: 'line'
            }]
        };
        myChart12.setOption(option12)