項目5智慧農(nóng)業(yè)大屏ECharts圖表插入項目5智慧農(nóng)業(yè)大屏ECharts圖表插入主講人：邵佳靚項目描述ECharts為商業(yè)級數(shù)據(jù)圖表，是一款開源、免費的可視化圖表工具。項目描述本項目使用ECharts繪制各式各樣的可視化圖表，完成智慧農(nóng)業(yè)大屏中的經(jīng)濟作物餅圖、費用支出占比環(huán)形圖、經(jīng)濟作物產(chǎn)值柱狀圖、組織農(nóng)戶技術(shù)培訓(xùn)折線圖、地區(qū)合作單位業(yè)務(wù)地圖等內(nèi)容的展示。項目5:智慧農(nóng)業(yè)大屏ECharts圖表插入5.1ECharts操作基礎(chǔ)流程任務(wù)準(zhǔn)備任務(wù)實施任務(wù)拓展ECharts是一款開源、免費的商業(yè)級數(shù)據(jù)可視化圖表工具，僅用JavaScript編寫，兼容多種瀏覽器，底層依賴輕量級Canvas類庫ZRender。它提供直觀、生動、可交互且高度可定制化的圖表，創(chuàng)新的數(shù)據(jù)視圖和值域漫游功能增強了用戶體驗，支持數(shù)據(jù)挖掘和整合，適用于PC和移動設(shè)備。5.1.1第一個ECharts實例1.ECharts簡介5.1.1第一個ECharts實例下載ECharts的JavaScript文件。01將下載的JavaScript文件引入HTML頁面。02在HTML頁面中創(chuàng)建一個用于展示圖表的div元素。03使用ECharts提供的初始化方法初始化圖表，并指定要展示的數(shù)據(jù)和配置項。042.ECharts安裝步驟5.1.1第一個ECharts實例3.ECharts的入門使用引入Echarts庫（網(wǎng)頁）準(zhǔn)備一個呈現(xiàn)圖表的DOM容器通過echarts.init方法初始化一個echarts實例準(zhǔn)備配置項將配置項設(shè)置給echarts實例對象引入準(zhǔn)備設(shè)置要制作一個ECharts的圖表的基本步驟包括：獲取ECharts庫→引入ECharts庫→準(zhǔn)備一個具備高度的DOM容器→通過echarts.init方法初始化一個ECharts實例→通過setOption方法生成圖表。5.1.2基礎(chǔ)配置介紹圖表中的專有名詞配置項手冊基礎(chǔ)配置舉例xAxis：x軸yAxis：y軸Series：系列列表在ECharts官網(wǎng)中有詳細教程以及API，因為ECharts圖表有自己的一套屬性，因此需要什么效果就得去遵守它的屬性，只有識別圖表的各個部分的專業(yè)名稱，才能從它API中獲取相應(yīng)屬性從而實現(xiàn)想要的效果。項目5:智慧農(nóng)業(yè)大屏ECharts圖表插入5.2ECharts常用圖表任務(wù)準(zhǔn)備任務(wù)實施任務(wù)拓展5.2ECharts常用圖表5.2.1：繪制柱狀圖5.2.2：繪制折線圖5.2.3：繪制餅圖5.2.4：繪制散點圖5.2.5：繪制儀表盤5.2.6：繪制雷達圖本節(jié)目標(biāo)5.2.1繪制柱狀圖常見效果設(shè)置markPoint：標(biāo)記最大值和最小值markLine：平均值標(biāo)志線label：顯示數(shù)值信息barWidth：柱形圖的寬度橫向柱狀圖更改x軸和y軸角色設(shè)置series的type屬性值為bar5.2.2繪制折線圖常見效果設(shè)置markPoint：標(biāo)記最大值和最小值markLine：平均值標(biāo)志線markArea：標(biāo)注特定區(qū)間Smooth：控制線條是否平滑lineStyle：設(shè)置線條樣式areaStyle：設(shè)置填充風(fēng)格boundaryGap：控制數(shù)據(jù)點是否緊挨坐標(biāo)軸邊緣設(shè)置series的type屬性值為line5.2.2繪制折線圖1.脫離0值比例僅在數(shù)值軸（type:'value'）中生效設(shè)置scale屬性值為true坐標(biāo)刻度將不會強制包含零刻度5.2.2繪制折線圖2.堆疊圖同個類目軸上的series配置相同的stack屬性值后一個series的值會在前一個series的值上相加5.2.3繪制餅圖基礎(chǔ)設(shè)置數(shù)據(jù)是由name和value組成的字典所形成的數(shù)組無須配置xAxis和yAxis設(shè)置series的type屬性值為pie圓環(huán)圖設(shè)置radius屬性為一個包含兩個元素的數(shù)組，分別代表圓環(huán)的內(nèi)半徑和外半徑。5.2.3繪制餅圖常見效果設(shè)置label.show：顯示文字label.formatter：定義文字的格式化方式selectedMode：設(shè)置選中模式selectedOffset：設(shè)置選中扇區(qū)的偏移距離roseType：設(shè)置為‘radius’

