我們在開發web應用的時候經常美工會設計一些樣式比較特殊的圖表，這對于前端開發人員來說會增加開發量，如下圖就是筆者開發程序中要求制作的帶漸變色效果的柱狀圖：
今天在這里教大家如何用echarts原生和如何用SovitChart圖表開發工具來實作，
實體原碼下載地址：http://www.sovitjs.com/article_list.html?articleType=2
方法一：echarts原生Api開發
第一步：在網頁中引入echarts官方js庫，或者引入SovitChart提供的封裝js庫，這里使用SovitChart提供的封裝js庫，
第二步：定義用來放置圖表容器div：這里div的Id取名叫chart_bar_1
第三步：在js中呼叫echarts的官方Api實作柱狀圖：
上面三張圖都是echarts的官方API，每個API是什么意思可以去查閱官方API，這里第三張圖是實作漸變色最關鍵的，上面會分別對每根柱子進行設定，
如果要實作資料動態化，則通過呼叫后臺介面取到資料再放置到對應的data區域，
方法二：SovitChart圖表開發工具開發
第一步：登錄到SovitChart官方后臺，在“圖表服務”中創建自己的專案，點擊專案進入后在“我的圖表”選項卡中點擊+創建圖表：“帶漸變色的柱狀圖”：
創建好以后點擊“帶漸變色的柱狀圖”打開一個空的透明的面版，
第二步：選擇柱狀圖后編輯柱狀圖的屬性：
在第三個選項卡“圖表倉庫”中找到柱狀圖，選擇點擊基本柱狀圖，默認的柱狀圖為基本圖：如下：
第三步：在屬性面版中編輯屬性用來設定柱狀圖的樣式
在資料系列中將系列數量改為2，柱狀圖為兩根柱子，結下來分別展開標題屬性修改標題文字和顏色、展開X和Y坐標軸屬性修改X軸和Y軸的樣式和顏色等、圖例用來設定圖例的顯示文字和顏色，
最后最重要的一步是在獨特樣式中來設定漸變色：
第四步：在資料面版中編輯資料源給圖表添加動態資料，目前實體中使用JSON資料源：
系結資料源我們將在其他的文章中詳細介紹，
設定完成以后點擊“發布”，選擇公開發布，發布后的圖表可以直接訪問或者在自己的專案頁面中參考：
以下是在網頁面參考的效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/298923.html
標籤：其他