Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
Charts是一款由百度前端技術(shù)部開(kāi)發(fā)的,基于Javascript的數(shù)據(jù)可視化圖表庫(kù),提供直觀,生動(dòng),可交互,可個(gè)性化定制的數(shù)據(jù)可視化圖表。
提供大量常用的數(shù)據(jù)可視化圖表,底層基于ZRender(一個(gè)全新的輕量級(jí)canvas類(lèi)庫(kù)),創(chuàng)建了坐標(biāo)系,圖例,提示,工具箱等基礎(chǔ)組件,并在此上構(gòu)建出折線圖(區(qū)域圖)、柱狀圖(條狀圖)、散點(diǎn)圖(氣泡圖)、餅圖(環(huán)形圖)、K線圖、地圖、力導(dǎo)向布局圖以及和弦圖,同時(shí)支持任意維度的堆積和多圖表混合展現(xiàn)。
特色
推薦翻閱這份在線文檔 《 Why ECharts ? 》,從中可以更直觀的體驗(yàn)到ECharts的特性以及快速瀏覽到所有圖表類(lèi)型。
*文檔中展現(xiàn)的個(gè)別特性在IE8-中并沒(méi)有得到支持,所以建議使用IE9+、chrome、safari、firefox或opear等瀏覽器閱讀這份文檔。
混搭
拖拽重計(jì)算
數(shù)據(jù)視圖
動(dòng)態(tài)類(lèi)型切換
圖例開(kāi)關(guān)
數(shù)據(jù)區(qū)域選擇
多圖聯(lián)動(dòng)
值域漫游
炫光特效
大規(guī)模散點(diǎn)圖
子區(qū)域地圖模式
GeoJson地圖擴(kuò)展
標(biāo)線輔助
多維度堆積
百搭時(shí)間軸
個(gè)性化定制
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、數(shù)據(jù)源
數(shù)據(jù)源格式如下圖,每一行為各地的GDP及三產(chǎn)業(yè)數(shù)據(jù),A列作為輔助區(qū)域(由C列和B列合并而成)。
二、制作選擇器
以地區(qū)作為篩選字段。
1、插入數(shù)據(jù)透視表
選擇數(shù)據(jù)源A:G列,插入數(shù)據(jù)透視表到新工作表的P1單元格。將[地區(qū)]字段拖拽到[行區(qū)域]。再隱藏數(shù)據(jù)透視表的字段標(biāo)題、禁用行和列的總計(jì)。
2、設(shè)置選擇器
在菜單欄[開(kāi)發(fā)工具]的[插入]命令中選擇[列表框]控件,在單元格L8畫(huà)出一個(gè)列表框。
用鼠標(biāo)右鍵單擊列表框,在彈出的快捷菜單單擊[設(shè)置控件格式(F)],進(jìn)入[設(shè)置對(duì)象格式]對(duì)話框,將[數(shù)據(jù)源區(qū)域]設(shè)置為數(shù)據(jù)透視表所在的區(qū)域P1:P32,將[單元格鏈接]設(shè)置為存放選擇結(jié)果的單元格N2,單擊[確定]按鈕。
三、數(shù)據(jù)輔助區(qū)域
1、年份
第一行為年份,在K1單元格輸入最近的年份后,其他左側(cè)單元格自動(dòng)依次遞減。
在J1單元格輸入公式:=K1-1。并將公式復(fù)制到B1:I1區(qū)域。
2、地區(qū)(省份)
根據(jù)選擇結(jié)果(N2單元格),將地區(qū)引用到A1單元格。則在A1單元格輸入公式:=INDEX(P1:P32,N2)。
3、按條件提取數(shù)據(jù)
在B2單元格輸入公式:=VLOOKUP(B&$A1,各省GDP!$A:$D,4,0),并將公式復(fù)制到C2:K2數(shù)據(jù)區(qū)域。將選定區(qū)域?qū)?yīng)年份的數(shù)據(jù)提取到輔助區(qū)域。
在A4單元格分別輸入第三產(chǎn)業(yè)。在其右側(cè)單元格輸入公式。
在B4單元格輸入公式:=VLOOKUP(B&$A,各省GDP!$A:$G,7,0)
再將B4:B4數(shù)據(jù)區(qū)域的公式復(fù)制到C4:K4,將選定區(qū)域?qū)?yīng)年份第三產(chǎn)業(yè)數(shù)據(jù)提取到輔助區(qū)域。
在B3單元格輸入公式:=B4/B2,并將公式復(fù)制到C3:K3,計(jì)算出第三產(chǎn)業(yè)占比。
四、制作圖表
1、插入折線圖(按年趨勢(shì)圖)
選中A2:K3數(shù)據(jù)區(qū)域,插入[帶數(shù)據(jù)標(biāo)記的折線圖],[水平(分類(lèi))軸標(biāo)簽]選擇B1:K1數(shù)據(jù)區(qū)域。
將系列[GDP]設(shè)置為[次坐標(biāo)軸]。
2、設(shè)置圖表格式:
①圖表名稱(chēng)=A1單元格;
②主坐標(biāo)軸最小值設(shè)置為0,最大值設(shè)置為1;
③圖例靠上顯示,與圖表重疊。
五、導(dǎo)出圖表(VBA)
通過(guò)VBA編寫(xiě)代碼循環(huán)改變區(qū)域,實(shí)現(xiàn)對(duì)數(shù)據(jù)的動(dòng)態(tài)引用,并將圖表導(dǎo)出到文件夾。
1、參數(shù)區(qū)域
將N7單元格作為參數(shù)區(qū)域,通過(guò)更改參數(shù),可以設(shè)置圖表導(dǎo)出的文件夾。
2、VBA代碼
新建export_chart4模塊,鍵入以下代碼。
3、制作按鈕
在菜單欄[開(kāi)發(fā)工具]的[插入]命令中選擇[按鈕]控件,在N11單元格插入一個(gè)按鈕,命名為[導(dǎo)出圖表],并指定宏為export_chart4。
4、導(dǎo)出圖表
點(diǎn)擊[導(dǎo)出圖表]按鈕將圖表導(dǎo)出的文件夾。
六、Web頁(yè)面(html)
1、html代碼
在存放圖片文件夾的上一級(jí)文件夾中新建show.html文檔,用編程軟件(比如Visual Studio Code)打開(kāi),鍵入以下代碼。
2、本地網(wǎng)頁(yè)演示
在show.html文檔所在文件夾,直接打開(kāi)網(wǎng)頁(yè)。
3、手機(jī)網(wǎng)頁(yè)演示
如果電腦裝了網(wǎng)絡(luò)服務(wù)器,可以在同一局域網(wǎng)的電腦或手機(jī)中,打開(kāi)瀏覽器輸入網(wǎng)址打開(kāi)網(wǎng)頁(yè),就能看到動(dòng)態(tài)圖表滾動(dòng)顯示。
注本頭條號(hào),專(zhuān)注做前端。
關(guān)于圖表的制作,有很多主流的插件比如highchart.js,echart.js等等,下面要分享的是基于jquery+css3來(lái)完成的簡(jiǎn)易的圖表效果,代碼量很少,適用于僅僅是簡(jiǎn)單展示的項(xiàng)目中。
//
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。