{"id":1143,"date":"2021-01-03T20:13:48","date_gmt":"2021-01-03T20:13:48","guid":{"rendered":"http:\/\/feellikelearning.com\/?p=1143"},"modified":"2021-01-03T21:03:12","modified_gmt":"2021-01-03T21:03:12","slug":"echarts-quick-tutorial","status":"publish","type":"post","link":"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/","title":{"rendered":"ECharts\u5feb\u901f\u4e0a\u624b"},"content":{"rendered":"\n<p>\u524d\u6bb5\u4e00\u76f4\u662f\u6211\u7684\u77ed\u677f, \u6ca1\u6709\u592a\u591a\u673a\u4f1a\u7cfb\u7edf\u5b66\u4e60. \u6700\u8fd1\u60f3\u505a\u4e00\u4e2a\u80a1\u7968\u5206\u6790\u7cfb\u7edf\u7684webapp, \u4e8e\u662f\u5c31\u5728\u7f51\u4e0a\u627e\u5408\u9002\u7684javascript library\u505adata visualization. D3.js\u4ee5\u524d\u7528\u8fc7, \u89c9\u5f97\u592a\u8fc7\u5e95\u5c42, \u5199\u8d77\u6765\u592a\u9ebb\u70e6. \u4e8e\u662f\u53d1\u73b0\u4e86ECharts, \u597d\u50cf\u662f\u56fd\u5185\u5927\u795e\u5199\u5f97, \u5df2\u7ecf\u662fApache project, \u975e\u5e38\u5389\u5bb3. \u4e8e\u662ffollow\u4e86\u8fd9\u4e2a<a href=\"https:\/\/echarts.apache.org\/next\/en\/tutorial.html#Get%20Started%20with%20ECharts%20in%205%20minutes\">tutorial<\/a>.  \u91cc\u9762\u6709\u4e9b\u5c0f\u7ec6\u8282\u6211\u89c9\u5f97\u521d\u5b66\u8005\u53ef\u80fd\u4f1a\u5361\u4f4f, \u8fd9\u91cc\u6211\u5199\u5f97\u8be6\u7ec6\u4e00\u70b9. <\/p>\n\n\n\n<h2>\u5b89\u88c5npm<\/h2>\n\n\n\n<p>npm\u662fnode package manager\u7684\u610f\u601d, \u662f\u7528\u4e86\u7ba1\u7406\u5b89\u88c5javascript libraries\u7684. \u76f8\u5f53\u4e8ePython\u91cc\u7684pip. \u5b89\u88c5\u53ef\u4ee5\u770b\u6211\u524d\u9762\u7684<a href=\"http:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/cn-how-to-install-nodejs-and-npm-on-macos\/\">\u6587\u7ae0<\/a>. <\/p>\n\n\n\n<h2>\u5b89\u88c5ECharts<\/h2>\n\n\n\n<p>\u9996\u5148\u7ed9\u9879\u76ee\u5efa\u7acb\u4e00\u4e2a\u65b0\u7684directory<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>% mkdir test_echart\n% cd test_echart<\/code><\/pre>\n\n\n\n<p>\u5728\u9879\u76eedirectory\u91cc\u5b89\u88c5echarts library<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install echarts --save<\/code><\/pre>\n\n\n\n<p>\u5b8c\u6210\u540edirectory\u91cc\u4f1a\u6709\u90a3\u4e48\u51e0\u4e2a\u4e1c\u897f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>% ls\npackage-lock.json\nnode_modules\/\t\tpackage.json<\/code><\/pre>\n\n\n\n<h2>\u5f00\u59cbCoding<\/h2>\n\n\n\n<p>\u5728\u9879\u76eedirectory\u91cc\u9762\u6dfb\u52a0\u4e00\u4e2ahtml file\u53ebmain.html, \u5185\u5bb9\u5982\u4e0b\u8c03\u7528echart<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n    &lt;meta charset=\"utf-8\">\n    &lt;!-- including ECharts file -->\n    &lt;script src=\"node_modules\/echarts\/dist\/echarts.min.js\">&lt;\/script>\n&lt;\/head>\n\n&lt;body>\n    &lt;!-- preparing a DOM with width and height for ECharts -->\n    &lt;div id=\"main\" style=\"width:600px; height:400px;\">&lt;\/div>\n&lt;\/body>\n\n&lt;script type=\"text\/javascript\">\n        \/\/ based on prepared DOM, initialize echarts instance\n        var myChart = echarts.init(document.getElementById('main'));\n\n        \/\/ specify chart configuration item and data\n        var option = {\n            title: {\n                text: 'ECharts entry example'\n            },\n            tooltip: {},\n            legend: {\n                data:['Sales']\n            },\n            xAxis: {\n                data: [\"shirt\",\"cardign\",\"chiffon shirt\",\"pants\",\"heels\",\"socks\"]\n            },\n            yAxis: {},\n            series: [{\n                name: 'Sales',\n                type: 'bar',\n                data: [5, 20, 36, 10, 10, 20]\n            }]\n        };\n\n        \/\/ use configuration item and data specified to show chart\n        myChart.setOption(option);\n    &lt;\/script>\n&lt;\/html><\/pre>\n\n\n\n<p>header\u91cc\u9762\u7684\u8fd9\u884c\u76f8\u5f53\u4e8ePython\u7684import<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    &lt;script src=\"node_modules\/echarts\/dist\/echarts.min.js\">&lt;\/script><\/pre>\n\n\n\n<p>\u73b0\u5728directory\u5185\u5bb9\u5982\u4e0b<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>% ls\nmain.html\t\tpackage-lock.json\nnode_modules\/\t\tpackage.json<\/code><\/pre>\n\n\n\n<p>\u7528\u6d4f\u89c8\u5668\u6253\u5f00main.html. \u5728Mac\u91cc\u53ef\u4ee5\u5728terminal\u91cc\u7528<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>% open main.html<\/code><\/pre>\n\n\n\n<p>\u7f51\u9875\u663e\u793a\u5982\u4e0b, \u8fd8\u662f\u633a\u9177\u7684.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1126\" height=\"772\" src=\"http:\/\/feellikelearning.com\/wp-content\/uploads\/2021\/01\/image-5.png\" alt=\"\" class=\"wp-image-1148\"\/><\/figure>\n\n\n\n<p>\u7b80\u5355\u770b\u770bjs code, option\u5c31\u662f\u4e00\u4e2ajson object, \u91cc\u9762\u5305\u542b\u4e86\u56fe\u7684\u4e00\u4e9b\u4fe1\u606f\u548cdata. \u4e00\u5f00\u59cbinit\u4e86\u4e00\u4e2aecharts object, \u7136\u540e\u7ed9\u5b83set\u4e00\u4e0boption\u8fd9\u4e2ajson object. \u548cd3\u6bd4\u8d77\u6765\u8fd8\u662f\u7b80\u5355\u591a\u4e86. <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">        var myChart = echarts.init(document.getElementById('main'));\n        \n        var option = {\n            \/\/ json object\n        };\n\n        myChart.setOption(option);<\/pre>\n\n\n\n<p>\u6211\u628a\u6570\u636e\u6539\u4e00\u6539, \u5c31\u53ef\u4ee5\u663e\u793a\u4e00\u4e9b\u6295\u8d44\u6807\u7684\u7684\u5e02\u503c\u4e86<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n    &lt;meta charset=\"utf-8\">\n    &lt;!-- including ECharts file -->\n    &lt;script src=\"node_modules\/echarts\/dist\/echarts.min.js\">&lt;\/script>\n&lt;\/head>\n\n&lt;body>\n    &lt;!-- preparing a DOM with width and height for ECharts -->\n    &lt;div id=\"main\" style=\"width:1000px; height:400px;\">&lt;\/div>\n&lt;\/body>\n\n&lt;script type=\"text\/javascript\">\n        \/\/ based on prepared DOM, initialize echarts instance\n        var myChart = echarts.init(document.getElementById('main'));\n\n        \/\/ specify chart configuration item and data\n        var option = {\n            title: {\n                text: 'Market Caps'\n            },\n            tooltip: {},\n            legend: {\n                data:['Sales']\n            },\n            xAxis: {\n                data: []\n            },\n            yAxis: {},\n            series: [{\n                name: 'Sales',\n                type: 'bar',\n                data: []\n            }]\n        };\n\n        const MARKET_CAP = 'market cap';\n        var legends = [MARKET_CAP];\n        var symbols = ['AAPL', 'GOOGL', 'FB', 'AMZN', 'NVDA', 'NFLX', 'TSLA', 'BTC', 'ETH', 'V', 'MA']\n        var marketCaps = [2256, 1185, 778, 1634, 323, 238, 669, 622, 109, 482, 356];\n\n        option.legend.data = legends;\n        option.xAxis.data = symbols;\n        option.series[0].data = marketCaps;\t\n        option.series[0].name = MARKET_CAP;\t\n\n        \/\/ use configuration item and data specified to show chart\n        myChart.setOption(option);\n    &lt;\/script>\n&lt;\/html><\/pre>\n\n\n\n<p>\u7f51\u9875\u66f4\u65b0\u5982\u4e0b. \u63a5\u4e0a\u4e2a\u6570\u636e\u7684\u540e\u7aef\u5c31\u53ef\u4ee5\u663e\u793a\u4e0d\u540c\u7684\u6570\u636e\u4e86.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1884\" height=\"774\" src=\"http:\/\/feellikelearning.com\/wp-content\/uploads\/2021\/01\/image-6.png\" alt=\"\" class=\"wp-image-1155\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u6bb5\u4e00\u76f4\u662f\u6211\u7684\u77ed\u677f, \u6ca1\u6709\u592a\u591a\u673a\u4f1a\u7cfb\u7edf\u5b66\u4e60. \u6700\u8fd1\u60f3\u505a\u4e00\u4e2a\u80a1\u7968\u5206\u6790\u7cfb\u7edf\u7684webapp, \u4e8e\u662f\u5c31\u5728\u7f51\u4e0a\u627e\u5408\u9002\u7684javascript library\u505adata visualization. D3.js\u4ee5\u524d\u7528\u8fc7, \u89c9\u5f97\u592a\u8fc7\u5e95\u5c42, \u5199\u8d77\u6765\u592a\u9ebb\u70e6. \u4e8e\u662f\u53d1\u73b0\u4e86ECharts, \u597d\u50cf\u662f\u56fd\u5185\u5927\u795e\u5199\u5f97, \u5df2\u7ecf\u662fApache project, \u975e\u5e38\u5389\u5bb3. \u4e8e\u662ffollow\u4e86\u8fd9\u4e2atutorial. \u91cc\u9762\u6709\u4e9b\u5c0f\u7ec6\u8282\u6211\u89c9\u5f97\u521d\u5b66\u8005\u53ef\u80fd\u4f1a\u5361\u4f4f, \u8fd9\u91cc\u6211\u5199\u5f97\u8be6\u7ec6\u4e00\u70b9. \u5b89\u88c5npm npm\u662fnode package manager\u7684\u610f\u601d, \u662f\u7528\u4e86\u7ba1\u7406\u5b89\u88c5javascript libraries\u7684. \u76f8\u5f53\u4e8ePython\u91cc\u7684pip. \u5b89\u88c5\u53ef\u4ee5\u770b\u6211\u524d\u9762\u7684\u6587\u7ae0. \u5b89\u88c5ECharts \u9996\u5148\u7ed9\u9879\u76ee\u5efa\u7acb\u4e00\u4e2a\u65b0\u7684directory \u5728\u9879\u76eedirectory\u91cc\u5b89\u88c5echarts library \u5b8c\u6210\u540edirectory\u91cc\u4f1a\u6709\u90a3\u4e48\u51e0\u4e2a\u4e1c\u897f \u5f00\u59cbCoding \u5728\u9879\u76eedirectory\u91cc\u9762\u6dfb\u52a0\u4e00\u4e2ahtml file\u53ebmain.html, \u5185\u5bb9\u5982\u4e0b\u8c03\u7528echart header\u91cc\u9762\u7684\u8fd9\u884c\u76f8\u5f53\u4e8ePython\u7684import \u73b0\u5728directory\u5185\u5bb9\u5982\u4e0b \u7528\u6d4f\u89c8\u5668\u6253\u5f00main.html. \u5728Mac\u91cc\u53ef\u4ee5\u5728terminal\u91cc\u7528 \u7f51\u9875\u663e\u793a\u5982\u4e0b, \u8fd8\u662f\u633a\u9177\u7684&#8230;.<br \/><a class=\"read-more-button\" href=\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1152,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>ECharts\u5feb\u901f\u4e0a\u624b | Feel Like Learning<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts\u5feb\u901f\u4e0a\u624b | Feel Like Learning\" \/>\n<meta property=\"og:description\" content=\"\u524d\u6bb5\u4e00\u76f4\u662f\u6211\u7684\u77ed\u677f, \u6ca1\u6709\u592a\u591a\u673a\u4f1a\u7cfb\u7edf\u5b66\u4e60. \u6700\u8fd1\u60f3\u505a\u4e00\u4e2a\u80a1\u7968\u5206\u6790\u7cfb\u7edf\u7684webapp, \u4e8e\u662f\u5c31\u5728\u7f51\u4e0a\u627e\u5408\u9002\u7684javascript library\u505adata visualization. D3.js\u4ee5\u524d\u7528\u8fc7, \u89c9\u5f97\u592a\u8fc7\u5e95\u5c42, \u5199\u8d77\u6765\u592a\u9ebb\u70e6. \u4e8e\u662f\u53d1\u73b0\u4e86ECharts, \u597d\u50cf\u662f\u56fd\u5185\u5927\u795e\u5199\u5f97, \u5df2\u7ecf\u662fApache project, \u975e\u5e38\u5389\u5bb3. \u4e8e\u662ffollow\u4e86\u8fd9\u4e2atutorial. \u91cc\u9762\u6709\u4e9b\u5c0f\u7ec6\u8282\u6211\u89c9\u5f97\u521d\u5b66\u8005\u53ef\u80fd\u4f1a\u5361\u4f4f, \u8fd9\u91cc\u6211\u5199\u5f97\u8be6\u7ec6\u4e00\u70b9. \u5b89\u88c5npm npm\u662fnode package manager\u7684\u610f\u601d, \u662f\u7528\u4e86\u7ba1\u7406\u5b89\u88c5javascript libraries\u7684. \u76f8\u5f53\u4e8ePython\u91cc\u7684pip. \u5b89\u88c5\u53ef\u4ee5\u770b\u6211\u524d\u9762\u7684\u6587\u7ae0. \u5b89\u88c5ECharts \u9996\u5148\u7ed9\u9879\u76ee\u5efa\u7acb\u4e00\u4e2a\u65b0\u7684directory \u5728\u9879\u76eedirectory\u91cc\u5b89\u88c5echarts library \u5b8c\u6210\u540edirectory\u91cc\u4f1a\u6709\u90a3\u4e48\u51e0\u4e2a\u4e1c\u897f \u5f00\u59cbCoding \u5728\u9879\u76eedirectory\u91cc\u9762\u6dfb\u52a0\u4e00\u4e2ahtml file\u53ebmain.html, \u5185\u5bb9\u5982\u4e0b\u8c03\u7528echart header\u91cc\u9762\u7684\u8fd9\u884c\u76f8\u5f53\u4e8ePython\u7684import \u73b0\u5728directory\u5185\u5bb9\u5982\u4e0b \u7528\u6d4f\u89c8\u5668\u6253\u5f00main.html. \u5728Mac\u91cc\u53ef\u4ee5\u5728terminal\u91cc\u7528 \u7f51\u9875\u663e\u793a\u5982\u4e0b, \u8fd8\u662f\u633a\u9177\u7684....Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Feel Like Learning\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-03T20:13:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-03T21:03:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/feellikelearning.com\/wp-content\/uploads\/2021\/01\/blog-covers.037.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"feellikelearning\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"ECharts\u5feb\u901f\u4e0a\u624b\" \/>\n<meta name=\"twitter:description\" content=\"ECharts\u5feb\u901f\u4e0a\u624b\u9879\u76ee, \u51e0\u5206\u949f\u4f53\u9a8c\u4e00\u4e0b\u7528Echarts\/javascript\u753b\u56fe\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/feellikelearning.com\/wp-content\/uploads\/2021\/01\/blog-covers.037.jpeg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"feellikelearning\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/\"},\"author\":{\"name\":\"feellikelearning\",\"@id\":\"https:\/\/feellikelearning.com\/#\/schema\/person\/91fb815bebebf166c217b5e3764d437a\"},\"headline\":\"ECharts\u5feb\u901f\u4e0a\u624b\",\"datePublished\":\"2021-01-03T20:13:48+00:00\",\"dateModified\":\"2021-01-03T21:03:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/\"},\"wordCount\":57,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/feellikelearning.com\/#\/schema\/person\/91fb815bebebf166c217b5e3764d437a\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/\",\"url\":\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/\",\"name\":\"ECharts\u5feb\u901f\u4e0a\u624b | Feel Like Learning\",\"isPartOf\":{\"@id\":\"https:\/\/feellikelearning.com\/#website\"},\"datePublished\":\"2021-01-03T20:13:48+00:00\",\"dateModified\":\"2021-01-03T21:03:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/feellikelearning.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ECharts\u5feb\u901f\u4e0a\u624b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/feellikelearning.com\/#website\",\"url\":\"https:\/\/feellikelearning.com\/\",\"name\":\"Feel Like Learning\",\"description\":\"\u7a0b\u5e8f\uff5c\u751f\u6d3b\uff5c\u5b66\u5230\u5c31\u662f\u8d5a\u5230\",\"publisher\":{\"@id\":\"https:\/\/feellikelearning.com\/#\/schema\/person\/91fb815bebebf166c217b5e3764d437a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/feellikelearning.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/feellikelearning.com\/#\/schema\/person\/91fb815bebebf166c217b5e3764d437a\",\"name\":\"feellikelearning\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/feellikelearning.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/72a1e86e9dcb0332e88bd7d54fd36c28?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/72a1e86e9dcb0332e88bd7d54fd36c28?s=96&d=mm&r=g\",\"caption\":\"feellikelearning\"},\"logo\":{\"@id\":\"https:\/\/feellikelearning.com\/#\/schema\/person\/image\/\"},\"url\":\"https:\/\/feellikelearning.com\/index.php\/author\/feellikelearning\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts\u5feb\u901f\u4e0a\u624b | Feel Like Learning","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"ECharts\u5feb\u901f\u4e0a\u624b | Feel Like Learning","og_description":"\u524d\u6bb5\u4e00\u76f4\u662f\u6211\u7684\u77ed\u677f, \u6ca1\u6709\u592a\u591a\u673a\u4f1a\u7cfb\u7edf\u5b66\u4e60. \u6700\u8fd1\u60f3\u505a\u4e00\u4e2a\u80a1\u7968\u5206\u6790\u7cfb\u7edf\u7684webapp, \u4e8e\u662f\u5c31\u5728\u7f51\u4e0a\u627e\u5408\u9002\u7684javascript library\u505adata visualization. D3.js\u4ee5\u524d\u7528\u8fc7, \u89c9\u5f97\u592a\u8fc7\u5e95\u5c42, \u5199\u8d77\u6765\u592a\u9ebb\u70e6. \u4e8e\u662f\u53d1\u73b0\u4e86ECharts, \u597d\u50cf\u662f\u56fd\u5185\u5927\u795e\u5199\u5f97, \u5df2\u7ecf\u662fApache project, \u975e\u5e38\u5389\u5bb3. \u4e8e\u662ffollow\u4e86\u8fd9\u4e2atutorial. \u91cc\u9762\u6709\u4e9b\u5c0f\u7ec6\u8282\u6211\u89c9\u5f97\u521d\u5b66\u8005\u53ef\u80fd\u4f1a\u5361\u4f4f, \u8fd9\u91cc\u6211\u5199\u5f97\u8be6\u7ec6\u4e00\u70b9. \u5b89\u88c5npm npm\u662fnode package manager\u7684\u610f\u601d, \u662f\u7528\u4e86\u7ba1\u7406\u5b89\u88c5javascript libraries\u7684. \u76f8\u5f53\u4e8ePython\u91cc\u7684pip. \u5b89\u88c5\u53ef\u4ee5\u770b\u6211\u524d\u9762\u7684\u6587\u7ae0. \u5b89\u88c5ECharts \u9996\u5148\u7ed9\u9879\u76ee\u5efa\u7acb\u4e00\u4e2a\u65b0\u7684directory \u5728\u9879\u76eedirectory\u91cc\u5b89\u88c5echarts library \u5b8c\u6210\u540edirectory\u91cc\u4f1a\u6709\u90a3\u4e48\u51e0\u4e2a\u4e1c\u897f \u5f00\u59cbCoding \u5728\u9879\u76eedirectory\u91cc\u9762\u6dfb\u52a0\u4e00\u4e2ahtml file\u53ebmain.html, \u5185\u5bb9\u5982\u4e0b\u8c03\u7528echart header\u91cc\u9762\u7684\u8fd9\u884c\u76f8\u5f53\u4e8ePython\u7684import \u73b0\u5728directory\u5185\u5bb9\u5982\u4e0b \u7528\u6d4f\u89c8\u5668\u6253\u5f00main.html. \u5728Mac\u91cc\u53ef\u4ee5\u5728terminal\u91cc\u7528 \u7f51\u9875\u663e\u793a\u5982\u4e0b, \u8fd8\u662f\u633a\u9177\u7684....Read more","og_url":"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/","og_site_name":"Feel Like Learning","article_published_time":"2021-01-03T20:13:48+00:00","article_modified_time":"2021-01-03T21:03:12+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/feellikelearning.com\/wp-content\/uploads\/2021\/01\/blog-covers.037.jpeg","type":"image\/jpeg"}],"author":"feellikelearning","twitter_card":"summary_large_image","twitter_title":"ECharts\u5feb\u901f\u4e0a\u624b","twitter_description":"ECharts\u5feb\u901f\u4e0a\u624b\u9879\u76ee, \u51e0\u5206\u949f\u4f53\u9a8c\u4e00\u4e0b\u7528Echarts\/javascript\u753b\u56fe","twitter_image":"https:\/\/feellikelearning.com\/wp-content\/uploads\/2021\/01\/blog-covers.037.jpeg","twitter_misc":{"Written by":"feellikelearning","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/#article","isPartOf":{"@id":"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/"},"author":{"name":"feellikelearning","@id":"https:\/\/feellikelearning.com\/#\/schema\/person\/91fb815bebebf166c217b5e3764d437a"},"headline":"ECharts\u5feb\u901f\u4e0a\u624b","datePublished":"2021-01-03T20:13:48+00:00","dateModified":"2021-01-03T21:03:12+00:00","mainEntityOfPage":{"@id":"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/"},"wordCount":57,"commentCount":0,"publisher":{"@id":"https:\/\/feellikelearning.com\/#\/schema\/person\/91fb815bebebf166c217b5e3764d437a"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/","url":"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/","name":"ECharts\u5feb\u901f\u4e0a\u624b | Feel Like Learning","isPartOf":{"@id":"https:\/\/feellikelearning.com\/#website"},"datePublished":"2021-01-03T20:13:48+00:00","dateModified":"2021-01-03T21:03:12+00:00","breadcrumb":{"@id":"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/feellikelearning.com\/index.php\/2021\/01\/03\/echarts-quick-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/feellikelearning.com\/"},{"@type":"ListItem","position":2,"name":"ECharts\u5feb\u901f\u4e0a\u624b"}]},{"@type":"WebSite","@id":"https:\/\/feellikelearning.com\/#website","url":"https:\/\/feellikelearning.com\/","name":"Feel Like Learning","description":"\u7a0b\u5e8f\uff5c\u751f\u6d3b\uff5c\u5b66\u5230\u5c31\u662f\u8d5a\u5230","publisher":{"@id":"https:\/\/feellikelearning.com\/#\/schema\/person\/91fb815bebebf166c217b5e3764d437a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/feellikelearning.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/feellikelearning.com\/#\/schema\/person\/91fb815bebebf166c217b5e3764d437a","name":"feellikelearning","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/feellikelearning.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/72a1e86e9dcb0332e88bd7d54fd36c28?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/72a1e86e9dcb0332e88bd7d54fd36c28?s=96&d=mm&r=g","caption":"feellikelearning"},"logo":{"@id":"https:\/\/feellikelearning.com\/#\/schema\/person\/image\/"},"url":"https:\/\/feellikelearning.com\/index.php\/author\/feellikelearning\/"}]}},"_links":{"self":[{"href":"https:\/\/feellikelearning.com\/index.php\/wp-json\/wp\/v2\/posts\/1143"}],"collection":[{"href":"https:\/\/feellikelearning.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/feellikelearning.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/feellikelearning.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/feellikelearning.com\/index.php\/wp-json\/wp\/v2\/comments?post=1143"}],"version-history":[{"count":9,"href":"https:\/\/feellikelearning.com\/index.php\/wp-json\/wp\/v2\/posts\/1143\/revisions"}],"predecessor-version":[{"id":1156,"href":"https:\/\/feellikelearning.com\/index.php\/wp-json\/wp\/v2\/posts\/1143\/revisions\/1156"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/feellikelearning.com\/index.php\/wp-json\/wp\/v2\/media\/1152"}],"wp:attachment":[{"href":"https:\/\/feellikelearning.com\/index.php\/wp-json\/wp\/v2\/media?parent=1143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/feellikelearning.com\/index.php\/wp-json\/wp\/v2\/categories?post=1143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/feellikelearning.com\/index.php\/wp-json\/wp\/v2\/tags?post=1143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}