ECharts v4.2.1 rc1 商業產品圖表庫 源碼下載

來源:腳本之家  責任編輯:小易  

數據都是通過sql語句排序的1.Echarts柱狀圖的正常配置注:聲明了 myChart、test這兩個都有用官方示例中myChart是聲明在 function(ec)里面的script>baidu.com/build/dist/echarts.js"></script>var myChart;var test=10路徑配置require.config({paths:{echarts:'http://echarts.baidu.com/build/dist'}});使用require'echarts','echarts/chart/bar'/使用柱狀圖就加載bar模塊,按需加載function(ec){基于準備好的dom,初始化echarts圖表myChart=ec.init(document.getElementById('divProgress'));var option={tooltip:{show:true},animation:false,legend:{data:['銷量']},xAxis:{type:'category',data:["襯衫www.13333515.buzz防采集請勿采集本網。

源碼大小:24.9MB 源碼語言:簡體中文 源碼類型:國產軟件 源碼授權:免費軟件 更新時間:2019-01-25 17:01:25 源碼類別:jsp其它 源碼官網: 官方網址 網友評分:源碼評分 應用平臺:JSP

ECharts (Enterprise Charts 商業產品圖表庫)

固定設置y軸最大值:max:1000, 或者動態放大上下限的值;yAxis中先設置 minInterval:1,再設置 boundaryGap:[0,0.1], boundaryGap是坐標軸兩端空白策略,數組內數值代表百分比, [原始數據最小值

提供商業產品常用圖表,底層基于ZRender(一個全新的輕量級canvas類庫),創建了坐標系,圖例,提示,工具箱等基礎組件,并在此上構建出折線圖、柱狀圖、散點圖、K線圖、餅圖、雷達圖、地圖、和弦圖、力導向布局圖、儀表盤以及漏斗圖,同時支持任意維度的堆積和多圖表混合展現。

1、打開echarts官方實例頁面,點擊第一個折線圖。2、進入頁面后,可以看到數據比較少,所以橫坐標文字全部都顯示出來了。3、修改左側的option內容,在xAxis的data數組中再添加兩行內容,同時,在

Echarts device

\"dataZoom\":[{ show\":true, height\":30, xAxisIndex\": 0 bottom:30, start\":10, end\":80, handleIcon:'path:/M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.

Echarts explorer

echarts X軸數據太多間隔顯示,tooltip讓全部顯示的方法: 1、不要使用默認的tooltip了,可以對應寫一個label記錄值, 2、然后控制它的display:block/none 可以試一下, 3、用一個公有的靜態

支持IE6/7/8/9+,chrome、firefox、safari、opera

1、在BusinessJs/echarts.js中引用echarts及zrender: require.config({ packages: { name:'echarts', location:'./echarts/src', main:'echarts' }, { name:'zrender', location:'./zrender/src',/

(IE8- power by excanvas )

特色

我們誠摯邀請你翻閱這份在線文檔 《 Why ECharts ? 》 你可以從中更直觀的體驗到ECharts的特性以及快速瀏覽到所有圖表類型。

*文檔中展現的個別特性在IE8-中并沒有得到支持,所以建議使用IE9+、chrome、safari、firefox或opera等現代瀏覽器閱讀這份文檔。

Echarts mix

混搭

混搭的圖表會更具表現力也更有有趣味,ECharts提供的圖表(共11類17種)支持任意混搭:

折線圖(面積圖)、柱狀圖(條形圖)、散點圖(氣泡圖)、K線圖、

餅圖(環形圖)、雷達圖、地圖、和弦圖、力導布局圖、儀表盤、漏斗圖。

混搭情況下一個標準圖表:包含唯一圖例、工具箱、數據區域縮放、值域漫游模塊,一個直角坐標系(可包含一條或多條類目軸線,一條或多條值軸線,最多上下左右四條)

拖拽重計算

拖拽重計算特性(專利)帶來了數據統計圖表從未有過的用戶體驗,允許用戶對統計數據進行有效的提取、整合,甚至在多個圖表間交換數據,賦予了用戶對數據進行挖掘、整合的能力。

Echarts 拖拽重計算

Echarts 數據視圖

數據視圖

如果你所呈現的數據足夠讓用戶所關心,那么他們將不滿足于查看可視化的圖表,要去逐一迎合他們下載保存,數據分享,加工整合已有數據等等需求?

或許你只要給予一個“,”分隔的數據文本他們就懂了,這就是ECharts的數據視圖!當然,你可以重載數據視圖的輸出方法,用你獨特的方式去呈現數據。

如果你的用戶足夠的高端,你甚至可以打開數據視圖的編輯功能,跟拖拽重計算相比,這可是批量的數據修改!

動態類型切換

很多圖表類型本身所表現的能力是相似的,但由于數據差異、表現需求和個人喜好的不同導致最終圖表所呈現的張力又大不一樣,比如折線圖和柱狀圖的選擇,系列數據是堆疊還是平鋪總是讓人頭疼。

ECharts提供了動態類型切換,讓用戶隨心所欲的切換到他所需要的圖表類型和堆疊狀態。

Echarts 動態類型切換

Echarts 圖例開關

圖例開關

多系列數據的同時展現呈現出豐富內容,但如何讓用戶切換到他所關心的個別系列上?

ECharts提供了方便快捷的多維度圖例開關,可以隨時切換到你所關心的數據系列。

數據區域選擇

數據可以是無限的,但顯示空間總是有限的,數據區域選擇組件提供了大數據量中漫游的能力,讓用戶選擇并呈現他所關心的數據區域。

配合隨動的均值(極值)標線,標注展現強大的數據剖析能力。 try this 》

Echarts 數據區域縮放

Echarts 多圖聯動

多圖聯動

多系列數據在同一個直角系內同時展現有時候會產生混亂,但他們又存在極強的關聯意義不可分離?

ECharts提供了多圖聯動的能力(connect),能做的可不僅僅是鼠標劃過的詳情顯示,連接的多個圖表會共享組件事件并且實現了保存圖片時的自動拼接。 try this 》

值域漫游

基于坐標的圖表(如地圖、散點圖)通過色彩變化表現數值的大小能直觀形象的展示數據分布。

但如何聚焦到我所關心的數值上?我們創造了稱為值域漫游的功能,讓你可以輕松進行數值篩選。

Echarts 值域漫游

Echarts 炫光特效

炫光特效

我們知道,很多時候我們需要一些吸引眼球的能力。

ECharts支持標注標線的炫光特效,特別用在地圖上輕松實現百度遷徙數據可視化特效

大規模數據模式

如何展現成千上百萬的數據?貌似除了用專業的統計工具(如MATLAB)外別無選擇?

不,在擁有如此多交互特性下ECharts依然可以做到直角系圖表(折、柱、散點、K線)20萬數據秒級內渲染完成,這對于常規的應用,用現代瀏覽器就足以輕松展現百萬規模的數據!

Echarts 大規模散點圖

Echarts 動態數據添加 Echarts 動態數據添加

動態數據添加

如果你需要展示有實時變化的數據,相信這個動態接口會對你很有幫助。

標線輔助

趨勢線?平均線?上升通道?支持位?專業的你自然知道該怎么用

提供標線輔助在K線圖中可是必要的功能!當然,ECharts中的任何圖表都可以使用。

Echarts 標線輔助

Echarts 多維度堆積

多維度堆積

支持多系列,多維度的數據堆積,配合自動伸縮的圖形實體和直角坐標系,能呈現出更有內涵的統計圖表~

子區域地圖模式

地圖類型支持world,china及全國34個省市自治區。同時支持子區域模式,通過主地圖類型擴展出所包含的子區域地圖,輕易輸出全球176個國家地區和全國600多個省市區域簡圖, try this 》

Echarts 子區域地圖

Echarts 標準GeoJson擴展

GeoJson地圖擴展

內置地圖由標準GeoJson地理數據并經過高效的壓縮算法壓縮生成的地圖數據(大小僅為標準geoJson的30%左右)驅動而來。如果內置地圖類型或數據如果并未滿足你的項目需要,可通過簡單動態注冊產生你所需要的新類型, try this 》

標注 & 標線

添加額外的標注內容是常用的功能,如地圖上標注某些特定位置,折線圖上標注極值點或者柱形圖里標線出變化趨勢,ECharts全系列圖表支持標注標線功能,并且與生俱來的可以響應圖例開關、值域漫游等組件的交互功能。

Echarts 全系列圖表支持標注、標線 Echarts 全系列圖表支持標注、標線

Echarts 多級控制 Echarts 高度個性化

個性化定制

超過600個可配置選項結合多級控制設計滿足高度定制的個性化需求。

詳細文檔 »

事件交互

可以捕獲的用戶交互和數據變化事件實現圖表間或者與外界的聯動。try this »

事件調試try this »

Echarts 事件交互

Echarts 百搭時間軸

百搭時間軸

時空數據分析是信息可視化里一個相當重要的方向!ECharts提供可與任意圖表搭配使用的時間軸控件以展現時空數據變化。

ECharts 更新日志:

v4.2.1.rc1

[Fix] 修復了文本緩存的問題。

[Fix] 修復了在一些情況下事件處理器中重新 setOption 時拋異常的問題。

[Fix] 修復了 geo 中 showTip 異常的問題。

[Fix] 修復了一些情況下堆疊柱狀圖超出直角坐標系范圍的問題。

[Fix] 修復了圖例組件(legend)當空間只夠顯示一項時不能翻頁的問題。

[Fix] 修復了餅圖標簽(label)定位在中心時,在一些角度下有便宜的問題。

[Fix] 修復了地圖坐標系(geo)在 MS Edge 下不能拖動的問題。

[Fix] 修復了地圖系列(series.type: 'map')標簽不能顯示的問題。

[Fix] 修復了設置了 visualMap: false 的數據項影響其他數據項的問題。

[Fix] 使得 axis.type: 'category' 且 axisLabel.interval: 0 時,所有標簽(axisLabel)都能被顯示。

下載地址如下:

四五互聯移動下載

群英網絡電信下載

巨牛網絡電信下載

創夢網絡電信下載

酷云中國網通下載

億恩科技電信下載

萬達網絡電信下載

徐州楓信網通下載

360集群電信下載

酷云中國電信下載

云彩網絡雙線下載

騰正科技電信下載

微子網絡電信下載

最近有個朋友問了這樣一個關于ECharts圖表組件的問題,他想在一個頁面內創建多個圖表,不知道該如何做。最大的問題可能是受到了require([],function(){});的阻礙吧。其實require無非就是一個模塊化加載借用其回調函數去創建圖表對象。所以只要我們能夠將創建多個圖表對象的方法進行統一封裝形成一個方法放入require()的回調函數內即可。一個頁面內創建多個ECharts圖表示例效果圖呈現想要在一個頁面創建多個圖表對象需要準備如下幾個條件,也可以說是注意事項:1、想要創建幾個圖表對象就需要預先設置多少個圖表容器圖表容器作為圖表的載體,所以是必須的,且必須指定每一個容器的width和height為非零,否則會產生圖表無法呈現的結果。width:500px;float:left;border:1px solid#ccc;padding:10px;width:500px;float:left;border:1px solid#ccc;padding:10px;這里準備了兩個容器。2、引入相關的js文件script>script>3、編寫好創建不同圖表對象的方法1)、創建一個柱狀圖的函數創建ECharts柱狀圖圖表function DrawColumnEChart(ec){柱狀圖-var myChart=ec.init(document.getElementById('main'));圖表顯示提示信息myChart.showLoading({text:"圖表數據正在努力加載.});myChart.hideLoading();myChart.setOption({title:{text:"柱狀圖},tooltip:{trigger:'axis'},legend:{data:['stepday.com','tuiwosa.com']},toolbox:{show:false},calculable:true,xAxis:{type:'category',data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}yAxis:{type:'value',splitArea:{ show:true }}series:{name:'stepday.com',type:'bar',/序列展現類型為柱狀圖data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]},{name:'tuiwosa.com',type:'bar',data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3]}});var ecConfig=require('echarts/config');ECharts圖表的click事件監聽myChart.on("click",function(){alert("你點擊我了!});}2)、創建折線圖的函數創建ECharts折線圖圖表function DrawLineEChart(ec){折線圖-var myLineChart=ec.init(document.getElementById('mainLine'));圖表顯示提示信息myLineChart.showLoading({text:"圖表數據正在努力加載.});myLineChart.hideLoading();myLineChart.setOption({title:{text:"折線圖},tooltip:{trigger:'axis'},legend:{data:['stepday.com','tuiwosa.com']},toolbox:{show:false},calculable:true,xAxis:{type:'category',data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}yAxis:{type:'value',splitArea:{ show:true }}series:{name:'stepday.com',type:'line',/序列展現類型為折線圖data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]},{name:'tuiwosa.com',type:'line',data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3]}});var ecConfig=require('echarts/config');ECharts圖表的click事件監聽myLineChart.on("click",function(){alert("你點擊我了!});}4、封裝一個統一調用創建不同圖表的函數將畫多個圖表的進行函數封裝function DrawCharts(ec){DrawColumnEChart(ec);DrawLineEChart(ec);}5、結合模塊加載函數require(requireArr,callbackFunction)創建圖表對象require'echarts','echarts/chart/bar',/按需加載圖表關于bar圖的部分'echarts/chart/line'/按需加載圖表關于線性圖的部分DrawCharts6、特別提醒1)、創建不同圖表對象的時候需要注意方法內部關于init()初始化圖表方法的時候其id要與需要狀態當前圖表容器id保持一致。7、完整示例代碼DOCTYPEhtml>html lang="en">ECharts-基本線性圖script>script>width:500px;float:left;border:1px solid#ccc;padding:10px;width:500px;float:left;border:1px solid#ccc;padding:10px;STEP DAY我們只提供最直接、最具價值的信息,旨在:<a href="http://www.stepday.com/myblog/?echarts" target="_blank">www.stepday.com</a>Step:4 require echarts and use it in the callback.Step:4 動態加載echarts然后在回調函數中開始使用,注意保持按需加載結構定義圖表路徑require'echarts','echarts/chart/bar',/按需加載圖表關于bar圖的部分'echarts/chart/line'/按需加載圖表關于線性圖的部分DrawCharts將畫多個圖表的進行函數封裝function DrawCharts(ec){DrawColumnEChart(ec);DrawLineEChart(ec);}創建ECharts柱狀圖圖表function DrawColumnEChart(ec){柱狀圖-var myChart=ec.init(document.getElementById('main'));圖表顯示提示信息myChart.showLoading({text:"圖表數據正在努力加載.});myChart.hideLoading();myChart.setOption({title:{text:"柱狀圖},tooltip:{trigger:'axis'},legend:{data:['stepday.com','tuiwosa.com']},toolbox:{show:false},calculable:true,xAxis:{type:'category',data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}yAxis:{type:'value',splitArea:{ show:true }}series:{name:'stepday.com',type:'bar',/序列展現類型為柱狀圖data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]},{name:'tuiwosa.com',type:'bar',data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3]}});var ecConfig=require('echarts/config');ECharts圖表的click事件監聽myChart.on("click",function(){alert("你點擊我了!});}創建ECharts折線圖圖表function DrawLineEChart(ec){折線圖-var myLineChart=ec.init(document.getElementById('mainLine'));圖表顯示提示信息myLineChart.showLoading({text:"圖表數據正在努力加載.});myLineChart.hideLoading();myLineChart.setOption({title:{text:"折線圖},tooltip:{trigger:'axis'},legend:{data:['stepday.com','tuiwosa.com']},toolbox:{show:false},calculable:true,xAxis:{type:'category',data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}yAxis:{type:'value',splitArea:{ show:true }}series:{name:'stepday.com',type:'line',/序列展現類型為折線圖data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]},{name:'tuiwosa.com',type:'line',data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3]}});var ecConfig=require('echarts/config');ECharts圖表的click事件監聽myLineChart.on("click",function(){alert("你點擊我了!});}內容來自www.13333515.buzz請勿采集。


  • 本文相關:
  • echarts 怎樣在一個頁面顯示多張圖表
  • echarts怎么設置數據自動排序
  • 如何echarts的legend中,鼠標移過去后會出現數據展示的明細提示
  • echarts4如何設置折線圖只顯示最大值數值
  • Echarts怎么改變yAxisY軸坐標的數值,或是能不能自己寫一個呢
  • echarts 圖例之間的間距怎么設置
  • 如何用代碼控制ECharts的dataZoom
  • echarts X軸數據太多間隔顯示,tooltip能不能全部顯示
  • 怎么樣讓ECharts從后臺獲取數據并展示
  • echarts是做什么的?
  • 網站首頁源碼下載asp源碼php源碼.net源碼jsp源碼軟件開發腳本下載js框架網站地圖網頁游戲黑客源碼數據庫類其它源碼整站系統博客程序留言聊天企業網站新聞文章ajax相關搜索鏈接文件管理交友會員上傳下載投票調查框架模板整站系統新聞文章留言聊天博客系統賀卡圖片ajax相關文件管理問答系統社區論壇上傳下載整站系統控件組件新聞文章主機域名計數統計小偷采集電子商務學校班級 社區論壇上傳下載投票調查blog程序留言聊天整站系統社區論壇上傳下載投票調查數據管理jsp其它c#源碼易語言源碼delphi源碼vb源碼java源碼其它菜單導航tab標簽焦 點 圖在線客服css特效相冊代碼flash特效批處理其它jqueryextjsprototypemootoolsajax/javascript其它框架主頁源碼下載jsp源碼jsp其它一起鼎oa辦公系統軟件 v2.0wts在線答題系統 v0.3.0html+js上傳圖片源碼下載 v1.0 免費版后臺整合包精簡版(servlet_dbc) v2.0jspgou網店系統 v6.1.1 店中店版echarts全彩種彩票網站源碼 v2.0全彩種彩票網站源碼 v2.0下載e鷹jsp新聞發布系統e鷹jsp新聞發布系統下載javashop 開源網店系統 v3.0 beta2 javashop 開源網店系統 v3.0 beta2 下載比較簡單的js日歷插件 網頁日歷 v1.01比較簡單的js日歷插件 網頁日歷 v1.01下載enews jsp 新聞發布系統 v1.0(jsp+mysql)enews jsp 新聞發布系統 v1.0(jsp+mysql)下載echarts v4.2.1 rc1 商業產品圖表庫echarts v4.2.1 rc1 商業產品圖表庫下載jsp視頻播客管理系統 v2.0 jsp視頻播客管理系統 v2.0 下載 projectforge 基于web的項目管理系統 v6.14.0 projectforge 基于web的項目管理系統 v6.14.0下載北雨jsp求職招聘系統 v2.5.2 北雨jsp求職招聘系統 v2.5.2 下載找不到分享碼?一起鼎oa辦公系統軟件 v2.0wts在線答題系統 v0.3.0html+js上傳圖片源碼下載 v1.0 免費版后臺整合包精簡版(servlet_dbc) v2.0jspgou網店系統 v6.1.1 店中店版angularjs web頁面框架 v8.0.0 rc3jpress v3.0 alpha.1 雙魚林jsp商品進銷存系統 v1.0angularjs web頁面框架 v7.2.16ember.js v3.17.1 開源javascript客戶端框架分享碼的獲取方法迅雷winrar v5整站系統社區論壇上傳下載投票調查數據管理jsp其它一起鼎oa辦公系統軟件 v2.0angularjs web頁面框架 v9.1.0ember.js v3.17.1 開源javascript客戶端框架jpress 開源精品模板 v3.2.0wts在線答題系統 v0.3.0ionic html5 開源移動應用框架 v5.0.0 beta5 angularjs web頁面框架 v7.2.16jpress v3.0 alpha.1html+js上傳圖片源碼下載 v1.0 免費版ember.js v3.11.0 beta2chrome
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.13333515.buzz All Rights Reserved
    3排列五开奖结果