Example of using ECharts. js to draw a K-line chart, echarts. js

Example of using ECharts. js to draw a K-line chart, echarts. js

Preface

Recently, there is a statistical project to be done. The data at the front end needs to be displayed in charts. I searched the internet and found several statistical libraries.

MSChart

This is the built-in control in Visual Studio. It is easy to use, but the data must be bound in the background.

Ichartjs

Is an HTML5-based graphics library. Use the pure javascript language and the canvas label of html5. Supports pie chart, ring chart, line chart, Area Chart, column chart, and bar chart.

Chart. js

It is also an HTML5-Based Graphics Library similar to ichartjs. However, the tutorial document for Chart. js does not contain the details of ichartjs. However, it feels better to adapt to mobile than ichartjs.

ECharts. js

This is the graphic library I want to use in this project. It is also an HTML5-based graphic library. Creating a graph is also relatively simple. You can directly reference Javascript. There are three main reasons for using this library. One is because this library is a Baidu project and has been updated. The latest version is EChart 3; the second is that the project documentation of this database is relatively detailed, and each point is clearly stated. It is Chinese and easy to understand. The third point is that this database supports a wide range of images, in addition, you can directly switch the image to make it easy to use.

Preparations:

You need to introduce the echarts. js plug-in. We recommend that you select the source code version in the development environment. This version contains common warnings and error prompts.

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

Download the latest version: http://www.bkjia.com/codes/262041.html

More methods can refer to this article: http://www.bkjia.com/article/120902.htm

Below is the code, which is clearly annotated. It is mainly js Code, which can be added or deleted according to the project!

Configuration Description: http://echarts.baidu.com/option.html#title

Sample Code

<! DOCTYPE html> 
Running result:

Summary
The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.