JavaScript ECharts Usage Explanation

I used ECharts when doing a project before. Today I would like to organize it as a note and hope it can help more people.

First of all, let me briefly introduce that ECharts is a pure JavaScript chart library. The underlying layer relies on the lightweight Canvas library ZRender. It is based on the BSD open source protocol and is an excellent visualization front-end framework.

Official website address: http://echarts.baidu.com/

1. First, select the appropriate download version on the official website

http://echarts.baidu.com/download.html

2. Introducing Echarts

 <script src="js/echarts.js"></script>

3. Draw a simple chart

Prepare a DOM container

 <div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>

4. Create a simple radar chart

<script type="text/javascript">
window.onload = function (){
		//Specify the configuration items and data of the chart option = {
				//title	
			    title:
			        text: 'Basic radar chart'
			    },
			    tooltip: {},
			    legend: {
			        data: ['Allocated Budget', '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: 'Information Technology', max: 30000},
			           { name: 'Customer Support', max: 38000},
			           { name: 'Development', max: 52000},
			           { name: 'Marketing', max: 25000}
			        ]
			    },
			    series: [{
			        name: 'Budget vs spending',
			        type: 'radar',
			        // areaStyle: {normal: {}},
			        data : [
			            {
			                value : [4300, 10000, 28000, 35000, 50000, 19000],
			                name : 'Allocated Budget'
			            },
			             {
			                value : [5000, 14000, 28000, 31000, 42000, 21000],
			                name : 'Actual Spending'
			            }
			        ]
			    }]
			};
			//Get dom container var myChart = echarts.init(document.getElementById('chartmain'));
			// Display the chart using the configuration items and data just specified.
			myChart.setOption(option);
}
</script>

Such a simple radar chart is ok, let's take a look at the effect picture below

5. Dynamic bar chart

Or create a DOM container for ECharts
Backend returns data
Front-end JavaScript code

<script type="text/javascript">
 
 
  window.onload = function (){
	//Financial view of annual contract amount echart data source $.ajax({
		url:'',
		type:'post',
		datatype:'json',
		success : function(data){
			var partner = new Array(); //Company name 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;//width 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 // front-end assembly data };
                      //Get the DOM control to be assigned var myChart = echarts.init(document.getElementById('chartmain'));
                      //Assign value myChart.setOption(option);
		} 
	});
</script>

Such a bar chart of front-end and back-end interaction is ok, and the effect diagram is as follows.

This is the end of this article about the usage of ECharts in JavaScript. For more relevant content about ECharts in JavaScript, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: