» » ECharts, a pure Javascript charting library


ECharts, a pure Javascript charting library

Author: bamboo06 on 28-11-2016, 02:18, views: 3036

ECharts is a HTML5 Canvas, pure javascript-based charting library. It can run smoothly on PC and mobile devices, compatible with the current most browsers (IE8 / 9/10/11, Chrome, Firefox, Safari, etc.), providing intuitive, vivid, interactive, highly customizable Data Visualization Chart.

ECharts provides general line charts, histograms, scatter charts, pie charts, K charts, box charts for statistics, maps for geodata visualization, thermograms, line graphs, relational data visualization Treemap, parallel coordinates for multidimensional data visualization, funnel diagrams for BI, dashboards, and mashups between graphs and graphs.

Introduction of ECharts
The introduction is very simple, just like ordinary javascript library with the introduction of the same script tags.
<script src="echarts.min.js"></script> 

Draw a chart

In the body where the need to place a chart Prepare a highly div container, be sure to set a height.
<div id="myChart" style="width: 600px;height:400px;"></div> 

You can then initialize an echarts instance with the echarts.init method and generate a simple histogram using the setOption method.
// Initializes the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('myChart'));

// Specifies the configuration items and data for the chart
var option = {
	title: {
		text: 'Monthly sales statistics',
		left: 'center'
	tooltip: {},
	xAxis: {
		data: ["Shirt", "sweater", "chiffon shirt", "pants", "high heels", "socks"]
	yAxis: {},
	series: [{
		name: 'Sales',
		type: 'bar',
		data: [115, 220, 136, 100, 100, 60]

// Use the configuration item and data you just specified to display the chart.

After running the code, you can generate a histogram on the page. Next goocode will have more articles to illustrate the use of Echart chart with examples

Category: Javascript / HTML5 / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
Comment on the news site is possible only within (days) days from the date of publication.