\u4e0b\u9762\u5c06\u4e3a\u5927\u5bb6\u4ecb\u7ecd\u4f7f\u7528 ECharts \u751f\u6210\u56fe\u8868\u7684\u4e00\u4e9b\u914d\u7f6e\u3002<\/p>\n

\u7b2c\u4e00\u6b65\uff1a\u521b\u5efa HTML \u9875\u9762<\/strong><\/div>\n
\u521b\u5efa\u4e00\u4e2a HTML \u9875\u9762\uff0c\u5f15\u5165 echarts.min.js\uff1a<\/p>\n
<!DOCTYPE html><\/span>\r\n<\/span><html><\/span>\r\n<\/span><head><\/span>\r\n <\/span><meta<\/span> <\/span>charset<\/span>=<\/span>\"utf-8\"<\/span>><\/span>\r\n <\/span><\/span>\r\n <\/span><script<\/span> <\/span>src<\/span>=<\/span>\"echarts.min.js\"<\/span>><\/script><\/span>\r\n<\/span><\/head><\/span>\r\n<\/span><\/html><\/span><\/pre>\n
\u7b2c\u4e8c\u6b65: \u4e3a ECharts \u51c6\u5907\u4e00\u4e2a\u5177\u5907\u9ad8\u5bbd\u7684 DOM \u5bb9\u5668<\/strong><\/div>\n
\u5b9e\u4f8b\u4e2d id \u4e3a main \u7684 div \u7528\u4e8e\u5305\u542b ECharts \u7ed8\u5236\u7684\u56fe\u8868:<\/p>\n
<body><\/span>\r\n <\/span><\/span>\r\n <\/span><div<\/span> <\/span>id<\/span>=<\/span>\"main\"<\/span> <\/span>style<\/span>=<\/span>\"<\/span>width<\/span>:<\/span> <\/span>600px<\/span>;<\/span>height<\/span>:<\/span>400px<\/span>;<\/span>\"<\/span>><\/div><\/span>\r\n<\/span><\/body><\/span><\/pre>\n
\u7b2c\u4e09\u6b65: \u8bbe\u7f6e\u914d\u7f6e\u4fe1\u606f<\/strong><\/div>\n
ECharts \u5e93\u4f7f\u7528 json \u683c\u5f0f\u6765\u914d\u7f6e\u3002<\/p>\n
echarts<\/span>.<\/span>init<\/span>(<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'main'<\/span>)).<\/span>setOption<\/span>(<\/span>option<\/span>);<\/span><\/pre>\n
\u8fd9\u91cc option \u8868\u793a\u4f7f\u7528 json \u6570\u636e\u683c\u5f0f\u7684\u914d\u7f6e\u6765\u7ed8\u5236\u56fe\u8868\u3002\u6b65\u9aa4\u5982\u4e0b\uff1a<\/p>\n
\u6807\u9898<\/strong><\/p>\n
\u4e3a\u56fe\u8868\u914d\u7f6e\u6807\u9898\uff1a<\/p>\n
title: {\r\n text: '\u7b2c\u4e00\u4e2a ECharts \u5b9e\u4f8b'\r\n}<\/pre>\n
\u63d0\u793a\u4fe1\u606f<\/p>\n
\u914d\u7f6e\u63d0\u793a\u4fe1\u606f\uff1a<\/p>\n
tooltip: {},<\/pre>\n
\u56fe\u4f8b\u7ec4\u4ef6<\/p>\n
\u56fe\u4f8b\u7ec4\u4ef6\u5c55\u73b0\u4e86\u4e0d\u540c\u7cfb\u5217\u7684\u6807\u8bb0(symbol)\uff0c\u989c\u8272\u548c\u540d\u5b57\u3002\u53ef\u4ee5\u901a\u8fc7\u70b9\u51fb\u56fe\u4f8b\u63a7\u5236\u54ea\u4e9b\u7cfb\u5217\u4e0d\u663e\u793a\u3002<\/p>\n
legend: {\r\n data: [{\r\n name: '\u7cfb\u52171',\r\n \/\/ \u5f3a\u5236\u8bbe\u7f6e\u56fe\u5f62\u4e3a\u5706\u3002\r\n icon: 'circle',\r\n \/\/ \u8bbe\u7f6e\u6587\u672c\u4e3a\u7ea2\u8272\r\n textStyle: {\r\n color: 'red'\r\n }\r\n }]\r\n}<\/pre>\n
X \u8f74<\/strong><\/p>\n
\u914d\u7f6e\u8981\u5728 X \u8f74\u663e\u793a\u7684\u9879:<\/p>\n
xAxis: {\r\n data: [\"\u886c\u886b\",\"\u7f8a\u6bdb\u886b\",\"\u96ea\u7eba\u886b\",\"\u88e4\u5b50\",\"\u9ad8\u8ddf\u978b\",\"\u889c\u5b50\"]\r\n}<\/pre>\n
Y \u8f74<\/strong><\/p>\n
\u914d\u7f6e\u8981\u5728 Y \u8f74\u663e\u793a\u7684\u9879\u3002<\/p>\n
yAxis: {}<\/pre>\n
\u7cfb\u5217\u5217\u8868<\/strong><\/p>\n
\u6bcf\u4e2a\u7cfb\u5217\u901a\u8fc7 type \u51b3\u5b9a\u81ea\u5df1\u7684\u56fe\u8868\u7c7b\u578b:<\/p>\n
series: [{\r\n name: '\u9500\u91cf', \/\/ \u7cfb\u5217\u540d\u79f0\r\n type: 'bar', \/\/ \u7cfb\u5217\u56fe\u8868\u7c7b\u578b\r\n data: [5, 20, 36, 10, 10, 20] \/\/ \u7cfb\u5217\u4e2d\u7684\u6570\u636e\u5185\u5bb9\r\n}]<\/pre>\n
\u6bcf\u4e2a\u7cfb\u5217\u901a\u8fc7 type \u51b3\u5b9a\u81ea\u5df1\u7684\u56fe\u8868\u7c7b\u578b\uff1a<\/p>\n
type: 'bar'\uff1a\u67f1\u72b6\/\u6761\u5f62\u56fe
\ntype: 'line'\uff1a\u6298\u7ebf\/\u9762\u79ef\u56fe
\ntype: 'pie'\uff1a\u997c\u56fe
\ntype: 'scatter'\uff1a\u6563\u70b9\uff08\u6c14\u6ce1\uff09\u56fe
\ntype: 'effectScatter'\uff1a\u5e26\u6709\u6d9f\u6f2a\u7279\u6548\u52a8\u753b\u7684\u6563\u70b9\uff08\u6c14\u6ce1\uff09
\ntype: 'radar'\uff1a\u96f7\u8fbe\u56fe
\ntype: 'tree'\uff1a\u6811\u578b\u56fe
\ntype: 'treemap'\uff1a\u6811\u578b\u56fe
\ntype: 'sunburst'\uff1a\u65ed\u65e5\u56fe
\ntype: 'boxplot'\uff1a\u7bb1\u5f62\u56fe
\ntype: 'candlestick'\uff1aK\u7ebf\u56fe
\ntype: 'heatmap'\uff1a\u70ed\u529b\u56fe
\ntype: 'map'\uff1a\u5730\u56fe
\ntype: 'parallel'\uff1a\u5e73\u884c\u5750\u6807\u7cfb\u7684\u7cfb\u5217
\ntype: 'lines'\uff1a\u7ebf\u56fe
\ntype: 'graph'\uff1a\u5173\u7cfb\u56fe
\ntype: 'sankey'\uff1a\u6851\u57fa\u56fe
\ntype: 'funnel'\uff1a\u6f0f\u6597\u56fe
\ntype: 'gauge'\uff1a\u4eea\u8868\u76d8
\ntype: 'pictorialBar'\uff1a\u8c61\u5f62\u67f1\u56fe
\ntype: 'themeRiver'\uff1a\u4e3b\u9898\u6cb3\u6d41
\ntype: 'custom'\uff1a\u81ea\u5b9a\u4e49\u7cfb\u5217
\n\u5b9e\u4f8b<\/strong>
\n\u4ee5\u4e0b\u4e3a\u5b8c\u6574\u7684\u5b9e\u4f8b\uff1a<\/p>\n
\u5b9e\u4f8b<\/p>\n
<<\/span>!<\/span>DOCTYPE<\/span> <\/span>html<\/span>><\/span>\r\n<\/span><<\/span>html<\/span>><\/span>\r\n<\/span><<\/span>head<\/span>><\/span>\r\n <\/span><<\/span>meta<\/span> <\/span>charset<\/span>=<\/span>\"<\/span>utf-8<\/span>\"<\/span>><\/span>\r\n <\/span><<\/span>title<\/span>><\/span>\u7b2c\u4e00\u4e2a ECharts \u5b9e\u4f8b<\/span><\/<\/span>title<\/span>><\/span>\r\n <\/span><\/span>\r\n <\/span><<\/span>script<\/span> <\/span>src<\/span>=<\/span>\"<\/span>https:\/\/cdn.staticfile.org\/echarts\/4.3.0\/echarts.min.js<\/span>\"<\/span>><\/span><\/<\/span>script<\/span>><\/span>\r\n<\/span><\/<\/span>head<\/span>><\/span>\r\n<\/span><<\/span>body<\/span>><\/span>\r\n <\/span><\/span>\r\n <\/span><<\/span>div<\/span> <\/span>id<\/span>=<\/span>\"<\/span>main<\/span>\"<\/span> <\/span>style<\/span>=<\/span>\"<\/span>width: 600px;height:400px;<\/span>\"<\/span>><\/span><\/<\/span>div<\/span>><\/span>\r\n <\/span><<\/span>script<\/span> <\/span>type<\/span>=<\/span>\"<\/span>text\/javascript<\/span>\"<\/span>><\/span>\r\n \/\/ \u57fa\u4e8e\u51c6\u5907\u597d\u7684dom\uff0c\u521d\u59cb\u5316echarts\u5b9e\u4f8b\r\n var myChart = echarts.init(document.getElementById('main'));\r\n \r\n \/\/ \u6307\u5b9a\u56fe\u8868\u7684\u914d\u7f6e\u9879\u548c\u6570\u636e\r\n var option = {\r\n title: {\r\n text: '\u7b2c\u4e00\u4e2a ECharts \u5b9e\u4f8b'\r\n },\r\n tooltip: {},\r\n legend: {\r\n data:['\u9500\u91cf']\r\n },\r\n xAxis: {\r\n data: [\"\u886c\u886b\",\"\u7f8a\u6bdb\u886b\",\"\u96ea\u7eba\u886b\",\"\u88e4\u5b50\",\"\u9ad8\u8ddf\u978b\",\"\u889c\u5b50\"]\r\n },\r\n yAxis: {},\r\n series: [{\r\n name: '\u9500\u91cf',\r\n type: 'bar',\r\n data: [5, 20, 36, 10, 10, 20]\r\n }]\r\n };\r\n \r\n \/\/ \u4f7f\u7528\u521a\u6307\u5b9a\u7684\u914d\u7f6e\u9879\u548c\u6570\u636e\u663e\u793a\u56fe\u8868\u3002\r\n myChart.setOption(option);\r\n <\/span><\/<\/span>script<\/span>><\/span>\r\n<\/span><\/<\/span>body<\/span>><\/span>\r\n<\/span><\/<\/span>html<\/span>><\/span><\/div><\/pre>\n
\u5c1d\u8bd5\u4e00\u4e0b \u00bb<\/a><\/p>\n
\u70b9\u51fb \"\u5c1d\u8bd5\u4e00\u4e0b\" \u6309\u94ae\u67e5\u770b\u5728\u7ebf\u5b9e\u4f8b<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4e0b\u9762\u5c06\u4e3a\u5927\u5bb6\u4ecb\u7ecd\u4f7f\u7528 ECharts \u751f\u6210\u56fe\u8868\u7684\u4e00\u4e9b\u914d\u7f6e\u3002 \u521b\u5efa\u4e00\u4e2a HTML \u9875\u9762\uff0c\u5f15\u5165 echarts.m […]<\/p>\n","protected":false},"author":321,"featured_media":225178,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-225177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thread"],"acf":[],"_links":{"self":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/225177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/users\/321"}],"replies":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/comments?post=225177"}],"version-history":[{"count":11,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/225177\/revisions"}],"predecessor-version":[{"id":225190,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/225177\/revisions\/225190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media\/225178"}],"wp:attachment":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media?parent=225177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/categories?post=225177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/tags?post=225177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}