JavaScript之ECharts用法講解
前面做項(xiàng)目時(shí)用到ECharts,今天特此整理一下,作為筆記,同時(shí)希望幫助更多人。
首先簡單介紹一下,ECharts是一個(gè)純JavaScript圖表庫,底層依賴于輕量級(jí)的Canvas類庫ZRender,基于BSD開原協(xié)議,是一款非常優(yōu)秀的可視化前端框架。
官網(wǎng)地址:http://echarts.baidu.com/
1.首先在官網(wǎng) 選擇合適的下載版本
http://echarts.baidu.com/download.html
2.引入Echarts
<script src="js/echarts.js"></script>
3.繪制一個(gè)簡單的圖表
準(zhǔn)備一個(gè)DOM容器
<div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>
4.創(chuàng)建一個(gè)簡單的雷達(dá)圖
<script type="text/javascript"> window.onload = function (){ //指定圖表的配置項(xiàng)和數(shù)據(jù) option = { //標(biāo)題 title: { text: '基礎(chǔ)雷達(dá)圖' }, tooltip: {}, legend: { data: ['預(yù)算分配(Allocated Budget)', '實(shí)際開銷(Actual Spending)'] }, radar: { // shape: 'circle', name: { textStyle: { color: '#fff', backgroundColor: '#999', borderRadius: 3, padding: [3, 5] } }, indicator: [ { name: '銷售(sales)', max: 6500}, { name: '管理(Administration)', max: 16000}, { name: '信息技術(shù)(Information Techology)', max: 30000}, { name: '客服(Customer Support)', max: 38000}, { name: '研發(fā)(Development)', max: 52000}, { name: '市場(Marketing)', max: 25000} ] }, series: [{ name: '預(yù)算 vs 開銷(Budget vs spending)', type: 'radar', // areaStyle: {normal: {}}, data : [ { value : [4300, 10000, 28000, 35000, 50000, 19000], name : '預(yù)算分配(Allocated Budget)' }, { value : [5000, 14000, 28000, 31000, 42000, 21000], name : '實(shí)際開銷(Actual Spending)' } ] }] }; //獲取dom容器 var myChart = echarts.init(document.getElementById('chartmain')); // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 myChart.setOption(option); } </script>
這樣一個(gè)簡單的雷達(dá)圖就ok了,下面看下效果圖
5.動(dòng)態(tài)的柱狀圖
- 還是創(chuàng)建一個(gè)裝ECharts的DOM容器
- 后臺(tái)返回?cái)?shù)據(jù)
- 前臺(tái)JavaScript代碼
<script type="text/javascript"> window.onload = function (){ //財(cái)務(wù)看年度的合同金額echart數(shù)據(jù)源 $.ajax({ url:'', type:'post', datatype:'json', success : function(data){ var partner = new Array();//公司名 for(var i=0;i<data.length;i++){ partner.push(data[i].partner); } var odata=[]; for(var i=0;i<data.length;i++){ var obj={}; obj.name=partner[i]; obj.type='bar'; obj.data=[data[i].qyearOne,data[i].qyearTwo,data[i].qyearThree,data[i].qyearFour,data[i].yearOne,data[i].yearTwo,data[i].yearThree,data[i].yearFour,data[i].hyearOne,data[i].hyearTwo,data[i].hyearThree,data[i].hyearFour]; obj.barWidth=30;//寬度 odata.push(obj); } option = { tooltip : { trigger: 'axis' }, legend: { data:partner }, toolbox: { show : true, }, calculable : true, xAxis : [{ type : 'category', data :[qyear+'Q1',qyear+'Q2',qyear+'Q3',qyear+'Q4',year+'Q1',year+'Q2',year+'Q3',year+'Q4',hyear+'Q1',hyear+'Q2',hyear+'Q3',hyear+'Q4'] }], yAxis : [{ type : 'value' }], series : odata //前臺(tái)組裝數(shù)據(jù) }; //獲取要賦值的DOM控件 var myChart = echarts.init(document.getElementById('chartmain')); //賦值 myChart.setOption(option); } }); </script>
這樣一個(gè)前后臺(tái)交互的柱狀圖就ok了,效果圖如下。
到此這篇關(guān)于JavaScript之ECharts用法講解的文章就介紹到這了,更多相關(guān)JavaScript之ECharts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于Cesium實(shí)現(xiàn)繪制圓形,正方形,多邊形,橢圓圖形標(biāo)注
這篇文章主要介紹了如何利用Cesium實(shí)現(xiàn)繪制圓形、正方形、多邊形、橢圓等形狀的圖形標(biāo)注,文中的示例代碼講解詳細(xì),需要的可以參考一下2022-06-06網(wǎng)絡(luò)圖片延遲加載實(shí)現(xiàn)代碼 超越j(luò)query控件
原理是分段加載圖片,主要用于大型網(wǎng)站節(jié)省帶寬,可是他們提供的東西壓縮混淆看不清,還有的要基于什么雅虎的什么庫,總之是很麻煩的,JQ的控件倒是夠清晰了,只是還是沒有達(dá)到節(jié)省網(wǎng)絡(luò)帶寬的效果2010-03-03使用JS實(shí)現(xiàn)圖片展示瀑布流效果(簡單實(shí)例)
下面小編就為大家?guī)硪黄褂肑S實(shí)現(xiàn)圖片展示瀑布流效果(簡單實(shí)例)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09純前端JavaScript實(shí)現(xiàn)Excel IO案例分享
這篇文章主要為大家詳細(xì)介紹了純前端JavaScript實(shí)現(xiàn)Excel IO案例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08JS實(shí)現(xiàn)控制圖片顯示大小的方法【圖片等比例縮放功能】
這篇文章主要介紹了JS實(shí)現(xiàn)控制圖片顯示大小的方法,即實(shí)現(xiàn)圖片等比例縮放功能,涉及JS動(dòng)態(tài)操作頁面元素屬性相關(guān)技巧,需要的朋友可以參考下2017-02-02javascript html5 canvas實(shí)現(xiàn)可拖動(dòng)省份的中國地圖
這篇文章主要介紹了javascript html5 canvas實(shí)現(xiàn)可拖動(dòng)省份的中國地圖的相關(guān)資料,需要的朋友可以參考下2016-03-03js實(shí)現(xiàn)的復(fù)制兼容chrome和IE
這篇文章主要介紹了js在chrome和IE下分別實(shí)現(xiàn)復(fù)制,需要的朋友可以參考下2014-04-04