基於echarts4.0二次開發封裝的可視化圖表設計輔助工具-EchartsUtil
基於echarts4.0二次開發封裝的可視化圖表設計輔助工具
前言：由於最近在項目開發中經常會用於echarts進行數據可視化的圖表設計制作，許多圖表都需要重復書寫大量的option代碼，現將這些公共配置項和重復代碼封裝集成到這個輔助工具裏面，只需要根據後臺返回的數據形式調用相應的方法，傳入一個data和DOM容器ID就能呈現圖形，省去了諸多前後端數據處理的工作。
源碼下載：https://github.com/CoreyJu/EchartsUtil
使用步驟：
1、引入echart4.0(可官網下載最新版)和echart-util.js文件；
<script src="../src/echarts-4.0.js"></script>
2、定義一個圖形dom容器；
<echart id="chartid" width="100%" height="400px"></echart>
id必要屬性，width、height不必要屬性，根據需要可選擇不寫還是自定義寬高
3、傳入數據調用圖形方法生成option；
var option = zhuEcharts.line(data,3,"本月銷售情況");
option為echart的配置項，可以自定義和修改，zhuEcharts為方法體，line表示生成線圖的方法，傳入的第一個參數為圖形所需要的數據,必要參數，數據類型如下：
[
{"name":"計算機學院","value":"500"},
{"name":"商學院","value":"900"},
{"name":"外國語學院","value":"700"},
{"name":"馬克思主義學院","value":"400"},
{"name":"環境與土木工程學院","value":"600"}
]
[
{ "group":"男" , "name": "1月", "value": "110"},
{ "group":"女" , "name": "1月", "value": "115"},
{ "group":"女" , "name": "2月", "value": "102"},
{ "group":"男" , "name": "3月", "value": "22" },
{ "group":"女" , "name": "3月", "value": "112"},
{ "group":"男" , "name": "4月", "value": "80" },
{ "group":"女" , "name": "4月", "value": "45" },
{ "group":"男" , "name": "5月", "value": "25" },
{ "group":"女" , "name": "5月", "value": "92" },
{ "group":"男" , "name": "6月", "value": "22" },
{ "group":"女" , "name": "6月", "value": "52" }
]
傳入的第二個參數為圖表類型，不必要參數（可選，1表示曲線，2表示折線面積，3表示曲線面積），傳入的第三個參數為圖表的標題，不必要參數（這個參數需要加雙引號）
4、傳入option和容器id調用繪制方法生成圖表；
var initChart = zhuEcharts.renderChart(option,"chartid","purple");
initChart是定義這個圖表對象，方便後面操作，可不定義，renderChart為繪制圖表方法，傳入的第一個參數為上面方法返回的option，也可以自定義配置項或者對生成的option做相應的修改，必要參數，傳入的第二個參數為DOM容器ID，必要參數（加雙引號）,傳入的第三個參數為圖形需要引用的echart樣式主題名稱，不必要參數（加雙引號,目前插件集成了5套主題樣式供選擇，basic常規色，dark深黑色，roma灰黑色，purple紫色，vintage藍色）
基於echarts4.0二次開發封裝的可視化圖表設計輔助工具-EchartsUtil