Foreword
Echarts is a beautiful visualization tool, but the initial contact with many of my friends, do not know how to create a local HTML page that contains Echartst chart, this article will introduce the use of Echarts process in detail.
Use Process Steps
It is divided into three steps:
- Get API
- Introduced in the article
- Configuration related items
1, the API
Be in the official website of GitHub download: https://github.com/apache/incubator-echarts/releases/tag/4.1.0 .
After decompression inside a long way:
And we want to use Echarts comes from the folder 'dist', there are various versions Echarts, including the full version of the simple version, we use the full version of the file name is the Echarts.js.
2, the introduction of API
In the Head tag of the HTML document inside, plus a line of code like this:
<script type="text/javascript" src="echarts.js"></script>
src is the path echarts where my path is relative, that is, HTML documents and echarts in a folder, and is at the same level.
3, configuration-related items
- Determining a first container, to display the graph:
<div id='main'></div>
A set id, to make them easier
- Examples of the object to the inside the container echarts
var chart = echarts.init(document.getElementById('main'));配置
- Configuration options option:
option = {
backgroundColor:
title: ...
tooltip : ...
visualMap: ...
Series: ...
{
name: 'referrer',
type: 'PIE',
RADIUS: '55% ',
Center: ['50%', '50% '],
Data: [
{value : 335, name: 'direct access'},
{value: 310, name: 'email marketing'},
{value: 274, name: 'affiliate advertising'},
{value: 235, name: 'video ad'},
{value: 400, name: 'search engine'}
]
};
- The introduction of configuration items for the chart option
myChart.setOption(option);
4, learn how to use the tube Echarts official website
There are many examples on Echarts, but beginners do not know where to start, in fact, patiently look for it, the official online face has a configuration item, API, as shown below
Which involves js language, you need to have a certain foundation. I did not of itself come into contact with javascript relevant language, but to rely on self-study, basically reached a degree which can be any content localization Gallery. A little bit of progress, it will build up to the final breakthrough.