這篇文章將為大家詳細(xì)講解有關(guān)利用ECharts怎么實(shí)現(xiàn)一個(gè)狀態(tài)區(qū)間圖，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
目前
創(chuàng)新互聯(lián)建站已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、
綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、
漳州網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
需求背景
假如有如下圖所示的圖表需要顯示多個(gè)網(wǎng)口在一段時(shí)間內(nèi)的多個(gè)狀態(tài)：y軸用于展示各網(wǎng)口，x軸用于展示時(shí)間(分鐘)，使用條形圖的不同顏色來表示不同時(shí)間區(qū)間段的狀態(tài)，使用深藍(lán)、淺藍(lán)、橙色、紅色分別代表正常、繁忙、故障、離線四種狀態(tài)。以WAN0為例，圖中則表示了0~10分鐘為正常，10~25分鐘為繁忙，25~45分鐘為故障，45~60分鐘為離線。
根據(jù)此圖，很容易想到可以用條形圖試試。但后來發(fā)現(xiàn)，如果用堆疊條形圖，則每種狀態(tài)在每一個(gè)網(wǎng)口對(duì)應(yīng)的圖形中只能出現(xiàn)一次，這不能實(shí)現(xiàn)需求。于是繼續(xù)查閱echart官網(wǎng)示例，終于在自定義類型圖表中找到了一個(gè)相似的示例，地址
通過研究示例代碼并進(jìn)行一番改造，終于實(shí)現(xiàn)了上述需求。
在實(shí)現(xiàn)的過程中遇到了一個(gè)小問題，那就是使用自定義圖表實(shí)現(xiàn)chart之后，圖例不好處理。通過查看條形圖的示例，找到了一種顯示圖例的方法，那就是使用空的條形圖來顯示圖例，因?yàn)樵?strong>series里面配置了條形圖并配置name后，echart會(huì)自動(dòng)根據(jù)name的值去legend的配置中匹配對(duì)應(yīng)的圖例名字并顯示。
完整代碼如下，保存于本地之后再自己去echart官網(wǎng)下載庫(kù)文件（完整版）之后即可運(yùn)行：
對(duì)于自定義圖表的data字段里數(shù)據(jù)項(xiàng):
{
itemStyle: { normal: { color: colors[0] } },
name: '正常',
value: [0, 0, 10]
}關(guān)于利用ECharts怎么實(shí)現(xiàn)一個(gè)狀態(tài)區(qū)間圖就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
新聞名稱：利用ECharts怎么實(shí)現(xiàn)一個(gè)狀態(tài)區(qū)間圖-創(chuàng)新互聯(lián)
標(biāo)題來源：http://weahome.cn/article/ddsesg.html
重慶分公司
重慶分公司
