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