JavaScript之ECharts用法講解

更新時(shí)間：2021年08月12日 08:27:55 作者：破繭重生ys

這篇文章主要介紹了JavaScript之ECharts用法講解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

前面做項(xiàng)目時(shí)用到ECharts，今天特此整理一下，作為筆記，同時(shí)希望幫助更多人。

首先簡單介紹一下，ECharts是一個(gè)純JavaScript圖表庫，底層依賴于輕量級的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了，效果圖如下。