Baidu echarts Knowledge Carding

Learn Echart from how to use Echart, interfaces,option and Echart to work on four aspects .

How to use:(Template project ) last week's Weibo user visualization is primarily a template project

1. Introduce a module loader,esl.js or require.js

2. prepare a Dom with a wide height for the echarts

3. Configure the Echart path for the module loader, and connect to the echarts.js to define the desired icon path.

Require.config ({

path:{

Echarts: './js/echarts ',

' Echarts/chart/bar ': './js/echarts ',

' Echarts/chart/line ': './js/echarts '

}});

4. Load echarts dynamically and then start using it in the callback function, whether it is a single file or a package ingestion requires an explicit load diagram on demand.

Require

[

' Echarts ',

' Echarts/chart/bar ',

' Echarts/chart/line '

],

Function (EC) {

var Dom=document.getelementbyid (' main ');

var mychart=ec.init (DOM);

var option={...} Copy option as a template?

mychart.setoption (option); })

(Non-template project )

1. Direct Script Tag Introduction

2. prepare a Dom with a wide height for the echarts

3.echarts and Zrender are written for direct use by the global interface

var mychart=echarts.init (document.getElementById (' main '));

Mychart.setoption ({

tooltip:{

Trigger: ' axis '

},

legend:{

data:[' evaporation ' , ' precipitation ' ]}

})，

4. Copy option when template

Interface:

Initialize (instantiate ) Unique interface method:init

after obtaining the Echarts interface through require , the graph can be instantiated by the Init method, and when the Init is executed, a DOM node with a size can be instantiated to instantiate the chart object, and theEcharts is implemented as a multi-instance. Multiple charts can be init on the same page multiple times .

Baidu echarts Knowledge Carding