| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="robots" content="noindex, nofollow"> |
| <title>ECharts2 ยท Start</title> |
| |
| <link rel="shortcut icon" href="./asset/ico/favicon.png"> |
| |
| <link href="./asset/css/font-awesome.min.css" rel="stylesheet"> |
| <link href="./asset/css/bootstrap.css" rel="stylesheet"> |
| <link href="./asset/css/carousel.css" rel="stylesheet"> |
| <link href="./asset/css/echartsHome.css" rel="stylesheet"> |
| <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> |
| <!--[if lt IE 9]> |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
| <![endif]--> |
| <script src="./asset/js/google-code-prettify.js"></script> |
| <link href="./asset/css/google-code-prettify.css" rel="stylesheet" /> |
| <link href="./asset/css/monokai.css" rel="stylesheet"> |
| <style type="text/css"> |
| .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover { |
| background-color:rgb(247, 247, 247); |
| font-weight: bolder; |
| } |
| .tab-content { |
| padding:20px; |
| border-left: 1px solid #dddddd; |
| border-right: 1px solid #dddddd; |
| border-top: 0px; |
| } |
| </style> |
| </head> |
| |
| <body onload="prettyPrint()"> |
| <!-- Fixed navbar --> |
| <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div> |
| |
| <div class="container"> |
| <h2 class="text-center">5 minutes to your first chart</h2> |
| <ul class="nav nav-tabs nav-justified"> |
| <li class="active"> |
| <a id = "o-aqi" href="#main0" data-toggle="tab">modular single file import (preferred)</a></li> |
| <li><a id = "o-pm25" href="#main1" data-toggle="tab">plain single file import</a></li> |
| </ul> |
| <div class="tab-content"> |
| <div class="tab-pane active" id="main0"> |
| <b class="title">1, Creat a echarts.html file. Prepare a Dom with size (width and height) for ECharts.</b> |
| <pre class="prettyprint"><xmp><!DOCTYPE html> |
| <head> |
| <meta charset="utf-8"> |
| <title>ECharts</title> |
| </head> |
| |
| <body> |
| <!-- Prepare a Dom with size (width and height) for ECharts --> |
| <div id="main" style="height:400px"></div> |
| </body></xmp></pre> |
| |
| <b class="title">2, Create a < script > tag to include echarts' core file, echarts.js. </ b></b> |
| <pre class="prettyprint"><xmp><!DOCTYPE html> |
| <head> |
| <meta charset="utf-8"> |
| <title>ECharts</title> |
| </head> |
| <body> |
| <!-- Prepare a Dom with size (width and height) for ECharts --> |
| <div id="main" style="height:400px"></div> |
| <!-- ECharts import --> |
| <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> |
| </body></xmp></pre> |
| |
| |
| <b class="title">3, Create a new < script > tag, configure for module loader a path of echarts and the chart you need (the relative path is to link from the current page to echarts.js). For imported chart file, refer to <a href="doc-en.html#Import-ECharts2" target="_blank">Import ECharts2</a></b> |
| <pre class="prettyprint"><xmp><!DOCTYPE html> |
| <head> |
| <meta charset="utf-8"> |
| <title>ECharts</title> |
| </head> |
| <body> |
| <!-- Prepare a Dom with size (width and height) for ECharts --> |
| <div id="main" style="height:400px"></div> |
| <!-- ECharts import --> |
| <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> |
| <script type="text/javascript"> |
| // configure for module loader |
| require.config({ |
| paths: { |
| echarts: 'http://echarts.baidu.com/build/dist' |
| } |
| }); |
| </script> |
| </body></xmp></pre> |
| |
| |
| <b class="title">4, Dynamically load echarts and the chart you need in the < script > tag. Use callback function to initialize and drive the generation of charts. For option, refer to <a href="doc-en.html#Option" target="_blank">API & Doc</a></b> |
| <pre class="prettyprint"><xmp><!DOCTYPE html> |
| <head> |
| <meta charset="utf-8"> |
| <title>ECharts</title> |
| </head> |
| <body> |
| <!-- Prepare a Dom with size (width and height) for ECharts --> |
| <div id="main" style="height:400px"></div> |
| <!-- ECharts import --> |
| <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> |
| <script type="text/javascript"> |
| // configure for module loader |
| require.config({ |
| paths: { |
| echarts: 'http://echarts.baidu.com/build/dist' |
| } |
| }); |
| |
| // use |
| require( |
| [ |
| 'echarts', |
| 'echarts/chart/bar' // require the specific chart type |
| ], |
| function (ec) { |
| // Initialize after dom ready |
| var myChart = ec.init(document.getElementById('main')); |
| |
| var option = { |
| tooltip: { |
| show: true |
| }, |
| legend: { |
| data:['Sales'] |
| }, |
| xAxis : [ |
| { |
| type : 'category', |
| data : ["Shirts", "Sweaters", "Chiffon Shirts", "Pants", "High Heels", "Socks"] |
| } |
| ], |
| yAxis : [ |
| { |
| type : 'value' |
| } |
| ], |
| series : [ |
| { |
| "name":"Sales", |
| "type":"bar", |
| "data":[5, 20, 40, 10, 10, 20] |
| } |
| ] |
| }; |
| |
| // Load data into the ECharts instance |
| myChart.setOption(option); |
| } |
| ); |
| </script> |
| </body></xmp></pre> |
| |
| |
| <b>5, Open echarts.html in the browser to see the following results.</b> |
| </div> |
| |
| <!------------------------------> |
| |
| <div class="tab-pane" id="main1"> |
| <b class="title">1, Creat a echarts.html file. Prepare a Dom with size (width and height) for ECharts.</b> |
| <pre class="prettyprint"><xmp><!DOCTYPE html> |
| <head> |
| <meta charset="utf-8"> |
| <title>ECharts</title> |
| </head> |
| <body> |
| <!-- Prepare a Dom with size (width and height) for ECharts --> |
| <div id="main" style="height:400px"></div> |
| </body></xmp></pre> |
| |
| |
| <b class="title">2, Create a < script > tag to import echarts-plain.js. For the imported chart file, refer to<a href="doc-en.html#Import-ECharts3" target="_blank">Import ECharts3</a></b> |
| <pre class="prettyprint"><xmp><!DOCTYPE html> |
| <head> |
| <meta charset="utf-8"> |
| <title>ECharts</title> |
| </head> |
| <body> |
| <!-- Prepare a Dom with size (width and height) for ECharts --> |
| <div id="main" style="height:400px"></div> |
| <!-- ECharts import --> |
| <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> |
| </body></xmp></pre> |
| |
| |
| <b class="title">3, Create a <script> tag. Use global variable echarts to initialize and drive the generation of charts. For option, refer to<a href="doc-en.html#Option" target="_blank">API & Doc</a></b> |
| <pre class="prettyprint"><xmp><!DOCTYPE html> |
| <head> |
| <meta charset="utf-8"> |
| <title>ECharts</title> |
| </head> |
| <body> |
| <!-- Prepare a Dom with size (width and height) for ECharts --> |
| <div id="main" style="height:400px"></div> |
| <!-- ECharts import --> |
| <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> |
| <script type="text/javascript"> |
| // Initialize after dom ready |
| var myChart = echarts.init(document.getElementById('main')); |
| |
| var option = { |
| tooltip: { |
| show: true |
| }, |
| legend: { |
| data:['Sales'] |
| }, |
| xAxis : [ |
| { |
| type : 'category', |
| data : ["Shirts", "Sweaters", "Chiffon Shirts", "Pants", "High Heels", "Socks"] |
| } |
| ], |
| yAxis : [ |
| { |
| type : 'value' |
| } |
| ], |
| series : [ |
| { |
| "name":"Sales", |
| "type":"bar", |
| "data":[5, 20, 40, 10, 10, 20] |
| } |
| ] |
| }; |
| |
| // Load data into the ECharts instance |
| myChart.setOption(option); |
| </script> |
| </body></xmp></pre> |
| |
| |
| <b>4, Open echarts.html in the browser to see the following results.</b> |
| </div> |
| |
| |
| </div> |
| <div id="main" style="height:400px;border: 1px solid #dddddd;border-top-width:0"></div> |
| |
| <div class="row" style="margin: 35px 0;"> |
| <h2>Best Reference Resource: Instances</h2> |
| <p>ECharts is a data-driven chart. Since your main concern is how to achieve that option, we offer you, right here on our official website, an extensive <a href="./doc-en.html">documentation</a> for your reference and over 100 ready-made <a href="./example-en.html">demos</a> with the most core option code that is free to edit online. For ECharts, play makes perfect; hope you enjoy playing here.</p> |
| </div> |
| </div> |
| <script src="../build/dist/echarts.js"></script> |
| |
| <script type="text/javascript"> |
| require.config({ |
| paths: { |
| echarts: '../build/dist' |
| } |
| }); |
| require( |
| [ |
| 'echarts', |
| 'echarts/chart/bar' |
| ], |
| function (ec) { |
| var myChart = ec.init(document.getElementById('main')); |
| myChart.setOption(option); |
| } |
| ); |
| var option = { |
| tooltip: { |
| show: true |
| }, |
| legend: { |
| data:['Sales'] |
| }, |
| xAxis : [ |
| { |
| type : 'category', |
| data : ["Shirts", "Sweaters", "Chiffon Shirts", "Pants", "High Heels", "Socks"] |
| } |
| ], |
| yAxis : [ |
| { |
| type : 'value' |
| } |
| ], |
| series : [ |
| { |
| "name":"Sales", |
| "type":"bar", |
| "data":[5,20,40,10,10,20] |
| } |
| ] |
| }; |
| </script> |
| |
| <footer id="footer"></footer> |
| <!-- Le javascript |
| ================================================== --> |
| <!-- Placed at the end of the document so the pages load faster --> |
| <script src="./asset/js/jquery.min.js"></script> |
| <script type="text/javascript" src="./asset/js/echartsHome.js"></script> |
| <script src="./asset/js/bootstrap.min.js"></script> |
| </body> |
| </html> |
