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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.