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

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

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

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

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);
});

修改后图表样式以达到预期效果,坐标轴和图例字体颜色已经变为白色

修改后效果如下:

 

  • 10
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库,它提供了丰富的图表类型和高度的可定制性,以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器(包括移动设备上的浏览器)以及部分旧版浏览器(如 IE8/9/10/11)中运行,其底层依赖轻量级矢量图形库 ZRender,确保了图表渲染的高效性和跨平台兼容性。 以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤: ### 关键特性 1. **开源免费**:ECharts 是开源软件,可以免费用于个人和商业项目,无需支付任何费用。 2. **广泛兼容**:支持多种浏览器环境,包括但不限于 Chrome、Firefox、Safari 和 Internet Explorer 系列,保证在不同设备和操作系统上的良好表现。 3. **丰富图表类型**:包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等,以及三维可视化组件(通过 ECharts GL 扩展)。 4. **交互性强**:图表支持鼠标悬停提示、数据区域缩放、图表联动、图表堆叠、数据过滤、图例开关等多种交互功能,提升用户对数据的探索和理解能力。 5. **个性化定制**:提供详细的配置选项,允许用户自定义图表的颜色、字体、网格线、图例、tooltip、轴标签、数据标签、动画效果等,以满足特定设计需求和品牌风格。 6. **数据更新动态渲染**:能够实时接收新数据并动态更新图表,适用于数据流或实时监控场景。 7. **扩展性**:除了核心库外,有 ECharts GL 用于三维和大规模地理数据可视化,以及周边生态工具(如 ECharts-GL、ZRender)增强其功能和适用范围。 ### 图表类型 ECharts 提供的图表类型涵盖了数据分析和展示的常见需求,包括: - **基础图表**:折线图、柱状图、散点图、饼图、K线图 - **统计图表**:盒形图 - **地理图表**:地图、热力图、线图 - **关系图表**:关系图、treemap、旭日图 - **多维数据可视化**:平行坐标 - **BI图表**:漏斗图、仪表盘 此外,ECharts 支持图表间的混搭,即在一个图表容器内同时展现多种图表类型,以对比或关联不同数据维度。 ### 使用步骤 使用 ECharts 进行数据可视化的一般步骤如下: #### 1. 引入 ECharts 库 在 HTML 文件中通过 `<script>` 标签引入 ECharts 的核心文件: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@版本号/dist/echarts.min.js"></script> ``` 确保替换 `版本号` 为所需的 ECharts 版本。 #### 2. 准备 DOM 容器 在页面上创建一个用于承
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库,它提供了丰富的图表类型和高度的可定制性,以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器(包括移动设备上的浏览器)以及部分旧版浏览器(如 IE8/9/10/11)中运行,其底层依赖轻量级矢量图形库 ZRender,确保了图表渲染的高效性和跨平台兼容性。 以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤: ### 关键特性 1. **开源免费**:ECharts 是开源软件,可以免费用于个人和商业项目,无需支付任何费用。 2. **广泛兼容**:支持多种浏览器环境,包括但不限于 Chrome、Firefox、Safari 和 Internet Explorer 系列,保证在不同设备和操作系统上的良好表现。 3. **丰富图表类型**:包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等,以及三维可视化组件(通过 ECharts GL 扩展)。 4. **交互性强**:图表支持鼠标悬停提示、数据区域缩放、图表联动、图表堆叠、数据过滤、图例开关等多种交互功能,提升用户对数据的探索和理解能力。 5. **个性化定制**:提供详细的配置选项,允许用户自定义图表的颜色、字体、网格线、图例、tooltip、轴标签、数据标签、动画效果等,以满足特定设计需求和品牌风格。 6. **数据更新动态渲染**:能够实时接收新数据并动态更新图表,适用于数据流或实时监控场景。 7. **扩展性**:除了核心库外,有 ECharts GL 用于三维和大规模地理数据可视化,以及周边生态工具(如 ECharts-GL、ZRender)增强其功能和适用范围。 ### 图表类型 ECharts 提供的图表类型涵盖了数据分析和展示的常见需求,包括: - **基础图表**:折线图、柱状图、散点图、饼图、K线图 - **统计图表**:盒形图 - **地理图表**:地图、热力图、线图 - **关系图表**:关系图、treemap、旭日图 - **多维数据可视化**:平行坐标 - **BI图表**:漏斗图、仪表盘 此外,ECharts 支持图表间的混搭,即在一个图表容器内同时展现多种图表类型,以对比或关联不同数据维度。 ### 使用步骤 使用 ECharts 进行数据可视化的一般步骤如下: #### 1. 引入 ECharts 库 在 HTML 文件中通过 `<script>` 标签引入 ECharts 的核心文件: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@版本号/dist/echarts.min.js"></script> ``` 确保替换 `版本号` 为所需的 ECharts 版本。 #### 2. 准备 DOM 容器 在页面上创建一个用于承

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值