| (window.webpackJsonp=window.webpackJsonp||[]).push([[63],{357:function(t,e,n){"use strict";n.r(e),e.default="# Get Started\n\n## Getting Apache ECharts\n\nApache ECharts supports several download methods, which are further explained in the next tutorial [Installation](${lang}/basics/download). Here, we take the example of getting it from the [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) CDN and explain how to install it quickly.\n\nAt [https://www.jsdelivr.com/package/npm/echarts](https://www.jsdelivr.com/package/npm/echarts) select `dist/echarts.js`, click and save it as `echarts.js` file.\n\n> More information about these files can be found in the next tutorial [Installation](${lang}/basics/download).\n\n## Including ECharts\n\nCreate a new `index.html` file in the directory where you just saved `echarts.js`, with the following content:\n\n```html\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n \x3c!-- Include the ECharts file you just downloaded --\x3e\n <script src=\"echarts.js\"><\/script>\n </head>\n</html>\n```\n\nWhen you open this `index.html`, you will see an empty page. But don't worry. Open the console and make sure that no error message is reported, then you can proceed to the next step.\n\n## Plotting a Simple Chart\n\nBefore drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the `</head>` tag introduced earlier.\n\n```html\n<body>\n <! -- Prepare a DOM with a defined width and height for ECharts --\x3e\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n</body>\n```\n\nThen you can initialize an echarts instance with the [echarts.init](${mainSitePath}/api.html#echarts.init) method and set the echarts instance with [setOption](${mainSitePath}/api.html# echartsInstance.setOption) method to generate a simple bar chart。 Here is the complete code.\n\n```html\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <title>ECharts</title>\n \x3c!-- Include the ECharts file you just downloaded --\x3e\n <script src=\"echarts.min.js\"><\/script>\n </head>\n <body>\n \x3c!-- Prepare a DOM with a defined width and height for ECharts --\x3e\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n <script type=\"text/javascript\">\n // Initialize the echarts instance based on the prepared dom\n var myChart = echarts.init(document.getElementById('main'));\n\n // Specify the configuration items and data for the chart\n var option = {\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n legend: {\n data: ['sales']\n },\n xAxis: {\n data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n // Display the chart using the configuration items and data just specified.\n myChart.setOption(option);\n <\/script>\n </body>\n</html>\n```\n\nAnd this is your first chart with Apache ECharts!\n\n<md-example src=\"doc-example/getting-started&reset=1&edit=1\"></md-example>\n"}}]); |