echarts配置详解

最新推荐文章于 2025-03-17 08:48:19 发布

翻译最新推荐文章于 2025-03-17 08:48:19 发布 · 287 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/1996zy/archive/2018/04/27/8963385.html

标签

#echarts #前端 #javascript

本文详细介绍了ECharts中图表标题的配置方法，包括标题的位置、样式、边框及内边距等属性设置，并提供了主副标题的具体配置示例。

1.图表标题

title: {
        x: 'left',                 // 水平安放位置，默认为左对齐，可选为：
                                   // 'center' ¦ 'left' ¦ 'right'
                                   // ¦ {number}（x坐标，单位px）
        y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                                   // 'top' ¦ 'bottom' ¦ 'center'
                                   // ¦ {number}（y坐标，单位px）
        //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: '#ccc',       // 标题边框颜色
        borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）
        padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，
                                   // 接受数组分别设定上右下左边距，同css
        itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10，
        textStyle: {
            fontSize: 18,
            fontWeight: 'bolder',
            color: '#333'          // 主标题文字颜色
        },
        subtextStyle: {
            color: '#aaa'          // 副标题文字颜色
        }
    },

echarts配置详解