顯示南丁格爾圖（玫瑰圖）5.2.4繪制散點圖常見效果設(shè)置symbolSize：散點的大小itemStyle.color：散點的顏色rippleEffect：設(shè)置漣漪動畫的大小showEffectOn：控制漣漪動畫產(chǎn)生的時間,屬性值可設(shè)置為render（持續(xù)漣漪動畫）和emphasis（指針移動顯示漣漪動畫）設(shè)置series的type屬性值為scatter或effectScatter（可以產(chǎn)生漣漪動畫效果）5.2.5繪制儀表盤常見效果設(shè)置max：最大值min：最小值data：指針數(shù)據(jù)，數(shù)組中設(shè)置多個元素可顯示多個指針temStyle：設(shè)置不同指針的顏色設(shè)置series的type屬性值為gauge5.2.6繪制雷達圖常見效果設(shè)置label：顯示數(shù)值areaStyle：設(shè)置區(qū)域面積的樣式shape：雷達圖的繪制類型，值為‘polygon‘表示多邊形，'circle‘表示圓形設(shè)置series的type屬性值為radar項目5:智慧農(nóng)業(yè)大屏ECharts圖表插入5.3ECharts圖表配置項任務(wù)準(zhǔn)備任務(wù)實施任務(wù)拓展5.3.1直角坐標(biāo)系網(wǎng)格及坐標(biāo)軸1.網(wǎng)格（grid）（1）顯示grid show:true（2）grid的邊框

borderWidth:10（3）grid的位置和大小

lefttoprightbottomwidthheightgrid是用來控制直角坐標(biāo)系的布局和大小,x軸和y軸就是在grid的基礎(chǔ)上進行繪制的。5.3.1直角坐標(biāo)系網(wǎng)格及坐標(biāo)軸2.坐標(biāo)軸坐標(biāo)軸類型typevalue:數(shù)值軸,自動會從目標(biāo)數(shù)據(jù)中讀取數(shù)據(jù)category:類目軸,該類型必須通過data設(shè)置類目數(shù)據(jù)坐標(biāo)軸位置positionxAxis:可取值為top或者bottomyAxis:可取值為left或者right坐標(biāo)軸分為x軸和y軸，一個grid中最多有兩種位置的x軸和y軸。5.3.1直角坐標(biāo)系網(wǎng)格及坐標(biāo)軸3.區(qū)域縮放（dataZoom）區(qū)域縮放類型typeslider:滑塊inside:內(nèi)置,依靠鼠標(biāo)滾輪或者雙指縮指定控制軸xAxisIndex，yAxisIndex定義初始顯示范圍start，enddataZoom用于區(qū)域縮放,對數(shù)據(jù)范圍過濾,x軸和y軸都可以擁有。dataZoom是一個數(shù)組,意味著可以配置多個區(qū)域縮放器。5.3.2標(biāo)題與圖例1．標(biāo)題（title）文字樣式

textStyle標(biāo)題邊框

borderWidth、borderColor、borderRadius標(biāo)題位置

