First, modular Single file introduction
1. Prepare a DOM with size (wide height) for echarts (which can be dynamically generated, of course)
<div id= "main" style= "height:400px;" ></div>
2. Introducing the Echarts Master file via the script tag
<script src= "./js/echarts.js" ></script>
3. Configure the Echarts path for the module loader, link to the Echarts.js directory from the current page, see the instructions above
require.config ({ paths: { './js/dist'} });4. Dynamically load the echarts and the desired chart and then start using it in the callback function (let me say, when you make sure that the same page has been loaded echarts, and then use it directly require (' Echarts '). Init (DOM) on the line)
require ( [ ' echarts ', ' Echarts/chart/line ', // loading the required charts on demand, For dynamic type switching, do not forget to load the corresponding chart ' Echarts/chart/bar ' at the same time ,function (EC) { var mychart = Ec.init (document.getElementById (' main ')); var option = { ... } mychart.setoption (option); } );Second, the label-type single File introduction
Srcipt tags introduced into the echarts will be able to directly use the two global namespaces: Echarts,zrender, can refer to the Echarts tag-type introduction, It is important to note that Excanvas relies on the body tag to insert the canvas node to determine the support of the canvas, if you put the Echarts script tag placed in the head inside the ie8-browser will appear error, the solution is to move the tag into the body:
// From echarts example<body> <div id= "main" style= "height:400px;" ></div> ... <script src= "Example/www2/js/dist/echarts-all.js" ></script> <script> var MyChart = Echarts.init (document.getElementById (' main ')); var option = { ... } mychart.setoption (option); </script></body>Three, the need to pay attention to the place
Bind event: Event naming is mounted uniformly to require (' echarts/config '). EVENT (non-modular to Echarts.config.EVENT)
1. Introduction of modular Single File
var ecconfig=require (' echarts/config '); Mychart.on (EcConfig.EVENT.CLICK,function (e) {//...} );
2. Label-type Single File introduction
function (e) { //...});Echarts Learning experience 1---Modular single-file introduction and tabbed single-file introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
