First chart of handwritten echarts on 5 minutes

Directory:

• Objective
• Brief introduction
• Method One: Introduction of modular Single file (recommended)
• Method Two: Label-type Single File introduction

"Preface"

Recently in a variety of plug-ins various frameworks, found that this echarts is still relatively good, the document is also quite full, or Chinese, to recommend you.

This article is a tutorial on the 0 Basic Primer echarts chart, so let's start with a brief introduction, and maybe some people don't know about it.

"Introduction"

Echarts, abbreviated from Enterprise Charts, business-grade data graph, a pure JavaScript chart library, can run smoothly on PC and mobile devices, compatible with most of the current browser (Ie6/7/8/9/10/11,chrome, Firefox,safari, etc.), the underlying reliance on the Lightweight Canvas class library Zrender provides intuitive, vivid, interactive, highly customizable data visualization charts. Innovative drag-and-drop computing, Data View, range roaming and other features greatly enhance the user experience, giving users the ability to dig and integrate data.

Support for line charts (area charts), Histogram (bar chart), scatter plot (bubble chart), candlestick chart, pie chart (doughnut chart), radar chart (fill radar), chord graph, Force guide layout, map, dashboard, funnel, event River diagram, etc. 12 types of charts, and provide the title, details Bubbles, legends, range, data region, 7 interactive components such as the timeline, toolbox, and more, support multi-chart, component linkage and mashup presentation.

Well, we are not the focus of the introduction ha, I will explain in detail the use of the report system, here do not do too much description, the following began to enter the topic: "5 minutes handwritten echarts the first chart."

"method One: Modular Single file introduction (recommended)"

1. Create a new echarts.html file to prepare a DOM with size (wide height) for echarts:

Create a new echarts.html file to prepare a DOM with size (wide height) for echarts

2. New <script> tags introduce modular single file echarts.js:

introduction of modular single files

3. New <script> tag to configure the echarts and desired chart path for the module loader (relative path to link to echarts.js from the current page):

Configure the path of the Echarts and required charts for the module loader

4. The <script> tag dynamically loads the Echarts and required charts, the callback function can initialize the chart and drive the chart generation:

dynamically loading echarts and required charts

5. Open ecarts.html in the browser, you can see the following effects:

"Method Two: Label-type Single file Introduction"

1. Create a new echarts.html file to prepare a DOM with size (wide height) for echarts.

Create a new echarts.html file. Prepare a DOM with size (wide height) for echarts

2. New <script> tags introduced echart-all.js.

introduction of Echarts-all.js

3. Create a new <script>, use global variables echarts to initialize the chart and drive the chart generation.

use global variables echarts to initialize charts and drive chart generation

4. Open echarts.html in the browser, you can see the following effect:

First chart of handwritten echarts on 5 minutes