**【寫在前面】**前端時(shí)間做一個(gè)echarts的頁面調(diào)整，臨時(shí)客戶要求加一個(gè)參數(shù)（總?cè)萘浚╋@示，當(dāng)時(shí)我就想用個(gè)默認(rèn)的副標(biāo)題吧，哪知客戶和我說得緊跟在主標(biāo)題后面，于是乎我就根據(jù)設(shè)置做了一個(gè)調(diào)整，我也是在網(wǎng)上看了一下，好些答案都是復(fù)制粘貼，文章各種抄襲的，遇到一篇有用的文章真難，今天我就給大家整理一下echarts的主標(biāo)題和副標(biāo)題的各種屬性設(shè)置。
涉及知識(shí)點(diǎn)：Echarts柱狀圖、折線圖、餅圖、雷達(dá)圖、象形柱狀圖、橫向柱狀圖、echarts主標(biāo)題、echarts副標(biāo)題、echarts標(biāo)題樣式和位置、echarts的subtext、echarts的富文本rich。

一、多種效果圖展示

效果圖

（文尾鏈接可下載全套源碼）

效果說明

圖1默認(rèn)主標(biāo)題（折線圖）：echarts只有主標(biāo)題，且主標(biāo)題沒有樣式，位置默認(rèn)
圖2主標(biāo)題帶樣（柱狀圖）：echarts主標(biāo)題自定義樣式，位置設(shè)置居中
圖3主+副標(biāo)題默認(rèn)（餅圖）：echarts主副標(biāo)題默認(rèn)樣式，位置居中
圖4主+副標(biāo)題帶樣（雷達(dá)圖）：echarts主和副標(biāo)題自定義樣式，位置居左
圖5主標(biāo)題帶樣（象形柱圖）：echarts主副標(biāo)題自樣式，主標(biāo)題居中，副標(biāo)題居右。
圖6主標(biāo)題帶樣（橫向柱圖）：echarts主副標(biāo)題加樣式設(shè)置，居左，副標(biāo)題緊跟主標(biāo)題

二、代碼實(shí)現(xiàn)詳解：

當(dāng)然我也是秉著大家能多學(xué)習(xí)的態(tài)度，所以特意整理了市面上大概率能用的示例場(chǎng)景，希望能夠給到您幫助，喜歡的可以點(diǎn)個(gè)贊哈。

1、默認(rèn)主標(biāo)題與副標(biāo)題

主要是通過echarts設(shè)置option的title屬性，其中title有text和subtext兩個(gè)屬性，用于存放主標(biāo)題和副標(biāo)題的文字，代碼如下即可完成設(shè)置：

title: {
        text: '中國(guó)黃氏族譜',
        subtext: '江西分譜',
        left: 'center'
 },

應(yīng)用場(chǎng)景也很多，可以自己去調(diào)整文字演示，我只是設(shè)了一下居中的屬性；

2、副標(biāo)題和主標(biāo)題樣式及位置設(shè)置

正常我們看到1的只是光禿禿的文字，有點(diǎn)不太突出顯眼，有些業(yè)務(wù)場(chǎng)景需要針對(duì)主題突出，此時(shí)就要用到title里的textStyle和subtextStyle屬性了，這兩個(gè)屬性主要設(shè)置文字大小顏色字體等，但是位置的屬性還是用left。
所以我們可以繼續(xù)按照下面的操作進(jìn)行設(shè)計(jì)：

title: [{
        text: '速度大比拼',
        left: 'center',
        textStyle: { //設(shè)置字體樣式
            color: '#EF5D54',
            fontSize: 16,
            fontFamily: 'sans-serif',
        },
    }, {
        subtext: '當(dāng)前排名（副標(biāo)題）',
        left: 'right',
        subtextStyle: { //設(shè)置字體樣式
            color: '#0DBC79',
            fontSize: 14,
            fontFamily: 'sans-serif',
        }
    }],

這樣的話就可以隨自己性子來看效果了，我最終效果如下：

3、副標(biāo)題緊隨主標(biāo)題（富文本）

其實(shí)這個(gè)才是我最終想要的東西，我之前的業(yè)務(wù)也是因?yàn)檫@個(gè)才寫了這篇文章，之前有人還忽悠我設(shè)置主標(biāo)題和副標(biāo)題的相對(duì)位置，我都服了，萬一主標(biāo)題是動(dòng)態(tài)的長(zhǎng)度，你怎么設(shè)置副標(biāo)題的偏移量呢，所以設(shè)置相對(duì)位置純屬扯淡。
我是采用echarts富文本的方式來做的，這個(gè)要切記echarts的版本喲，版本在3.7之后才支持這個(gè)，所以一定要注意，當(dāng)沒有效果就考慮一下這個(gè)版本原因。
注意應(yīng)用了textStyle的rich屬性設(shè)置，針對(duì)text使用了{(lán)|}符號(hào)，具體實(shí)現(xiàn)代碼如下：

title: {
        text: '{text1| 經(jīng)濟(jì)增長(zhǎng)水平}{text2| (進(jìn)三年)}',
        textStyle: {
            rich: {
                text1: {
                    color: '#666',
                    fontSize: 16,
                }, text2: {
                    color: '#999',
                    fontSize: 13,
                }
            }
        }
    },

所實(shí)現(xiàn)的效果如下：

三、源碼下載地址：

百度網(wǎng)盤

下載地址：
鏈接：https://pan.baidu.com/s/1pP6WGPrd_N5NJUWKxOXj5A
提取碼：hdd6

123云盤（下載不限速）

下載地址：
鏈接：https://www.123pan.com/s/ZxkUVv-CYJ4.html
提取碼:hdd6

皇榜彩蛋

如果覺得這篇文章對(duì)您有幫助的話，想支持博主的可以上皇榜看看喲，皇榜點(diǎn)擊此處進(jìn)入文章來源地址http://www.zghlxwxcb.cn/news/detail-720895.html

到了這里，關(guān)于【Echart多場(chǎng)景示例應(yīng)用】Echarts柱狀圖、折線圖、餅圖、雷達(dá)圖等完整示例。 echarts主標(biāo)題和副標(biāo)題的位置、樣式等設(shè)置（已解決附源碼）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！