Echarts資料視覺化開發引數配置全解
全棧工程師開發手冊 (作者:欒鵬)
Echarts簡介
6個公共元件:
Echarts工具的完整使用包括title標題、tooltip提示框、toolbox工具欄、legend圖例、dataZoom縮放控制、visualMap視覺對映,6個公共元件。
5種座標系引數配置:
包括geo地理座標系、grid直角座標系、parallel平行座標系、polar極座標系、radar雷達座標系,5種座標系引數配置。
19種類型的資料圖表:
包括bar柱形圖、effectscatter特效散點圖、graph關係圖、heatmap熱力圖、lines線圖、map地圖、pie餅圖、radar雷達圖、scatter散點圖、treemap樹形圖、boxplot箱盒圖、Candlestick股票K線圖、sankey桑基圖、funnel漏斗圖、gauge儀表盤、pictorialBar象形柱圖、themeRiver主題河流,19種類型的資料圖表。
今天我們就詳細介紹一下Echart從安裝入門到所有公共元件。後面的文章我們會詳述5種座標系和19種圖表型別。筆者為大家方便,將所有內容寫成demo,並配有完美註釋。有需要的請留下郵箱。
安裝 Echarts:
Echarts的引入比較麻煩,需要引入的外掛較多。
<script type="text/javascript" src="js/echarts-all-3.js"></script> <script type="text/javascript" src="js/extension/dataTool.min.js"></script> <script type="text/javascript" src="js/extension/jquery-2.2.4.js"></script> <script type="text/javascript" src="js/map/js/china.js"></script> <script type="text/javascript" src="js/map/js/world.js"></script> <script type="text/javascript" src="js/api.js"></script> <script type="text/javascript" src="js/extension/bmap.min.js"></script>
Echarts 配置語法
html頁面新增圖表容器
<div id="set" style="height: 100%"></div>
js程式碼繫結容器與配置引數。
dom = document.getElementById("set");
var myChart = echarts.init(dom);
option={
title:mytitle,
tooltip:mytooltip,
toolbox:mytoolbox
...
};
myChart.setOption(option);
title:標題元件
tooltip:提示框元件
tooltip用於設定當滑鼠滑向資料點時顯示的提示框資訊。
toolbox:工具欄元件
toolbox用於設定圖表工具欄樣式內容,儲存圖片、圖表切換、是否縮放等。
legend:圖例元件
legend用於設定圖例相關屬性。
dataZoom:區域縮放元件
dataZoom控制資料圖表的縮放形式、縮放大小等。
visualMap:視覺對映元件
visualMap視覺對映元件,用於進行『視覺編碼』,也就是將資料對映到視覺元素。視覺元素可以是:symbol: 圖元的圖形類別。symbolSize: 圖元的大小。color: 圖元的顏色。colorAlpha: 圖元的顏色的透明度。opacity: 圖元以及其附屬物(如文字標籤)的透明度。colorLightness: 顏色的明暗度。colorSaturation: 顏色的飽和度。colorHue: 顏色的色調。
相關推薦
Echarts資料視覺化開發引數配置全解
全棧工程師開發手冊 (作者:欒鵬) Echarts簡介 6個公共元件: Echarts工具的完整使用包括title標題、tooltip提示框、toolbox工具欄、legend圖例、dataZoom縮放控制、visualMap視覺對映,6個公共元
Echarts資料視覺化series-line線圖,開發全解+完美註釋
全棧工程師開發手冊 (作者:欒鵬) Echarts資料視覺化series-line線圖全解: mytextStyle={ color:"#333", //文字顏色 fontStyle
Echarts資料視覺化series-effectscatter特效散點圖,開發全解+完美註釋
全棧工程師開發手冊 (作者:欒鵬) Echarts資料視覺化series-effectscatter特效散點圖全解: mytextStyle={ color:"#333", //文字顏色
Echarts資料視覺化series-bar柱形圖詳解,開發全解+完美註釋
全棧工程師開發手冊 (作者:欒鵬) Echarts資料視覺化series-bar柱形圖詳解全解: mytextStyle={ color:"#333", //文字顏色 fontSty
Echarts資料視覺化series-graph關係圖,開發全解+完美註釋
全棧工程師開發手冊 (作者:欒鵬) Echarts資料視覺化series-graph關係圖全解: mytextStyle={ color:"#333", //文字顏色 fontSty
Echarts資料視覺化series-map地圖,開發全解+完美註釋
全棧工程師開發手冊 (作者:欒鵬) Echarts資料視覺化series-map地圖全解: mytextStyle={ color:"#333", //文字顏色 fontStyle
Echarts資料視覺化legend圖例,開發全解+完美註釋
全棧工程師開發手冊 (作者:欒鵬) Echarts資料視覺化legend圖例詳解: legend={ show:true,
Echarts資料視覺化title標題,開發全解+完美註釋
全棧工程師開發手冊 (作者:欒鵬) Echarts資料視覺化title標題詳解: mytextStyle={ color:"#333",
Echarts資料視覺化action圖表行為的相關操作,開發全解+完美註釋
全棧工程師開發手冊 (作者:欒鵬) Echarts資料視覺化action圖表行為觸發的相關操作: 圖表行為用於觸發能夠改變圖表顯示的相關動態功能,event事件用於接收action觸發的行為,所以action行為要配合event事
Echarts資料視覺化parallel平行座標系,開發全解+完美註釋
全棧工程師開發手冊 (作者:欒鵬) Echarts資料視覺化parallel平行座標系詳解: mytextStyle={ color:"#333", //文字顏色 fontStyl
Echarts資料視覺化地理座標系geo,開發全解+完美註釋
全棧工程師開發手冊 (作者:欒鵬) Echarts資料視覺化地理座標系geo詳解: mytextStyle={ color:"#333", //文字顏色 fontStyle:"no
Echarts資料視覺化全解
全棧工程師開發手冊 (作者:欒鵬) 6大公共元件: 5類座標系: 19類資料圖表: 圖表行為和圖表事件:
Echarts資料視覺化全解註釋
全棧工程師開發手冊 (作者:欒鵬) 學習了百度Echart官方教程,不得不說官方教程還是非常不錯了。這裡對Echart所有教程知識進行了總結。 自己喜歡邊學邊總結邊寫demo,所以寫了這篇文章,包含了大部分的Echarts程式設計
用H5大屏資料視覺化開發
專案中需要做一個數據展示用的看板,初接到任務覺得這個沒有什麼難度,做個漂亮的網頁瀏覽器全屏就可以了。可是實際做的過程中碰見了問題。 第一:瀏覽器不能有橫向和縱向的滾動條,沒有滑鼠的滾動操作過程。 第二:有各類尺寸的屏,除了在九宮格拼接屏上完美顯示,還要同時滿足普通使用者的電腦端顯示。電腦的客
推薦好輪子【Echarts資料視覺化】圖表外掛 相容ie6、7、8
前幾天在網上找一些圖表外掛,無意間發現的一個外掛,開源來自百度商業前端資料視覺化團隊。簡單的貼一些他的簡介:官網:http://echarts.baidu.com/echarts2/index.html介紹ppt:http://echarts.baidu.com/echart
python+flask+socket-io+echarts資料視覺化
檢視本機python版本安裝psutil 開啟window power shell安裝psutil PSC:\Users\space> pip install psutil Collectingpsutil Downl
Echarts資料視覺化--特殊餅圖1
資料視覺化開發過程中,經常會遇到比較特殊的圖表。現在簡單介紹遇到過的特殊餅圖-1的做法:1、HTML程式碼:<div class="wrap"> <div id="echart
Echarts資料視覺化,easyshu圖表整合。
介紹: ECharts,一個使用 JavaScript 實現的開源視覺化庫,可以流暢的執行在 PC 和移動裝置上,相容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴輕量級的向量圖形庫 ZRender,提供直觀,互動豐富,可高度個性化定製的資料
【13】Caffe學習系列:資料視覺化環境(python介面)配置
caffe程式是由c++語言寫的,本身是不帶資料視覺化功能的。只能藉助其它的庫或介面,如opencv, python或matlab。更多人會使用python介面來進行視覺化,因為python出了個比較強大的東西:ipython notebook, 現在的最新版本改名叫jupyter notebook
資料視覺化(全綵)(大資料叢書,首次全面細緻地梳理了視覺化理論,方法 工具與應用案例 馬匡六教授 石教英教授鼎力推薦,十
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!