{"id":2389,"date":"2017-05-25T11:47:47","date_gmt":"2017-05-25T03:47:47","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2389"},"modified":"2017-05-25T11:47:47","modified_gmt":"2017-05-25T03:47:47","slug":"%e7%99%be%e5%ba%a6echarts%e4%bd%bf%e7%94%a8%e4%bd%93%e4%bc%9a%ef%bc%8c%e4%b8%80%e4%b8%aa%e9%a1%b5%e9%9d%a2%e6%a0%b9%e6%8d%aejson%e6%95%b0%e7%bb%84%e7%94%9f%e6%88%90%e5%a4%9a%e5%bc%a0%e8%a1%a8%e6%a0%bc","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2389","title":{"rendered":"\u767e\u5ea6echarts\u4f7f\u7528\u4f53\u4f1a\uff0c\u4e00\u4e2a\u9875\u9762\u6839\u636ejson\u6570\u7ec4\u751f\u6210\u591a\u5f20\u8868\u683c\u6548\u679c"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<meta charset=\"UTF-8\">\r\n\t\t<title>\u67f1\u72b6\u56fe\u6d4b\u8bd5<\/title>\r\n\t\t<script type=\"text\/javascript\" src=\"jquery-2.1.0.js\" ><\/script>\r\n\t\t<script type=\"text\/javascript\" src=\"echarts.min.js\" ><\/script>\r\n\t\t\r\n\t\t<style>\r\n\t\t\t #main div{\r\n\t\t\t\twidth: 240px;\r\n\t\t\t\theight: 120px;\r\n\t\t\t\tbackground-color: #fff;\r\n\t\t\t\tmargin-bottom: 20px;\r\n\t\t\t}\r\n\t\t<\/style>\r\n\t<\/head>\r\n\r\n\t<body>\r\n\t\t<div id=\"main\"><\/div>\r\n\t\t<!--\u52a8\u6001\u83b7\u53d6json\u6570\u636e-->\r\n\t\t<script type=\"text\/javascript\" >\r\n\t\t    \r\n\/\/ \u5f02\u6b65\u52a0\u8f7d\u6570\u636e\r\n$.get('data.json').done(function(data) {\r\n\t\/\/ \u586b\u5165\u6570\u636e\r\n\tfor(i = 0; i < data.length; i++) {\r\n\t\t\r\n\t\t\/\/\u521b\u5efa\u7a7a\u767ddiv\r\n\t\tvar num = \"test\" + i;\r\n\t\tvar div = document.createElement(\"div\");\r\n\t\tdiv.id = num;\r\n\t\tdocument.getElementById(\"main\").appendChild(div);\r\n\t\t\/\/\u63d2\u4ef6\u6548\u679c\u521d\u59cb\u5316\r\n\t\tvar myChart = echarts.init(document.getElementById(num));\r\n\t\tmyChart.setOption({\r\n\t\t\ttitle: {\r\n\t\t\t\t\/\/text: '\u5f02\u6b65\u6570\u636e\u52a0\u8f7d\u793a\u4f8b'\r\n\t\t\t},\r\n\t\t\ttooltip: {},\r\n\t\t\tlegend: {\r\n\t\t\t\t\/\/data: ['\u9500\u91cf']\r\n\t\t\t},\r\n\t\t\tgrid: {\r\n\t\t\t\tx: 30,\r\n\t\t\t\ty: 30,\r\n\t\t\t\tx2: 0,\r\n\t\t\t\ty2: 5,\r\n\t\t\t\tborderWidth: 1\r\n\t\t\t},\r\n\t\t\tyAxis: {\r\n\t\t\t\tmin: 0,\r\n\t\t\t\tmax: 100,\r\n\t\t\t\tinterval: 20,\r\n\t\t\t},\r\n\t\t\txAxis: {\r\n\t\t\t\tdata: data[i].categories\r\n\t\t\t},\r\n\t\t\tseries: [{\r\n\t\t\t\t\/\/ \u6839\u636e\u540d\u5b57\u5bf9\u5e94\u5230\u76f8\u5e94\u7684\u7cfb\u5217\r\n\t\t\t\tname: '\u9500\u91cf',\r\n\t\t\t\ttype: 'bar',\r\n\t\t\t\titemStyle: {\r\n\t\t\t\t\tnormal: {\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000 \/\/\u597d\uff0c\u8fd9\u91cc\u5c31\u662f\u91cd\u5934\u620f\u4e86\uff0c\u5b9a\u4e49\u4e00\u4e2alist\uff0c\u7136\u540e\u6839\u636e\u6240\u4ee5\u53d6\u5f97\u4e0d\u540c\u7684\u503c\uff0c\u8fd9\u6837\u5c31\u5b9e\u73b0\u4e86\uff0c\r\n\t\t\t\t\t\tcolor: function(params) {\r\n\t\t\t\t\t\t\t\/\/ build a color map as your need.\r\n\t\t\t\t\t\t\tvar colorList = [\r\n\t\t\t\t\t\t\t\t'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',\r\n\t\t\t\t\t\t\t\t'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',\r\n\t\t\t\t\t\t\t\t'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'\r\n\t\t\t\t\t\t\t];\r\n\t\t\t\t\t\t\treturn colorList[params.dataIndex]\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\/\/\u4ee5\u4e0b\u4e3a\u662f\u5426\u663e\u793a\uff0c\u663e\u793a\u4f4d\u7f6e\u548c\u663e\u793a\u683c\u5f0f\u7684\u8bbe\u7f6e\u4e86\r\n\t\t\t\t\t\tlabel: {\r\n\t\t\t\t\t\t\tshow: true,\r\n\t\t\t\t\t\t\tposition: 'top',\r\n\t\t\t\t\t\t\tformatter: '{b}\\n{c}'\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tdata: data[i].data\r\n\t\t\t}]\r\n\t\t});\r\n\t}\r\n});\r\n\t\t<\/script>\r\n\t\r\n\t<\/body>\r\n\r\n<\/html><\/pre>\n
[\r\n\r\n\t{\r\n\t\t\"categories\": [\r\n\t\t\t\"\u886c\u886b\",\r\n\t\t\t\"\u7f8a\u6bdb\u886b\",\r\n\t\t\t\"\u96ea\u7eba\u886b\",\r\n\t\t\t\"\u88e4\u5b50\",\r\n\t\t\t\"\u9ad8\u8ddf\u978b\",\r\n\t\t\t\"\u889c\u5b50\"\r\n\t\t],\r\n\t\t\"data\": [\r\n\t\t\t0,\r\n\t\t\t80,\r\n\t\t\t36,\r\n\t\t\t97,\r\n\t\t\t72,\r\n\t\t\t53\r\n\t\t]\r\n\t},\r\n\t{\r\n\t\t\"categories\": [\r\n\t\t\t\"\u886c\u886b\",\r\n\t\t\t\"\u7f8a\u6bdb\u886b\",\r\n\t\t\t\"\u96ea\u7eba\u886b\",\r\n\t\t\t\"\u88e4\u5b50\",\r\n\t\t\t\"\u9ad8\u8ddf\u978b\",\r\n\t\t\t\"\u889c\u5b50\"\r\n\t\t],\r\n\t\t\"data\": [\r\n\t\t\t5,\r\n\t\t\t20,\r\n\t\t\t36,\r\n\t\t\t10,\r\n\t\t\t10,\r\n\t\t\t20\r\n\t\t]\r\n\t},\r\n\t{\r\n\t\t\"categories\": [\r\n\t\t\t\"\u886c\u886b\",\r\n\t\t\t\"\u7f8a\u6bdb\u886b\",\r\n\t\t\t\"\u96ea\u7eba\u886b\",\r\n\t\t\t\"\u88e4\u5b50\",\r\n\t\t\t\"\u9ad8\u8ddf\u978b\",\r\n\t\t\t\"\u889c\u5b50\"\r\n\t\t],\r\n\t\t\"data\": [\r\n\t\t\t80,\r\n\t\t\t90,\r\n\t\t\t100,\r\n\t\t\t30,\r\n\t\t\t70,\r\n\t\t\t50\r\n\t\t]\r\n\t}\r\n\t\r\n]<\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u767e\u5ea6echarts\u4f7f\u7528\u4f53\u4f1a\uff0c\u4e00\u4e2a\u9875\u9762\u6839\u636ejson\u6570\u7ec4\u751f\u6210\u591a\u5f20\u8868\u683c\u6548\u679c<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>\u67f1\u72b6\u56fe\u6d4b\u8bd5<\/ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[301,9,50,315,256],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2389"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2389"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2389\/revisions"}],"predecessor-version":[{"id":2390,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2389\/revisions\/2390"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2389"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}