資訊專欄INFORMATION COLUMN
摘要：我們?cè)陂_(kāi)發(fā)應(yīng)用的時(shí)候經(jīng)常美工會(huì)設(shè)計(jì)一些樣式比較特殊的圖表，這對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)會(huì)增加開(kāi)發(fā)量，如下圖就是筆者開(kāi)發(fā)過(guò)程中要求制作的帶漸變色效果的柱狀圖今天在這里教大家如何用原生和如何用圖表開(kāi)發(fā)工具來(lái)實(shí)現(xiàn)。
我們?cè)陂_(kāi)發(fā)web應(yīng)用的時(shí)候經(jīng)常美工會(huì)設(shè)計(jì)一些樣式比較特殊的圖表，這對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)會(huì)增加開(kāi)發(fā)量，如下圖就是筆者開(kāi)發(fā)過(guò)程中要求制作的帶漸變色效果的柱狀圖：
今天在這里教大家如何用echarts原生和如何用SovitChart圖表開(kāi)發(fā)工具來(lái)實(shí)現(xiàn)。
實(shí)例原碼下載地址：http://www.sovitjs.com/article_list.html?articleType=2
方法一：echarts原生Api開(kāi)發(fā)
第一步：在網(wǎng)頁(yè)中引入echarts官方j(luò)s庫(kù)，或者引入SovitChart提供的封裝js庫(kù)，這里使用SovitChart提供的封裝js庫(kù)。
第二步：定義用來(lái)放置圖表容器div：這里div的Id取名叫chart_bar_1
第三步：在js中調(diào)用echarts的官方Api實(shí)現(xiàn)柱狀圖：
上面三張圖都是echarts的官方API，每個(gè)API是什么意思可以去查閱官方API，這里第三張圖是實(shí)現(xiàn)漸變色最關(guān)鍵的，上面會(huì)分別對(duì)每根柱子進(jìn)行設(shè)置。
如果要實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)化，則通過(guò)調(diào)用后臺(tái)接口取到數(shù)據(jù)再放置到對(duì)應(yīng)的data區(qū)域。
方法二：SovitChart圖表開(kāi)發(fā)工具開(kāi)發(fā)
第一步：登錄到SovitChart官方后臺(tái)，在“圖表服務(wù)”中創(chuàng)建自己的項(xiàng)目，點(diǎn)擊項(xiàng)目進(jìn)入后在“我的圖表”選項(xiàng)卡中點(diǎn)擊+創(chuàng)建圖表：“帶漸變色的柱狀圖”：
創(chuàng)建好以后點(diǎn)擊“帶漸變色的柱狀圖”打開(kāi)一個(gè)空的透明的面版。
第二步：選擇柱狀圖后編輯柱狀圖的屬性：
在第三個(gè)選項(xiàng)卡“圖表倉(cāng)庫(kù)”中找到柱狀圖，選擇點(diǎn)擊基本柱狀圖。默認(rèn)的柱狀圖為基本圖：如下：
第三步：在屬性面版中編輯屬性用來(lái)設(shè)置柱狀圖的樣式
在數(shù)據(jù)系列中將系列數(shù)量改為2，柱狀圖為兩根柱子。結(jié)下來(lái)分別展開(kāi)標(biāo)題屬性修改標(biāo)題文字和顏色、展開(kāi)X和Y坐標(biāo)軸屬性修改X軸和Y軸的樣式和顏色等、圖例用來(lái)設(shè)置圖例的顯示文字和顏色。
最后最重要的一步是在獨(dú)特樣式中來(lái)設(shè)置漸變色：
第四步：在數(shù)據(jù)面版中編輯數(shù)據(jù)源給圖表添加動(dòng)態(tài)數(shù)據(jù)，目前實(shí)例中使用JSON數(shù)據(jù)源：
綁定數(shù)據(jù)源我們將在其他的文章中詳細(xì)介紹。
設(shè)置完成以后點(diǎn)擊“發(fā)布”，選擇公開(kāi)發(fā)布，發(fā)布后的圖表可以直接訪問(wèn)或者在自己的項(xiàng)目頁(yè)面中引用：
以下是在網(wǎng)頁(yè)面引用的效果：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/119749.html
摘要：示例代碼托管在博客園地址大史住在大前端原創(chuàng)博文目錄華為云社區(qū)地址你要的前端打怪升級(jí)指南一任務(wù)說(shuō)明使用原生繪制柱狀圖。 showImg(https://segmentfault.com/img/bVbtnTv); 示例代碼托管在：http://www.github.com/dashnowords/blogs博客園地址：《大史住在大前端》原創(chuàng)博文目錄 華為云社區(qū)地址：【你要的前端打怪升級(jí)指...
摘要：深夜學(xué)姐問(wèn)我在中柱狀圖如何自定義頂部亮點(diǎn)先看效果圖我們可以看到圖中圖表不僅有漸變色，同時(shí)柱狀圖頂部位置有一個(gè)不相同的頂部亮點(diǎn)圖片接下來(lái)，我們一起來(lái)實(shí)現(xiàn)一下這個(gè)效果部分部分獲取元素左側(cè)名稱列表號(hào) ...
摘要：常用的類型為，需要定義對(duì)呀的類目數(shù)據(jù)，這個(gè)例子中的類目數(shù)據(jù)為日期組成的數(shù)據(jù)。在使用之前覺(jué)得這個(gè)插件內(nèi)容很多，但是去看了一遍折線圖的后發(fā)現(xiàn)有很多都是類似的，例如軸與軸的設(shè)置。 前言：項(xiàng)目中經(jīng)常會(huì)使用到Echarts,有的需求差不多復(fù)用性高，由于之前沒(méi)有好好總結(jié)，時(shí)間一長(zhǎng)就容易忘，所以這里總結(jié)一下Echarts折線圖使用，下面會(huì)列舉官網(wǎng)一些Api。 一、效果圖 showImg(https:...
摘要：常用的類型為，需要定義對(duì)呀的類目數(shù)據(jù)，這個(gè)例子中的類目數(shù)據(jù)為日期組成的數(shù)據(jù)。在使用之前覺(jué)得這個(gè)插件內(nèi)容很多，但是去看了一遍折線圖的后發(fā)現(xiàn)有很多都是類似的，例如軸與軸的設(shè)置。 前言：項(xiàng)目中經(jīng)常會(huì)使用到Echarts,有的需求差不多復(fù)用性高，由于之前沒(méi)有好好總結(jié)，時(shí)間一長(zhǎng)就容易忘，所以這里總結(jié)一下Echarts折線圖使用，下面會(huì)列舉官網(wǎng)一些Api。 一、效果圖 showImg(https:...
閱讀 1835·2023-04-26 02:51
閱讀 2875·2021-09-10 10:50
閱讀 3077·2021-09-01 10:48
閱讀 3641·2019-08-30 15:53
閱讀 1829·2019-08-29 18:40
閱讀 417·2019-08-29 16:16
閱讀 2041·2019-08-29 13:21
閱讀 1828·2019-08-29 11:07