left、top、right、bottom5.3.2標(biāo)題與圖例2．圖例（legend）legend為圖例，用于篩選類別，需要和series配合使用。legend中的data是一個數(shù)組，且data數(shù)組的值需要與series中某組數(shù)據(jù)的name屬性值一致。legend為圖例，用于篩選類別，需要和series配合使用。legend中的data是一個數(shù)組，且data數(shù)組的值需要與series中某組數(shù)據(jù)的name屬性值一致。5.3.3工具欄toolbox是ECharts提供的工具欄，內(nèi)置導(dǎo)出圖片、數(shù)據(jù)視圖、重置、數(shù)據(jù)區(qū)域縮放、動態(tài)類型切換5個工具。工具欄的按鈕配置在feature節(jié)點之下。5.3.4主題添加1.默認主題ECharts中默認內(nèi)置兩套主題：light和dark。主題可以在初始化對象方法init()中可以指定。5.3.4主題添加2.自定義主題在主題編輯器中編輯主題定義主題中的基本配置、視覺映射、坐標(biāo)軸、圖例、工具欄、提示框、時間軸、數(shù)據(jù)縮放、折線圖、K線圖、力導(dǎo)圖等等。第一步第二步下載主題5.3.4主題添加2.自定義主題第三步第四步引入主題的js文件<scriptsrc="js/echarts.min.js"></script><scriptsrc="js/itcast.js"></script>其中的itcast.js文件為下載的主題文件。在init()方法中指定主題項目5:智慧農(nóng)業(yè)大屏ECharts圖表插入任務(wù)實施1在智慧農(nóng)業(yè)大屏中繪制“經(jīng)濟作物產(chǎn)值”柱狀圖任務(wù)準(zhǔn)備任務(wù)實施任務(wù)拓展任務(wù)實施5.1在智慧農(nóng)業(yè)大屏中繪制“經(jīng)濟作物產(chǎn)值”柱狀圖本任務(wù)主要分析“經(jīng)濟作物產(chǎn)值”的相關(guān)數(shù)據(jù)，并將其構(gòu)造為JSON數(shù)據(jù)的數(shù)組結(jié)構(gòu)，在智慧農(nóng)業(yè)大屏實現(xiàn)“經(jīng)濟作物產(chǎn)值”模塊中柱狀圖的展示。。本節(jié)目標(biāo)項目5:智慧農(nóng)業(yè)大屏ECharts圖表插入任務(wù)實施2在智慧農(nóng)業(yè)大屏中繪制“組織農(nóng)戶技術(shù)培訓(xùn)”折線圖任務(wù)準(zhǔn)備任務(wù)實施任務(wù)拓展任務(wù)實施5.2在智慧農(nóng)業(yè)大屏中繪制“組織農(nóng)戶技術(shù)培訓(xùn)”折線圖本任務(wù)主要分析“組織農(nóng)戶技術(shù)培訓(xùn)”的相關(guān)數(shù)據(jù)，并將其構(gòu)造為JSON數(shù)據(jù)的數(shù)組結(jié)構(gòu)，在智慧農(nóng)業(yè)大屏中實現(xiàn)“組織農(nóng)戶技術(shù)培訓(xùn)”模塊中折線圖的展示。本節(jié)目標(biāo)項目5:智慧農(nóng)業(yè)大屏ECharts圖表插入任務(wù)實施3在智慧農(nóng)業(yè)大屏中繪制“種植面積占比”餅圖任務(wù)準(zhǔn)備任務(wù)實施任務(wù)拓展任務(wù)實施5.3在智慧農(nóng)業(yè)大屏中繪制“經(jīng)濟作物種植面積占比”餅圖本任務(wù)主要分析“經(jīng)濟作物種植面積占比”的相關(guān)數(shù)據(jù)，并將其構(gòu)造為JSON數(shù)據(jù)的數(shù)組結(jié)構(gòu)，在智慧農(nóng)業(yè)大屏中實現(xiàn)“經(jīng)濟作物種植面積占比”模塊中餅圖的展示。本節(jié)目標(biāo)項目5:智慧農(nóng)業(yè)大屏ECharts圖表插入任務(wù)實施4在智慧農(nóng)業(yè)大屏中繪制“費用支出占比”環(huán)形圖任務(wù)準(zhǔn)備任務(wù)實施任務(wù)拓展任務(wù)實施5.4在智慧農(nóng)業(yè)大屏中繪制“費用支出占比”環(huán)形圖本任務(wù)主要分析“費用支出”的相關(guān)數(shù)據(jù)，并將其構(gòu)造為JSON數(shù)據(jù)的數(shù)組結(jié)構(gòu)，在智慧農(nóng)業(yè)大屏中實現(xiàn)“費用支出”模塊中環(huán)形圖的展示。本節(jié)目標(biāo)項目5:智慧農(nóng)業(yè)大屏ECharts圖表插入任務(wù)實施5在智慧農(nóng)業(yè)大屏中繪制“地區(qū)合作單位業(yè)務(wù)”地圖任務(wù)準(zhǔn)備任務(wù)實施任務(wù)拓展任務(wù)實施5.5在智慧農(nóng)業(yè)大屏中繪制“地區(qū)合作單位業(yè)務(wù)”地圖本任務(wù)主要分析