Echarts分享經(jīng)典課件

Echarts3分享Echarts簡單介紹1.ECharts，一個純Javascript的圖表庫，依賴輕量級的Canvas類庫

ZRender。2.兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等）。3.它提供了折線圖、柱狀圖、餅圖、散點圖、地圖、雷達圖、K線圖、箱線圖、熱力圖、關(guān)系圖、矩形樹圖、平行坐標、?；鶊D、漏斗圖、儀表盤15中圖表。Echarts下載方式Echarts有三種下載方式。（1）.第一種普通下載。（這種方式下載下來的Echarts圖表庫所有內(nèi)容都放在一個.js后綴名的文件里面）（2）第二種是自定義在線構(gòu)建下載。（這種方式下載下來的Echarts圖表庫所有內(nèi)容都放在一個.js后綴名的文件里面）選擇圖表。選擇坐標系。選擇組件。選擇是否支持IE8。以上選擇完成后，有一個可點擊的按鈕，就可以在線生成Echarts庫。（3）第三種是模塊化源碼下載。每個組件都是一個.js后綴名的文件。需要下載Echarts庫源碼以及一個canvas類庫源碼。Echarts庫根目錄。

Canvas類庫zrender根目錄。接下來就是配置圖表所需要的內(nèi)容。最后顯示圖表。完成以上代碼配置，然后最簡單的一個柱狀圖就配置完成了。所有的Josn組件都可以用屬性show:true/false來顯示隱藏，默認情況下是顯示的，如果不需要這個組件可以隱藏。Title：標題組件，包含了主標題和副標題。Legend：圖例組件。Tooltip：提示框組件。xAxis：坐標系X軸。yAxis：坐標系Y軸。Series：系列列表。最重要的通過type顯示圖表的類型。下面是15種圖表的類型。餅圖series配置name:'訪問來源',type:'pie',//roseType:'radius',//南丁格爾圖radiusarearadius:'50%',center:['50%','60%'],label:{餅圖圖形上的文本標簽

normal:{

show:true, //position:'outside',//outside(半徑模式)inside(面積模式)

formatter:":{c}(mk88ikk%)",

}, },data:[ {value:335,name:'直接訪問'},{value:310,name:'郵件營銷'},{value:234,name:'聯(lián)盟廣告'},{value:135,name:'視頻廣告'},{value:1548,name:'搜索引擎'},{value:400,name:'1'},{value:500,name:'2'},{value:1200,name:'3'},{value:900,name:'4'} ],這是一個半徑顯示方式的南丁格爾圖。toolbox:{show:true,feature:{restore:{show:true},saveAsImage:{show:true}}},Toolbox:工具組件左邊是半徑模式，右邊是面積模式。radius:[20,80],radius:餅圖的半徑，可以是數(shù)組也可以是單個值。漏斗圖series配置name:'漏斗圖',type:'funnel',gap:3,//數(shù)據(jù)圖形間距sort:'inside',//ascendinglabel:{normal:{position:'inside'//ascending}},data:[

{value:60,name:'訪問'},

{value:40,name:'咨詢'},

{value:20,name:'訂單'},

{value:80,name:'點擊'},

{value:100,name:'展現(xiàn)'}],

（2）第二種模塊化引用。require(['echarts',

引入Echarts主模塊'echarts/chart/gauge',

引入儀表盤圖'echarts/component/title',

引入標題組件'echarts/component/tooltip'

引入提示框組件'echarts/component/legend',

引入圖例組件]）,儀表盤series:[{name:'業(yè)務(wù)指標',type:'gauge',radius:'75%',detail:{formatter:'{value}%'},//詳情data:[{value:78,name:'完成率'}],title:{offsetCenter:[0,'70%']}}雷達圖radar:{雷達圖坐標組件indicator:[雷達圖指示器{text:'銷售（sales）',max:6500},{text:'管理（Administration）',max:16000},{text:'信息技術(shù)（InformationTechology）',max:30000},{text:'客服（CustomerSupport）',max:38000},{text:'研發(fā)（Development）',max:52000},{text:'市場（Marketing）',max:25000}]},series:[{name:'預算vs開銷（Budgetvsspending）',type:'radar',data:[{value:[4300,10000,28000,35000,50000,19000],name:'預算分配（AllocatedBudget）'},{value:[5000,14000,28000,31000,42000,21000],name:'實際開銷（ActualSpending）'}]}]折線圖title:{text:'折線圖堆疊'},tooltip:{trigger:'axis'},觸發(fā)類型legend:{data:['郵件營銷','聯(lián)盟廣告','視頻廣告','直接訪問','搜索引擎']},grid:{left:'3%',right:'4%',bottom:'3%',containLabel:true},設(shè)置網(wǎng)格toolbox:{feature:{saveAsImage:{}}},series:[{name:'郵件營銷',type:'line',stack:'總量',data:[120,132,101,134,90,230,210]},{name:'聯(lián)盟廣告',type:'line',stack:'總量',data:[220,182,191,234,290,330,310]},{name:'視頻廣告',type:'line',stack:'總量',data:[150,232,201,154,190,330,410]}