{"id":116812,"date":"2026-10-22T05:08:45","date_gmt":"2026-10-21T21:08:45","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/116812.html"},"modified":"2026-10-22T05:08:45","modified_gmt":"2026-10-21T21:08:45","slug":"%e3%80%8aecharts%e5%85%a5%e9%97%a8%e3%80%8b%e7%ac%ac-10-%e7%ab%a0-%e6%95%b0%e6%8d%ae%e6%80%8e%e4%b9%88%e5%96%82%e8%bf%9b%e5%8e%bb%ef%bc%9adataset%e3%80%81%e7%bb%b4%e5%ba%a6%e4%b8%8e-encode","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/116812.html","title":{"rendered":"\u300aECharts\u5165\u95e8\u300b\u7b2c 10 \u7ae0 \u6570\u636e\u600e\u4e48\u5582\u8fdb\u53bb\uff1adataset\u3001\u7ef4\u5ea6\u4e0e encode"},"content":{"rendered":"

\u3010\u672c\u7ae0\u76ee\u6807\u3011<\/h3>\n

\u5b66\u5b8c\u8fd9\u4e00\u7ae0，\u4f60\u80fd：<\/p>\n

  • \u8ba4\u5f97\u51fa\u56db\u79cd\u5582\u6570\u636e\u7684\u5199\u6cd5，\u5e76\u8bf4\u6e05\u5b83\u4eec\u5185\u90e8\u5176\u5b9e\u662f\u540c\u4e00\u5f20\u8868：series.data \u7684\u7eaf\u6570\u5b57\u6570\u7ec4\u3001\u4e8c\u7ef4\u6570\u7ec4\u3001\u5bf9\u8c61\u6570\u7ec4，\u4ee5\u53ca dataset.source\u3002\u4f60\u4f1a\u77e5\u9053 ECharts \u628a\u6765\u6e90\u5f52\u6210\u54ea\u516d\u79cd\u5f62\u72b6（sourceFormat），\u4ee5\u53ca\u54ea\u79cd\u5199\u6cd5\u5fc5\u987b\u989d\u5916\u8865 xAxis.data\u3002<\/li>\n
  • \u5206\u6e05\u4e09\u4e2a\u8bcd：\u7ef4\u5ea6（\u8868\u7684\u4e00\u5217）\u3001\u7cfb\u5217（series[i]）\u3001\u901a\u9053（x\/y\/tooltip\/label\/itemName\/value）\u3002\u8fd9\u662f\u521d\u5b66\u8005\u6700\u5927\u7684\u4e00\u9053\u574e，\u672c\u7ae0\u7528\u56db\u5f20\u56fe\u628a\u5b83\u62c6\u5f00\u3002<\/li>\n
  • \u770b\u61c2\u300c\u81ea\u52a8\u6392\u961f\u300d\u5e76\u77e5\u9053\u5b83\u4ec0\u4e48\u65f6\u5019\u5bb3\u4f60：\u4e0d\u5199 encode \u65f6 ECharts \u66ff\u4f60\u9009\u5217\u7684\u89c4\u5219\u662f\u5b9e\u6d4b\u51fa\u6765\u7684\u2014\u2014\u4e24\u4e2a\u7cfb\u5217\u62ff\u5230 sales \u548c cups，\u7b2c\u56db\u4e2a\u7cfb\u5217\u5f00\u59cb\u91cd\u590d\u7528\u5217，\u7eb5\u8f74\u523b\u5ea6\u4f1a\u88ab\u6700\u5927\u90a3\u4e00\u5217\u6491\u6ee1\u3002<\/li>\n
  • \u7528 encode \u628a\u5217\u9489\u6b7b，\u5305\u62ec\u6309\u4e0b\u6807\u5199\u3001\u7ed9\u4e00\u4e2a\u901a\u9053\u5199\u4e24\u5217\u3001\u5199\u4e86\u4e00\u4e2a\u4e0d\u5b58\u5728\u7684\u5217\u540d（\u5b9e\u6d4b：\u4e0d\u62a5\u9519，\u9759\u9ed8\u56de\u9000\u5230\u9ed8\u8ba4\u5217）\u3002<\/li>\n
  • \u7ed9\u7ef4\u5ea6\u8d77\u540d\u7684\u4e24\u79cd\u505a\u6cd5：dataset.dimensions \u4e0e {name, displayName}\u3002\u4f60\u4f1a\u77e5\u9053\u4e3a\u4ec0\u4e48\u5728\u5bf9\u8c61\u6570\u7ec4\u4e0a\u76f4\u63a5\u6539\u6210\u4e2d\u6587\u540d\u4f1a\u753b\u51fa\u4e00\u5f20 446 \u5b57\u8282\u7684\u7a7a\u56fe，\u800c displayName \u4e0d\u4f1a\u3002<\/li>\n
  • \u7528 dataset \u7684\u94fe\u5f0f\u5f15\u7528\u548c transform \u505a\u6570\u636e\u6574\u5f62：\u4e00\u4efd\u7ed3\u679c\u5582\u591a\u4e2a\u7cfb\u5217\u3001filter \u7684\u516d\u79cd\u6bd4\u8f83\u7b26\u4e0e and\/or\/not\u3001sort \u7684\u914d\u7f6e，\u4ee5\u53ca\u300c\u591a\u5c42\u94fe\u7684\u8f93\u5165\u9ed8\u8ba4\u662f\u7b2c 0 \u4efd\u800c\u4e0d\u662f\u4e0a\u4e00\u5c42\u300d\u8fd9\u6761\u6700\u5bb9\u6613\u8e29\u7684\u89c4\u5219\u3002<\/li>\n
  • \u62a5\u51fa\u810f\u503c\u7684\u5904\u7406\u7ed3\u679c：null\u3001undefined\u3001'-'\u3001\u7a7a\u5b57\u7b26\u4e32\u3001\u5b57\u7b26\u4e32\u6570\u5b57\u3001true\/false\u30010\u3001\u8d1f\u6570\u5206\u522b\u753b\u6210\u4ec0\u4e48（\u5b9e\u6d4b\u5bf9\u7167\u8868），\u6298\u7ebf\u5728\u54ea\u91cc\u65ad\u5f00\u3001connectNulls \u6539\u7684\u662f\u54ea\u4e00\u4e2a\u5b57\u7b26\u3002<\/li>\n
  • \u4ece\u672c\u7ae0\u8d77，\u672c\u4e66\u7684\u56fe\u90fd\u7528 data\/ \u91cc\u7684\u771f\u5b9e\u6570\u636e，\u4f60\u4f1a\u62ff\u5230\u90a3\u5f20\u300c8 \u4e2a\u6587\u4ef6\u7684\u5206\u5c42\u5730\u56fe\u300d，\u77e5\u9053\u540e\u9762\u6bcf\u4e00\u7ae0\u8be5\u53d6\u54ea\u4e00\u5c42\u3002<\/li>\n
    \n

    \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"
    \n\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"
    \n\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

    \u3010\u539f\u7406\u5148\u884c\u3011<\/h3>\n

    \u4e00\u3001\u540c\u4e00\u5f20\u56fe，\u4e03\u79cd\u5582\u6cd5<\/h4>\n

    \u5148\u7ea6\u5b9a\u4e00\u4ef6\u5c0f\u4e8b：\u672c\u7ae0\u6240\u6709\u5b9e\u6d4b\u90fd\u7528\u540c\u4e00\u4efd 12 \u884c \u00d7 3 \u5217\u7684\u6708\u8868\u2014\u20142025 \u5e74\u9010\u6708\u7684\u9500\u552e\u989d\u3001\u676f\u6570\u3001\u8ba2\u5355\u6570（01 \u6708 \/ 3126085.4 \/ 110552 \/ 69039\u2026\u2026）\u3002\u8fd9\u4efd\u8868\u7531 data\/sales-daily.json \u73b0\u573a\u805a\u5408\u51fa\u6765，\u805a\u5408\u4ee3\u7801\u5728\u672c\u7ae0\u5de5\u7a0b\u91cc，\u4f60\u8fd0\u884c\u4e00\u6b21\u5c31\u80fd\u6253\u5370\u5168\u90e8 12 \u884c\u3002<\/p>\n

    \u540c\u4e00\u5f20\u300c\u67f1 + \u6298\u7ebf\u300d\u7684\u56fe，\u53ef\u4ee5\u628a\u6570\u636e\u5199\u6210\u4e03\u79cd\u6837\u5b50：<\/p>\n

    \/\/ \u5199\u6cd5 1：series.data \u7eaf\u6570\u5b57\u6570\u7ec4（\u7c7b\u76ee\u53e6\u5199\u7ed9 xAxis.data）<\/span>
    \nxAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'category'<\/span>,<\/span> data<\/span>:<\/span> monthly.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>month)<\/span> }<\/span>,<\/span>
    \nseries<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span>,<\/span> data<\/span>:<\/span> monthly.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>sales)<\/span> }<\/span>,<\/span>
    \n {<\/span> type<\/span>:<\/span> 'line'<\/span>,<\/span> data<\/span>:<\/span> monthly.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>cups)<\/span> }<\/span>]<\/span><\/p>\n

    \/\/ \u5199\u6cd5 4：dataset.source \u5bf9\u8c61\u6570\u7ec4，\u4e0d\u5199 encode<\/span>
    \ndataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> monthly }<\/span>,<\/span> \/\/ [{month, sales, cups}, \u2026]<\/span>
    \nseries<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span> }<\/span>,<\/span> {<\/span> type<\/span>:<\/span> 'line'<\/span> }<\/span>]<\/span><\/p>\n

    \/\/ \u5199\u6cd5 5：dataset.source \u4e8c\u7ef4\u6570\u7ec4\u5e26\u8868\u5934<\/span>
    \ndataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> [<\/span>[<\/span>'month'<\/span>,<\/span> 'sales'<\/span>,<\/span> 'cups'<\/span>]<\/span>,<\/span> \u2026]<\/span> }<\/span>,<\/span>
    \nseries<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span>,<\/span> encode<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 'month'<\/span>,<\/span> y<\/span>:<\/span> 'sales'<\/span> }<\/span> }<\/span>,<\/span>
    \n {<\/span> type<\/span>:<\/span> 'line'<\/span>,<\/span> encode<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 'month'<\/span>,<\/span> y<\/span>:<\/span> 'cups'<\/span> }<\/span> }<\/span>]<\/span><\/p>\n

    \/\/ \u5199\u6cd5 6：dataset.source \u6309\u5217\u5bf9\u8c61<\/span>
    \ndataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> {<\/span> month<\/span>:<\/span> [<\/span>\u2026]<\/span>,<\/span> sales<\/span>:<\/span> [<\/span>\u2026]<\/span>,<\/span> cups<\/span>:<\/span> [<\/span>\u2026]<\/span> }<\/span> }<\/span><\/p>\n

    \u5b9e\u6d4b\u7ed3\u679c（lib\/echarts.min.js 6.1.0，SSR \u6e32\u67d3，680\u00d7380）：<\/p>\n\n\u5199\u6cd5SVG \u5b57\u8282\u56fe\u5f62\u6307\u7eb9\u548c\u5199\u6cd5 1 \u4e00\u6837\u5417<\/tr>\n\n\n\n\n\n\n\n\n
    1 series.data \u7eaf\u6570\u5b57\u6570\u7ec4<\/td>\n14,395<\/td>\n39 \u6761 d + 20 \u6bb5\u6587\u5b57，\u5171 1,681 \u5b57\u7b26<\/td>\n\u2014<\/td>\n<\/tr>\n
    2 series.data \u4e8c\u7ef4\u6570\u7ec4<\/td>\n14,436<\/td>\n1,681<\/td>\n\u662f<\/td>\n<\/tr>\n
    3 series.data \u5bf9\u8c61\u6570\u7ec4<\/td>\n14,126<\/td>\n1,647<\/td>\n\u5426<\/td>\n<\/tr>\n
    4 dataset.source \u5bf9\u8c61\u6570\u7ec4<\/td>\n14,436<\/td>\n1,681<\/td>\n\u662f<\/td>\n<\/tr>\n
    5 dataset.source \u4e8c\u7ef4\u5e26\u8868\u5934<\/td>\n14,436<\/td>\n1,681<\/td>\n\u662f<\/td>\n<\/tr>\n
    6 dataset.source \u6309\u5217\u5bf9\u8c61<\/td>\n14,476<\/td>\n1,681<\/td>\n\u662f<\/td>\n<\/tr>\n
    7 dataset.source \u4e8c\u7ef4\u65e0\u8868\u5934 + dimensions<\/td>\n14,507<\/td>\n1,681<\/td>\n\u662f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u4e24\u70b9\u8981\u89e3\u91ca\u3002<\/p>\n

    \u4e3a\u4ec0\u4e48\u4e0d\u7528\u5b57\u8282\u6570\u5224\u65ad？ \u5b57\u8282\u6570\u4f1a\u6f02\u3002zrender \u7ed9\u6bcf\u4e2a\u56fe\u5f62\u6302\u7684 class \u540d\u662f\u5168\u5c40\u9012\u589e\u8ba1\u6570\u5668（zr0-cls-3\u3001zr1-cls-8\u2026\u2026），\u540c\u4e00\u5f20\u56fe\u6e32\u67d3\u4e24\u6b21\u5c31\u53ef\u80fd\u5dee\u51fa 39 \u5b57\u8282\u3002\u53ef\u9760\u7684\u529e\u6cd5\u662f\u628a SVG \u91cc\u6240\u6709 path \u7684 d \u5c5e\u6027\u548c\u6240\u6709\u6587\u5b57\u6309\u51fa\u73b0\u987a\u5e8f\u4e32\u8d77\u6765，\u5f97\u5230\u4e00\u4e2a\u300c\u56fe\u5f62\u6307\u7eb9\u300d\u2014\u2014\u5f62\u72b6\u6ca1\u53d8，\u6307\u7eb9\u5c31\u4e0d\u53d8\u3002\u8fd9\u5f20\u8868\u91cc\u4e03\u4e2a\u6307\u7eb9\u4e2d\u516d\u4e2a\u5b8c\u5168\u76f8\u540c：\u8fd9\u4e9b\u5199\u6cd5\u753b\u51fa\u6765\u7684\u662f\u540c\u4e00\u5f20\u56fe\u3002<\/p>\n

    \u5199\u6cd5 3 \u4e3a\u4ec0\u4e48\u4e0d\u4e00\u6837？ \u5bf9\u8c61\u6570\u7ec4\u5582\u8fdb series.data \u65f6，ECharts \u4e0d\u8ba4\u8bc6\u4f60\u7684\u5b57\u6bb5\u540d，\u7c7b\u76ee\u8f74\u53ea\u80fd\u6309\u4e0b\u6807\u7f16\u53f7：\u5b9e\u6d4b x \u8f74\u6587\u5b57\u53d8\u6210\u4e86 0～11 \u800c\u4e0d\u662f 01 \u6708～12 \u6708\u3002\u8865\u4e0a xAxis.data \u4e4b\u540e，\u5199\u6cd5 3b \u7684\u56fe\u5f62\u53c8\u548c\u5199\u6cd5 1 \u9010\u5b57\u7b26\u76f8\u540c\u4e86\u3002\u7ed3\u8bba：series.data \u7528\u5bf9\u8c61\u6570\u7ec4\u5fc5\u987b\u81ea\u5df1\u7ed9\u7c7b\u76ee\u8f74\u8865 data；dataset \u4e0d\u7528，\u56e0\u4e3a\u8868\u91cc\u7b2c\u4e00\u5217\u5c31\u662f\u7c7b\u76ee\u3002<\/p>\n

    \u8fd9\u4e03\u79cd\u5199\u6cd5\u4e0d\u662f\u300c\u90fd\u80fd\u7528，\u968f\u4fbf\u6311\u300d\u3002\u5b83\u4eec\u7684\u533a\u522b\u5728\u7b2c 3\u30014\u30016 \u8282\u91cc\u4f1a\u4e00\u6761\u6761\u66b4\u9732\u51fa\u6765：\u80fd\u4e0d\u80fd\u4e00\u4efd\u6570\u636e\u5582\u591a\u4e2a\u7cfb\u5217\u3001\u80fd\u4e0d\u80fd\u6539\u540d\u3001\u80fd\u4e0d\u80fd\u6574\u5f62\u3002\u9009\u578b\u7684\u5b8c\u6574\u53e3\u8bc0\u653e\u5728\u53c2\u6570\u901f\u67e5\u8868\u4e94\u3002<\/p>\n

    \u4e8c\u3001ECharts \u5185\u90e8\u53ea\u8ba4\u4e00\u5f20\u8868<\/h4>\n

    \u4e0d\u7ba1\u4f60\u4ece\u54ea\u6247\u95e8\u8fdb\u53bb，\u6570\u636e\u6700\u540e\u90fd\u88ab\u644a\u6210\u300c\u4e00\u5f20\u8868 + \u4e00\u4efd\u5217\u540d\u300d\u3002\u53d1\u5e03\u5305\u6e90\u7801 node_modules\/echarts\/lib\/util\/types.js \u7b2c 50\u201355 \u884c\u628a\u8fd9\u51e0\u79cd\u6765\u6e90\u5f62\u72b6\u5199\u6b7b\u6210\u516d\u4e2a\u5e38\u91cf：<\/p>\n\n\u5185\u90e8\u540d\u4ec0\u4e48\u65f6\u5019\u662f\u5b83\u5b9e\u6d4b\u8bfb\u5230\u7684\u5217<\/tr>\n\n\n\n\n\n\n\n
    original<\/td>\n\u4e00\u5207 series.data<\/td>\n["x","y"]（generic）<\/td>\n<\/tr>\n
    arrayRows<\/td>\n\u4e8c\u7ef4\u6570\u7ec4，\u6709\u65e0\u8868\u5934\u90fd\u7b97\u5b83<\/td>\n\u6709\u8868\u5934 \u2192 ["date","sales","cups"]；\u65e0\u8868\u5934\u4e14\u4e0d\u58f0\u660e \u2192 ["x","y","value"]<\/td>\n<\/tr>\n
    objectRows<\/td>\n\u5bf9\u8c61\u6570\u7ec4<\/td>\n\u8868\u5934\u53d6\u81ea\u5bf9\u8c61\u7684\u952e<\/td>\n<\/tr>\n
    keyedColumns<\/td>\n\u6309\u5217\u5bf9\u8c61<\/td>\n\u952e\u540d\u5373\u5217\u540d<\/td>\n<\/tr>\n
    typedArray<\/td>\nInt32Array \u4e4b\u7c7b\u7684\u5b9a\u578b\u6570\u7ec4<\/td>\n\u53ea\u5728\u6e90\u7801\u5224\u65ad\u91cc\u51fa\u73b0<\/td>\n<\/tr>\n
    unknown<\/td>\n\u515c\u5e95<\/td>\n\u2014<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    typedArray \u548c unknown \u672c\u7ae0\u4e0d\u6f14\u793a：\u524d\u8005\u7531 sourceManager.js \u7b2c 210 \u884c\u7684 isTypedArray(data) \u5224\u5b9a，\u540e\u8005\u662f\u8ba4\u4e0d\u51fa\u6765\u65f6\u7684\u515c\u5e95\u3002\u8bfb\u8005\u8981\u8bb0\u4f4f\u7684\u662f\u524d\u4e09\u884c\u52a0 keyedColumns\u2014\u2014\u56db\u4e2a\u80fd\u7528\u7684\u95e8，\u5176\u4e2d series.data \u90a3\u4e00\u6247\u95e8\u540e\u9762\u6ca1\u6709\u5217\u540d\u53ef\u8a00\u3002<\/p>\n

    \u8fd9\u4e09\u4e2a\u5b57\u300c\u5217\u540d\u300d\u5f88\u91cd\u8981，\u56e0\u4e3a\u5b83\u51b3\u5b9a\u4e86\u7b2c\u4e09\u8282\u90a3\u4ef6\u4e8b：\u8c01\u662f\u7ef4\u5ea6\u3002<\/p>\n

    \u4e09\u3001\u7ef4\u5ea6\u3001\u7cfb\u5217\u3001\u901a\u9053\u2014\u2014\u4e09\u4e2a\u8bcd\u5fc5\u987b\u5206\u6e05<\/h4>\n

    \u7ef4\u5ea6（dimension）= \u8868\u7684\u4e00\u5217\u3002 \u4e00\u4efd dataset.source \u6709 3 \u5217，\u5c31\u662f 3 \u4e2a\u7ef4\u5ea6\u3002\u7cfb\u5217（series）= series \u6570\u7ec4\u7684\u4e00\u9879\u3002 \u901a\u9053（channel）= \u67d0\u4e2a\u56fe\u8868\u7c7b\u578b\u9700\u8981\u7684\u300c\u8f93\u5165\u69fd\u4f4d\u300d：\u67f1\u72b6\u56fe\u548c\u6298\u7ebf\u56fe\u8981 x \u548c y，\u6563\u70b9\u56fe\u8981 x\/y，\u997c\u56fe\u8981 itemName \u548c value\u3002<\/p>\n

    \u6708\u8868（dataset.source） \u7cfb\u5217\u4e0e\u901a\u9053
    \n \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
    \n \u2502 month \u2502 sales \u2502 cups \u2502 \u2190 3 \u4e2a\u7ef4\u5ea6（\u5217）
    \n \u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
    \n \u2502 01 \u6708 \u2502 3126085.4 \u2502 110552 \u2502
    \n \u2502 02 \u6708 \u2502 3099878.3 \u2502 109998 \u2502
    \n \u2502 \u2026 \u2502 \u2026 \u2502 \u2026 \u2502
    \n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
    \n \u2502 \u2502 \u2502
    \n x \u901a\u9053 y \u901a\u9053 y \u901a\u9053
    \n \u2193 \u2193 \u2193
    \n series[0] \u67f1\u72b6\u56fe series[1] \u6298\u7ebf\u56fe<\/p>\n

    \u4f60\u4e0d\u5199 encode \u65f6，ECharts \u4f1a\u66ff\u4f60\u6392\u961f\u3002 \u89c4\u5219\u662f\u5b9e\u6d4b\u51fa\u6765\u7684，\u4e00\u6761\u4e00\u6761\u5217\u6e05\u695a：<\/p>\n\n\u8868（month\/sales\/cups\/orders \u56db\u5217）\u7cfb\u5217 0\u7cfb\u5217 1\u7cfb\u5217 2\u7cfb\u5217 3\u7cfb\u5217 4<\/tr>\n\n\n
    \u4e0d\u5199 encode，\u6a21\u578b\u5c42\u5b9e\u9645\u8bfb\u5230\u7684 y \u5217<\/td>\nsales<\/td>\ncups<\/td>\norders<\/td>\nsales<\/td>\nsales<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n
    • \u7b2c\u4e00\u5217（month）\u88ab\u5f53\u4f5c\u7c7b\u76ee，\u4e0d\u8fdb\u961f\u5217；\u5269\u4e0b\u4e09\u5217\u6570\u503c\u6392\u961f\u53d1\u7ed9\u5404\u7cfb\u5217\u3002<\/li>\n
    • \u961f\u5217\u8868\u91cc\u6709\u4e09\u4e2a\u6570\u503c\u5217，\u4f46\u4f60\u53ef\u4ee5\u5199\u65e0\u9650\u591a\u4e2a\u7cfb\u5217：\u7b2c\u56db\u4e2a\u7cfb\u5217\u91cd\u65b0\u4ece\u961f\u5934\u62ff sales，\u7b2c\u4e94\u4e2a\u8fd8\u662f sales（\u5b9e\u6d4b\u8bfb\u6570\u89c1\u4e0a\u8868）\u3002\u7cfb\u5217\u6570\u8d85\u8fc7\u6570\u503c\u5217\u6570\u4e4b\u540e\u662f\u91cd\u590d，\u4e0d\u662f\u62a5\u9519\u3002<\/li>\n
    • \u961f\u5217\u6309\u300c\u5217\u5728\u8868\u91cc\u7684\u987a\u5e8f\u300d\u53d1，\u4e0d\u6309\u5217\u540d\u3001\u4e0d\u6309\u6570\u503c\u5927\u5c0f\u3002<\/li>\n<\/ul>\n

      \u6392\u961f\u6709\u4e24\u4e2a\u5f53\u573a\u53ef\u89c1\u7684\u526f\u4f5c\u7528，\u90fd\u5728\u672c\u7ae0\u9875\u9762\u7684\u6a21\u5f0f\u2460\u4e0a：<\/p>\n

      \u6a21\u5f0f\u2460 \u56fe\u4f8b\u6587\u5b57 = ["sales","cups"] \u2190 \u5217\u540d\u76f4\u63a5\u6210\u4e86\u7cfb\u5217\u540d
      \n\u6a21\u5f0f\u2460 y \u8f74\u523b\u5ea6 = 0 ~ 5,000,000 \u2190 \u88ab\u6700\u5927\u90a3\u4e00\u5217（\u9500\u552e\u989d）\u6491\u6ee1
      \n\u6a21\u5f0f\u2461 \u56fe\u4f8b\u6587\u5b57 = ["\u676f\u6570","\u8ba2\u5355\u6570"] \u2190 \u5199\u4e86 name\/encode \u4e4b\u540e
      \n\u6a21\u5f0f\u2461 y \u8f74\u523b\u5ea6 = 0 ~ 180,000<\/p>\n

      \u7b2c\u4e8c\u6761\u6700\u80fd\u5bb3\u4eba\u7684\u662f：\u4f60\u60f3\u770b\u676f\u6570\u8d8b\u52bf，\u6298\u7ebf\u5374\u548c\u9500\u552e\u989d\u5171\u7528\u4e00\u628a 0～5,000,000 \u7684\u5c3a\u5b50，\u676f\u6570\u90a3 11 \u4e07\u70b9\u4e0a\u53bb\u5c31\u662f\u4e00\u6839\u8d34\u5730\u7684\u76f4\u7ebf\u3002\u8fd9\u5c31\u662f\u300c\u4e0d\u5199 encode \u4e5f\u80fd\u8dd1\u300d\u8fd9\u53e5\u8bdd\u7684\u4ee3\u4ef7\u3002<\/p>\n

      \u4e0d\u5199 encode：ECharts \u66ff\u4f60\u9009 \u5199 encode：\u4f60\u9489\u6b7b
      \n \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u6307\u5b9a \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
      \n \u2502 \u7cfb\u5217 bar \u2502\u25c4\u2500\u2500\u2524 sales \u2502 \u2502 \u7cfb\u5217 bar \u2502\u25c4\u2500\u2500\u2500\u2500\u2500\u2500\u2524 cups \u2502
      \n \u2502 \u7cfb\u5217 line\u2502\u25c4\u2500\u2500\u2524 cups \u2502 \u2502 \u7cfb\u5217 line\u2502\u25c4\u2500\u2500\u2500\u2500\u2500\u2500\u2524 orders \u2502
      \n \u2502 (\u961f\u5217\u7b2c1)\u2502 \u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u9489\u4f4f \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
      \n \u2502 \u2502 \u2502 orders \u2502 \u25b2 \u8c01\u90fd\u4e0d\u518d\u53bb\u6392\u961f
      \n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n

      \u56db\u3001encode：\u628a\u5217\u9489\u5230\u901a\u9053\u4e0a<\/h4>\n

      encode \u5199\u5728\u7cfb\u5217\u4e0a（\u4e0d\u662f\u5199\u5728 dataset \u4e0a），\u503c\u662f\u300c\u901a\u9053\u540d \u2192 \u7ef4\u5ea6\u300d\u7684\u6620\u5c04：<\/p>\n

      series<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span>,<\/span> encode<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 'month'<\/span>,<\/span> y<\/span>:<\/span> 'cups'<\/span> }<\/span> }<\/span>]<\/span><\/p>\n

      \u7ef4\u5ea6\u53ef\u4ee5\u7528\u5217\u540d，\u4e5f\u53ef\u4ee5\u7528\u4e0b\u6807，\u5b9e\u6d4b\u7b49\u4ef7：<\/p>\n\n\u5199\u6cd5\u5b9e\u9645\u7528\u7684 y \u5217y \u8f74\u523b\u5ea6SVG \u5b57\u8282<\/tr>\n\n\n\n\n\n
      encode: { x: 'date', y: 'avgTicket' }<\/td>\navgTicket<\/td>\n0 ~ 60<\/td>\n6,119<\/td>\n<\/tr>\n
      encode: { x: 0, y: 4 }（avgTicket \u662f\u7b2c 4 \u5217）<\/td>\navgTicket<\/td>\n0 ~ 60<\/td>\n\u540c\u4e0a<\/td>\n<\/tr>\n
      encode: { x: 'date', y: 'orders' }<\/td>\norders<\/td>\n0 ~ 1,500<\/td>\n5,833<\/td>\n<\/tr>\n
      encode: { x: 0, y: 3 }<\/td>\norders<\/td>\n0 ~ 1,500<\/td>\n5,833<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      \u9664\u4e86 x\/y，\u8fd8\u6709\u4e09\u4e2a\u975e\u51e0\u4f55\u901a\u9053，\u5b83\u4eec\u51b3\u5b9a\u300c\u663e\u793a\u4ec0\u4e48\u6570\u5b57\u300d\u800c\u4e0d\u662f\u300c\u753b\u591a\u9ad8\u300d：<\/p>\n

      encode<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 'date'<\/span>,<\/span> y<\/span>:<\/span> 'sales'<\/span>,<\/span> label<\/span>:<\/span> [<\/span>'cups'<\/span>,<\/span> 'orders'<\/span>]<\/span>,<\/span> tooltip<\/span>:<\/span> 'avgTicket'<\/span> }<\/span><\/p>\n

      \u5b9e\u6d4b\u89c4\u5219（\u90fd\u7528\u540c\u4e00\u4efd 8 \u5217\u65e5\u8868，12 \u884c）：<\/p>\n

    • \u4e0d\u5199 encode \u65f6，\u9ed8\u8ba4\u6807\u7b7e\u548c\u9ed8\u8ba4\u63d0\u793a\u6846\u90fd\u53ea\u663e\u793a y \u90a3\u4e00\u7ef4：\u6a21\u578b\u5c42\u8bfb\u6570 defaultedLabel = ["sales"]\u3001defaultedTooltip = ["sales"]\u3002<\/li>\n
    • encode.label = 'cups' \u2192 defaultedLabel \u53d8\u6210 ["cups"]，\u67f1\u9876\u6807\u7b7e\u6253\u5370 2358\u3002<\/li>\n
    • encode.label = ['cups','orders'] \u2192 \u4e24\u4e2a\u503c\u7528\u7a7a\u683c\u8fde\u8d77\u6765\u6253\u5370：2358 1324\u3002<\/li>\n
    • encode.tooltip = ['cups','orders'] \u2192 \u53ea\u6709\u63d0\u793a\u901a\u9053\u53d8\u4e86，\u6807\u7b7e\u4ecd\u662f ["sales"]\u3002\u4e24\u6761\u901a\u9053\u5404\u7ba1\u5404\u7684\u3002<\/li>\n
    • encode.y = ['sales','cups'] \u2192 \u67f1\u9ad8\u53d6\u7b2c\u4e00\u5217（\u8f74 0～70,000 \u6ca1\u53d8），\u4f46\u9ed8\u8ba4\u6807\u7b7e\u53d6\u4e86 cups（\u6253\u5370 2358）\u3002\u7ed9\u4e00\u4e2a\u901a\u9053\u5199\u591a\u5217\u65f6，\u51e0\u4f55\u53d6\u7b2c\u4e00\u5217，\u9ed8\u8ba4\u6807\u7b7e\u53d6\u4f60\u5199\u7684\u90a3\u51e0\u5217\u3002<\/li>\n
    • encode.tooltip \u5199\u4e00\u4e2a\u4e0d\u5b58\u5728\u7684\u5217\u540d，\u4e0d\u62a5\u9519\u3001\u4e0d\u8b66\u544a：defaultedTooltip \u56de\u9000\u6210 ["sales"]，\u56fe\u753b\u5f97\u548c\u6ca1\u5199\u4e00\u6837\u3002\u8fd9\u7c7b\u9759\u9ed8\u56de\u9000\u662f\u672c\u7ae0\u5751 6 \u7684\u4e3b\u9898\u3002<\/li>\n

      \u997c\u56fe\u7684\u901a\u9053\u53eb itemName \u548c value（\u7b2c 16 \u7ae0\u7ec6\u8bb2）：<\/p>\n

      dataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> [<\/span>{<\/span> cat<\/span>:<\/span> '\u7532'<\/span>,<\/span> amt<\/span>:<\/span> 12<\/span> }<\/span>,<\/span> {<\/span> cat<\/span>:<\/span> '\u4e59'<\/span>,<\/span> amt<\/span>:<\/span> 8<\/span> }<\/span>]<\/span> }<\/span>,<\/span>
      \nseries<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'pie'<\/span>,<\/span> encode<\/span>:<\/span> {<\/span> itemName<\/span>:<\/span> 'cat'<\/span>,<\/span> value<\/span>:<\/span> 'amt'<\/span> }<\/span> }<\/span>]<\/span> \/\/ \u5b9e\u6d4b\u6b63\u5e38，1,905 \u5b57\u8282<\/span><\/p>\n

      \u4e94\u3001\u7ed9\u7ef4\u5ea6\u8d77\u540d\u5b57：dimensions \u4e0e displayName<\/h4>\n

      \u5217\u540d\u4f1a\u76f4\u63a5\u53d8\u6210\u56fe\u4f8b\u6587\u5b57\u548c\u9ed8\u8ba4\u7cfb\u5217\u540d（\u7b2c\u4e09\u8282\u5b9e\u6d4b ["sales","cups"]），\u6240\u4ee5\u4eba\u4eba\u90fd\u60f3\u6539\u540d\u3002\u6709\u4e24\u79cd\u5199\u6cd5，\u53ea\u6709\u4e00\u79cd\u662f\u5b89\u5168\u7684：<\/p>\n

      \/\/ \u5199\u6cd5 A：\u91cd\u65b0\u5b9a\u4e49\u5217\u540d（\u5371\u9669）<\/span>
      \ndataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> monthly,<\/span> dimensions<\/span>:<\/span> [<\/span>'\u6708\u4efd'<\/span>,<\/span> '\u9500\u552e\u989d'<\/span>,<\/span> '\u676f\u6570'<\/span>,<\/span> '\u8ba2\u5355\u6570'<\/span>]<\/span> }<\/span><\/p>\n

      \/\/ \u5199\u6cd5 B：\u4fdd\u7559\u5217\u540d，\u53ea\u52a0\u5c55\u793a\u540d（\u5b89\u5168）<\/span>
      \ndataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> monthly,<\/span> dimensions<\/span>:<\/span> [<\/span>
      \n {<\/span> name<\/span>:<\/span> 'month'<\/span>,<\/span> displayName<\/span>:<\/span> '\u6708\u4efd'<\/span> }<\/span>,<\/span>
      \n {<\/span> name<\/span>:<\/span> 'sales'<\/span>,<\/span> displayName<\/span>:<\/span> '\u9500\u552e\u989d'<\/span> }<\/span>
      \n]<\/span> }<\/span><\/p>\n

      \u5b9e\u6d4b（\u540c\u4e00\u4e2a\u5bf9\u8c61\u6570\u7ec4\u6e90\u3001\u4e00\u4e2a\u67f1\u72b6\u56fe\u7cfb\u5217）：<\/p>\n\n\u5199\u6cd5\u7ed3\u679c<\/tr>\n\n\n\n\n\n\n
      A：\u5bf9\u8c61\u6570\u7ec4 + dimensions \u6539\u6210\u4e2d\u6587\u540d<\/td>\n\u7a7a\u56fe，446 \u5b57\u8282，<text> \u6570\u91cf 0，\u67f1\u5b50 0 \u6839，\u4e0d\u62a5\u9519<\/td>\n<\/tr>\n
      A\u2019：\u540c\u4e0a，\u4f46 encode \u6539\u7528\u4e0b\u6807 {x:0, y:1}<\/td>\n\u540c\u6837\u7a7a\u56fe，446 \u5b57\u8282<\/td>\n<\/tr>\n
      B：{name, displayName}<\/td>\n\u6b63\u5e38 4,916 \u5b57\u8282；\u56fe\u4f8b\u663e\u793a \u9500\u552e\u989d\/\u676f\u6570<\/td>\n<\/tr>\n
      C：\u4e8c\u7ef4\u6570\u7ec4\u5e26\u8868\u5934 + dimensions \u53ea\u7ed9 2 \u4e2a\u540d\u5b57（\u6e90\u6709 3 \u5217）<\/td>\n\u6b63\u5e38，4,916 \u5b57\u8282<\/td>\n<\/tr>\n
      D：\u6309\u5217\u5bf9\u8c61 + dimensions: ['\u65e5\u671f','\u9500\u552e\u989d']（\u952e\u540d\u672c\u6765\u5c31\u662f\u4e2d\u6587）<\/td>\n\u6b63\u5e38<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      \u5dee\u5f02\u7684\u6839\u56e0\u662f\u300cdimensions \u662f\u91cd\u65b0\u5b9a\u4e49\u5217\u540d，\u4e0d\u662f\u8d34\u6807\u7b7e\u300d：\u5bf9\u8c61\u6570\u7ec4\u7684\u53d6\u503c\u9760\u5217\u540d\u53bb row[\u5217\u540d] \u91cc\u62ff，\u4f60\u628a\u5217\u540d\u6539\u6210 \u9500\u552e\u989d \u4e4b\u540e，\u6e90\u91cc\u6ca1\u6709\u8fd9\u4e2a\u952e，\u6bcf\u4e00\u5217\u90fd\u53d6\u4e0d\u5230\u503c\u2014\u2014\u8fde\u6539\u7528\u4e0b\u6807\u7f16\u7801\u90fd\u6551\u4e0d\u56de\u6765（A\u2019 \u90a3\u884c）\u3002\u800c\u4e8c\u7ef4\u6570\u7ec4\u548c\u6309\u5217\u5bf9\u8c61\u4e0a dimensions \u662f\u5b89\u5168\u7684，\u56e0\u4e3a\u524d\u8005\u672c\u6765\u5c31\u6ca1\u6709\u81ea\u5e26\u5217\u540d（\u8868\u5934\u88ab\u8986\u76d6\u662f\u5e94\u8be5\u7684），\u540e\u8005\u7684\u952e\u540d\u5c31\u662f\u4f60\u5199\u7684\u540d\u5b57\u3002<\/p>\n

      displayName \u53ea\u5f71\u54cd\u300c\u663e\u793a\u300d，\u53d6\u503c\u4ecd\u7528 name\u3002\u8fd8\u6709\u4e00\u4e2a\u4e0d\u5bf9\u79f0\u7684\u7ec6\u8282\u503c\u5f97\u8bb0：<\/p>\n

      \/\/ \u8f74\u6807\u7b7e\u548c\u56fe\u4f8b\u7528\u7684\u662f displayName，\u4f46\u56de\u8c03\u53c2\u6570\u91cc\u7ed9\u7684\u662f\u539f\u59cb name<\/span>
      \ntooltip<\/span>:<\/span> {<\/span> formatter<\/span>:<\/span> (<\/span>p<\/span>)<\/span> =><\/span> p.<\/span>dimensionNames.<\/span>join<\/span>(<\/span>','<\/span>)<\/span> }<\/span> \/\/ \u5b9e\u6d4b\u6253\u5370 "date,sales"，\u4e0d\u662f "\u65e5\u671f,\u9500\u552e\u989d"<\/span><\/p>\n

      \u6240\u4ee5 dimensions \u6570\u7ec4\u8bf7\u6309\u6e90\u91cc\u7684\u952e\u540d\u539f\u6837\u6284\u4e00\u904d\u518d\u6539\u540d，\u6216\u8005\u76f4\u63a5\u7528\u5b83\u66f4\u5b89\u5168\u7684\u5f62\u5f0f {name, displayName}\u2014\u2014\u672c\u4e66\u540e\u9762\u6240\u6709\u7ae0\u8282\u90fd\u53ea\u7528\u540e\u8005\u3002<\/p>\n

      \u516d\u3001seriesLayoutBy：\u628a\u8868\u8f6c\u7f6e\u8fc7\u6765\u8bfb<\/h4>\n

      \u9ed8\u8ba4\u8bfb\u6cd5\u662f\u300c\u4e00\u5217\u4e00\u4e2a\u7cfb\u5217\u300d（'column'）\u3002Excel \u91cc\u66f4\u5e38\u89c1\u7684\u8868\u662f\u300c\u4e00\u884c\u4e00\u4e2a\u6307\u6807\u300d：<\/p>\n

      01 \u6708 02 \u6708 03 \u6708 \u2026 12 \u6708
      \n\u9500\u552e\u989d 3126085 3099878 3091234 \u2026 4068117
      \n\u676f\u6570 110552 109998 109590 \u2026 141106
      \n\u8ba2\u5355\u6570 69039 69696 69374 \u2026 88282<\/p>\n

      \u8fd9\u79cd\u8868\u53ea\u8981\u7ed9 dataset \u52a0\u4e00\u884c seriesLayoutBy: 'row'：<\/p>\n

      dataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> transposed,<\/span> seriesLayoutBy<\/span>:<\/span> 'row'<\/span> }<\/span>,<\/span> \/\/ transposed \u662f\u4e0a\u9762\u90a3\u5f20\u8868\u7684\u4e8c\u7ef4\u6570\u7ec4<\/span>
      \nseries<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span> }<\/span>,<\/span> {<\/span> type<\/span>:<\/span> 'line'<\/span> }<\/span>]<\/span><\/p>\n

      \u5b9e\u6d4b（\u672c\u7ae0\u9875\u9762\u6a21\u5f0f\u2463）：\u56fe\u4f8b\u6587\u5b57\u662f \u9500\u552e\u989d \u548c \u676f\u6570\u2014\u2014\u7cfb\u5217\u540d\u81ea\u52a8\u53d6\u4e86\u6bcf\u884c\u7684\u7b2c\u4e00\u4e2a\u683c\u5b50；\u7c7b\u76ee\u8f74\u4ecd\u662f 01 \u6708～12 \u6708\u3002\u4e5f\u5c31\u662f\u8bf4\u884c\u5e03\u5c40\u4e0b\u300c\u7b2c\u4e00\u884c = \u7c7b\u76ee\u540d\u3001\u7b2c\u4e00\u5217 = \u7cfb\u5217\u540d\u300d，\u548c\u5217\u5e03\u5c40\u6b63\u597d\u4ea4\u6362\u3002<\/p>\n

      \u4e09\u6761\u8fb9\u754c：<\/p>\n

        \n
      • series: []（\u4e00\u4e2a\u7cfb\u5217\u90fd\u4e0d\u5199）\u5728\u884c\u5e03\u5c40\u4e0b\u4e0d\u4f1a\u81ea\u52a8\u5c55\u5f00\u6210\u4e09\u884c：\u5b9e\u6d4b\u7cfb\u5217\u6570 0，\u56fe\u4e0a\u6ca1\u6709\u4efb\u4f55\u6570\u636e\u56fe\u5f62\u3002\u884c\u5e03\u5c40\u53ea\u6539\u53d8\u8bfb\u6cd5，\u4e0d\u66ff\u4f60\u9020\u7cfb\u5217\u3002<\/li>\n
      • \u5bf9\u8c61\u6570\u7ec4\u4e0a\u5199 seriesLayoutBy: 'row' \u6ca1\u6709\u4efb\u4f55\u4f5c\u7528：\u5b9e\u6d4b undefined\/'column'\/'row' \u4e09\u79cd\u5199\u6cd5\u5f97\u5230\u9010\u5b57\u8282\u76f8\u540c\u7684 6,468 \u5b57\u8282 SVG\u3002\u5bf9\u8c61\u6570\u7ec4\u6ca1\u6709\u300c\u884c\/\u5217\u300d\u53ef\u8f6c，\u8fd9\u6761\u89c4\u5219\u5199\u5728\u6e90\u7801\u7684\u8bfb\u8868\u903b\u8f91\u91cc，\u4e0d\u5728\u914d\u7f6e\u5c42\u3002<\/li>\n
      • \u8fd9\u4e2a\u5b57\u6bb5 dataset \u4e0a\u548c series \u4e0a\u90fd\u80fd\u5199，\u5199\u5728\u7cfb\u5217\u4e0a\u8868\u793a\u300c\u53ea\u6709\u8fd9\u4e2a\u7cfb\u5217\u6309\u884c\u8bfb\u300d（\u7b2c 33 \u7ae0\u4f1a\u7528\u5230\u6df7\u5408\u5e03\u5c40）\u3002<\/li>\n<\/ul>\n

        \u4e03\u3001\u4e00\u4efd\u6570\u636e\u5582\u591a\u4e2a\u7cfb\u5217：datasetIndex\u3001\u94fe\u5f0f\u5f15\u7528\u4e0e transform<\/h4>\n

        dataset \u5199\u6210\u6570\u7ec4\u5c31\u6709\u4e86\u300c\u591a\u4efd\u8868\u300d，\u8fd9\u65f6\u5fc5\u987b\u8bb2\u6e05\u695a\u8c01\u5403\u54ea\u4e00\u4efd：<\/p>\n

        dataset<\/span>:<\/span> [<\/span>
        \n {<\/span> id<\/span>:<\/span> 'raw'<\/span>,<\/span> source<\/span>:<\/span> monthly }<\/span>,<\/span> \/\/ \u7b2c 0 \u4efd<\/span>
        \n {<\/span> id<\/span>:<\/span> 'big'<\/span>,<\/span> fromDatasetId<\/span>:<\/span> 'raw'<\/span>,<\/span> transform<\/span>:<\/span> [<\/span> \/\/ \u7b2c 1 \u4efd：\u5403\u7b2c 0 \u4efd，\u5148\u8fc7\u6ee4\u518d\u6392\u5e8f<\/span>
        \n {<\/span> type<\/span>:<\/span> 'filter'<\/span>,<\/span> config<\/span>:<\/span> {<\/span> dimension<\/span>:<\/span> 'sales'<\/span>,<\/span> '>'<\/span>:<\/span> 4000000<\/span> }<\/span> }<\/span>,<\/span>
        \n {<\/span> type<\/span>:<\/span> 'sort'<\/span>,<\/span> config<\/span>:<\/span> {<\/span> dimension<\/span>:<\/span> 'sales'<\/span>,<\/span> order<\/span>:<\/span> 'desc'<\/span> }<\/span> }<\/span>
        \n ]<\/span> }<\/span>
        \n]<\/span>,<\/span>
        \nseries<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span>,<\/span> datasetId<\/span>:<\/span> 'big'<\/span>,<\/span> encode<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 'month'<\/span>,<\/span> y<\/span>:<\/span> 'sales'<\/span> }<\/span> }<\/span>]<\/span><\/p>\n

        \u56db\u6761\u5b9e\u6d4b\u89c4\u5219：<\/p>\n

      • \u7cfb\u5217\u9ed8\u8ba4\u53ea\u5403\u7b2c 0 \u4efd\u3002 \u4e24\u4efd dataset\u3001\u4e24\u4e2a\u7cfb\u5217\u90fd\u4e0d\u5199 datasetIndex\/datasetId \u65f6，\u5b9e\u6d4b\u4e24\u4e2a\u7cfb\u5217\u8bfb\u5230\u7684\u90fd\u662f\u7b2c 0 \u4efd（\u5404 12 \u884c，month\/sales\/cups\/orders \u56db\u5217\u9f50\u5168），\u7b2c 2 \u4efd\u6839\u672c\u6ca1\u88ab\u770b\u8fc7\u4e00\u773c\u3002\u8ba4\u9886\u9760 series.datasetIndex（\u4e0b\u6807）\u6216 series.datasetId（\u540d\u5b57），\u5b9e\u6d4b\u540e\u8005\u751f\u6548：\u67f1\u5403 d\/v\u3001\u7ebf\u5403 avgTicket\u3002<\/li>\n
      • transform \u53ea\u80fd\u5199\u5728 dataset \u4e0a\u3002 \u628a\u5b83\u5199\u5230\u7cfb\u5217\u4e0a\u662f\u5408\u6cd5\u7684\u952e\u540d\u3001\u65e0\u6548\u7684\u5199\u6cd5：\u5b9e\u6d4b 12 \u884c\u5168\u5728，\u4e00\u6761\u90fd\u6ca1\u88ab\u8fc7\u6ee4\u6389\u3002<\/li>\n
      • \u591a\u5c42\u94fe\u7684\u8f93\u5165\u9ed8\u8ba4\u662f\u7b2c 0 \u4efd，\u4e0d\u662f\u5b83\u7684\u4e0a\u4e00\u5c42\u3002 \u8fd9\u6761\u6700\u5bb9\u6613\u9519：<\/li>\n

        dataset<\/span>:<\/span> [<\/span>
        \n {<\/span> source<\/span>:<\/span> src }<\/span>,<\/span> \/\/ 4 \u884c<\/span>
        \n {<\/span> transform<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'filter'<\/span>,<\/span> config<\/span>:<\/span> {<\/span> dimension<\/span>:<\/span> 'sales'<\/span>,<\/span> '>'<\/span>:<\/span> 40000<\/span> }<\/span> }<\/span> }<\/span>,<\/span> \/\/ \u5e94\u5269 2 \u884c<\/span>
        \n {<\/span> transform<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'sort'<\/span>,<\/span> config<\/span>:<\/span> {<\/span> dimension<\/span>:<\/span> 'sales'<\/span>,<\/span> order<\/span>:<\/span> 'desc'<\/span> }<\/span> }<\/span> }<\/span> \/\/ \u2190 \u8f93\u5165\u662f\u8c01？<\/span>
        \n]<\/span>
        \n\/\/ series: [{ type: 'bar', datasetIndex: 2 }]<\/span><\/p>\n

        \u5b9e\u6d4b：\u7cfb\u5217\u8bfb\u5230 4 \u884c（66005, 46883, 39529, 32359，\u5168\u8868\u964d\u5e8f）\u2014\u2014\u7b2c 2 \u5c42\u6839\u672c\u6ca1\u5403\u5230\u8fc7\u6ee4\u7ed3\u679c，\u56e0\u4e3a\u6ca1\u58f0\u660e\u8f93\u5165\u65f6\u9ed8\u8ba4\u4ece\u7b2c 0 \u4efd\u53d6\u3002\u52a0\u4e0a fromDatasetIndex: 1 \u4e4b\u540e\u7acb\u523b\u53d8\u6210 2 \u884c（66005, 46883），\u5199\u6210 fromDatasetId \u4e5f\u4e00\u6837\u3002<\/p>\n

        \u6240\u4ee5：\u80fd\u7528\u4e00\u5c42\u7ba1\u9053\u5c31\u522b\u62c6\u6210\u591a\u5c42\u3002 \u4e00\u4e2a dataset \u91cc\u5199 transform: [filter, sort] \u662f\u6570\u7ec4\u987a\u5e8f\u6267\u884c\u7684（\u5b9e\u6d4b\u540c\u6837\u5f97 2 \u884c\u3001\u540c\u6837\u7684\u987a\u5e8f）；\u53cd\u8fc7\u6765\u5199 [sort, filter] \u5f97\u5230\u7684\u662f\u300c\u5148\u6392\u5e8f\u518d\u6311\u300d\u7684\u7ed3\u679c，\u987a\u5e8f\u53d8\u4e86\u8f93\u51fa\u884c\u7684\u6b21\u5e8f\u5c31\u53d8（\u5b9e\u6d4b 6 \u884c\u6708\u4efd\u4ece 01 07 06 08 11 10 \u53d8\u6210 10 11 08 06 07 01）\u3002transform \u6570\u7ec4\u5c31\u662f\u6d41\u6c34\u7ebf，\u4e66\u5199\u987a\u5e8f\u5373\u6267\u884c\u987a\u5e8f\u3002<\/p>\n

      • \u4e00\u4efd\u6574\u5f62\u7ed3\u679c\u53ef\u4ee5\u540c\u65f6\u5582\u591a\u4e2a\u7cfb\u5217，\u8fd9\u6b63\u662f dataset \u7684\u4ef7\u503c：<\/li>\n

        dataset<\/span>:<\/span> [<\/span>{<\/span> source<\/span>:<\/span> monthly }<\/span>,<\/span>
        \n {<\/span> transform<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'filter'<\/span>,<\/span> config<\/span>:<\/span> {<\/span> dimension<\/span>:<\/span> 'sales'<\/span>,<\/span> '>'<\/span>:<\/span> 4000000<\/span> }<\/span> }<\/span>]<\/span> }<\/span>]<\/span>,<\/span>
        \nseries<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span>,<\/span> datasetIndex<\/span>:<\/span> 1<\/span>,<\/span> encode<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 'month'<\/span>,<\/span> y<\/span>:<\/span> 'sales'<\/span> }<\/span> }<\/span>,<\/span>
        \n {<\/span> type<\/span>:<\/span> 'line'<\/span>,<\/span> datasetIndex<\/span>:<\/span> 1<\/span>,<\/span> encode<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 'month'<\/span>,<\/span> y<\/span>:<\/span> 'cups'<\/span> }<\/span> }<\/span>]<\/span><\/p>\n

        \u5b9e\u6d4b\u4e24\u4e2a\u7cfb\u5217\u5404 6 \u884c，\u8fc7\u6ee4\u53ea\u505a\u4e86\u4e00\u6b21\u3002\u5199\u4e09\u4efd\u94fe\u3001\u8ba9\u4e24\u4e2a\u7cfb\u5217\u5206\u522b\u8ba4\u9886\u7b2c 1 \u5c42\u548c\u7b2c 2 \u5c42\u4e5f\u5408\u6cd5，\u4f46\u90a3\u4e24\u4e2a\u7cfb\u5217\u7684\u7c7b\u76ee\u987a\u5e8f\u4e0d\u540c，\u4f1a\u5171\u7528\u4e00\u6839\u7c7b\u76ee\u8f74\u2014\u2014\u5b9e\u6d4b\u8f74\u4e0a\u5192\u51fa 12 \u4e2a\u7c7b\u76ee\u6587\u5b57（\u524d 6 \u4e2a\u539f\u5e8f\u3001\u540e 6 \u4e2a\u964d\u5e8f）\u3002\u540c\u4e00\u5f20\u56fe\u4e0a\u7684\u591a\u4e2a\u7cfb\u5217\u5e94\u5f53\u5403\u540c\u4e00\u4efd\u7ed3\u679c\u3002<\/p>\n

        filter \u4e0e sort \u662f 6.1.0 \u552f\u4e00\u7684\u4e24\u4e2a\u5185\u7f6e\u6574\u5f62\u5668（\u6e90\u7801 node_modules\/echarts\/lib\/component\/transform\/filterTransform.js \u7b2c 48 \u884c\u3001\u540c\u76ee\u5f55\u7684 sortTransform.js \u7b2c 54 \u884c）\u3002\u5b83\u4eec\u7684\u6ce8\u518c\u540d\u5e26 echarts: \u524d\u7f00，\u4f46\u914d\u7f6e\u91cc\u5fc5\u987b\u5199\u4e0d\u5e26\u524d\u7f00\u7684\u540d\u5b57：<\/p>\n\n\u4f60\u5199\u7ed3\u679c<\/tr>\n\n\n\n\n
        type: 'filter' \/ type: 'sort'<\/td>\n\u6b63\u5e38<\/td>\n<\/tr>\n
        type: 'echarts:filter'<\/td>\n\u629b\u9519\u3002\u751f\u4ea7\u7248 Error:（\u6d88\u606f\u662f\u7a7a\u7684），\u5f00\u53d1\u7248 Can not find transform on type "echarts:filter".<\/td>\n<\/tr>\n
        type: 'aggregate'\u3001type: 'print'<\/td>\n\u540c\u6837\u629b\u9519\u2014\u2014\u805a\u5408\u4e0d\u662f\u5185\u7f6e transform，\u5f97\u81ea\u5df1\u5199（\u7b2c 33 \u7ae0）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        filter \u7684\u914d\u7f6e\u662f\u4e00\u4e2a\u300c\u5173\u7cfb\u6761\u4ef6\u5bf9\u8c61\u300d，\u8fd0\u7b97\u7b26\u6709 >\u3001>=\u3001<\u3001<=\u3001=\u3001!=\u3001<>\u3001value\u3001reg \u8fd9\u4e9b（\u5b9e\u6d4b >\u3001>=\u3001=\u3001reg \u90fd\u53ef\u7528），\u590d\u5408\u6761\u4ef6\u7528 and\/or\/not \u5d4c\u5957：<\/p>\n

        transform<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'filter'<\/span>,<\/span> config<\/span>:<\/span> {<\/span>
        \n or<\/span>:<\/span> [<\/span>{<\/span> dimension<\/span>:<\/span> 'sales'<\/span>,<\/span> '>'<\/span>:<\/span> 6000000<\/span> }<\/span>,<\/span> {<\/span> not<\/span>:<\/span> {<\/span> dimension<\/span>:<\/span> 'openStores'<\/span>,<\/span> '>='<\/span>:<\/span> 5<\/span> }<\/span> }<\/span>]<\/span>
        \n}<\/span> }<\/span><\/p>\n

        sort \u53ea\u8981 {dimension, order: 'asc'|'desc'}，\u4e5f\u53ef\u4ee5\u7ed9\u4e00\u4e2a\u6570\u7ec4\u6309\u591a\u5217\u6392\u3002sort \u53ea\u5403\u4e8c\u7ef4\u6570\u7ec4\u548c\u5bf9\u8c61\u6570\u7ec4：\u6e90\u662f\u6309\u5217\u5bf9\u8c61\u65f6\u5b9e\u6d4b\u629b\u9519（\u5f00\u53d1\u7248\u6d88\u606f Can not find dimension info via: sales. Existing dimensions: [{"index":0},{"index":1}]）\u3002<\/p>\n

        \u516b\u3001\u7f3a\u5931\u503c\u4e0e\u810f\u503c：ECharts \u600e\u4e48\u5224\u7a7a<\/h4>\n

        \u8fd9\u662f\u672c\u7ae0\u6700\u540e\u4e00\u5757，\u4e5f\u662f\u4e3b\u7ebf\u6570\u636e\u6545\u610f\u57cb\u7684\u96f7\u3002data\/sales-daily.json \u91cc\u6709\u56db\u4e2a\u663e\u5f0f\u4fdd\u7559\u7684\u7f3a\u5931\u65e5（2025-03-14\u30012025-03-15\u30012025-07-22\u30012025-11-03），\u5b83\u4eec\u7684\u6570\u503c\u5b57\u6bb5\u662f null\u3002<\/p>\n

        2025-03 \u9010\u65e5\u9500\u552e\u989d（31 \u5929，\u7b2c 14\u300115 \u65e5\u662f null）
        \n \u250c\u2500\u2500\u252c\u2500\u2500\u252c\u2500\u2500\u252c\u2500\u2500\u252c\u2500\u2500\u252c\u2500\u2500\u252c\u2500\u2500\u252c\u2500\u2500\u252c\u2500\u2500\u2510
        \n \u250213\u2502 \u2502 \u2502 \u250216\u250217\u250218\u250219\u250220\u2502 \u2190 \u5b9e\u6d4b 29 \u6839\u67f1\u5b50，\u4e0d\u662f 31 \u6839
        \n \u2514\u2500\u2500\u2534\u2500\u2500\u2534\u2500\u2500\u2534\u2500\u2500\u2534\u2500\u2500\u2534\u2500\u2500\u2534\u2500\u2500\u2534\u2500\u2500\u2534\u2500\u2500\u2518
        \n \u25b2 \u25b2
        \n null null \u7a7a\u4f4d\u4e0d\u753b，\u4f46\u7c7b\u76ee\u8fd8\u5728（\u8f74\u4e0a\u4ecd\u5360\u4e00\u683c）<\/p>\n

        \u6298\u7ebf\u65ad\u5728\u54ea\u91cc，connectNulls \u6539\u7684\u53c8\u662f\u4ec0\u4e48：<\/p>\n

        connectNulls \u4e0d\u5199 \/ false connectNulls: true
        \n M110.2 156.4 L\u2026 M110.2 156.4 L\u2026
        \n \u2026L603.8 201 \u2026L603.8 201
        \n \u250c\u2500 M \u51fa\u73b0 2 \u6b21 \u2500\u2510 \u250c\u2500 M \u51fa\u73b0 1 \u6b21 \u2500\u2510
        \n \u4e00\u6761 path，\u4e24\u6bb5\u7ebf，\u4e2d\u95f4\u65ad\u5f00\u653e\u5927 \u4e00\u6761 path，\u4e00\u6bb5\u7ebf，\u76f4\u63a5\u8de8\u8fc7\u53bb<\/p>\n

        \u5b9e\u6d4b\u7ec6\u8282（d \u5c5e\u6027\u957f\u5ea6\u4e24\u79cd\u60c5\u51b5\u90fd\u662f 331 \u5b57\u7b26，SVG \u90fd\u662f 13,227 \u5b57\u8282）：M（\u79fb\u5230\u67d0\u70b9）\u548c L（\u753b\u5230\u67d0\u70b9）\u90fd\u662f\u4e00\u4e2a\u5b57\u6bcd，\u65ad\u70b9\u53ea\u591a\u4e00\u4e2a M，\u5b57\u8282\u6570\u5b8c\u5168\u4e00\u6837\u3002 \u6240\u4ee5\u300c\u770b\u5b57\u8282\u6709\u6ca1\u6709\u53d8\u300d\u5224\u65ad\u4e0d\u4e86\u65ad\u7ebf，\u5f97\u6570 M \u7684\u4e2a\u6570\u2014\u2014\u672c\u7ae0\u9875\u9762\u53f3\u4e0b\u89d2\u90a3\u4e2a\u8bfb\u6570\u5c31\u662f\u5728\u6570\u5b83\u3002<\/p>\n

        \u5b8c\u6574\u7684\u810f\u503c\u5bf9\u7167\u8868（\u503c\u653e\u5728 series.data \u91cc\u548c\u653e\u5728 dataset \u7684\u4e00\u5217\u91cc，\u884c\u4e3a\u5b8c\u5168\u76f8\u540c；4 \u4e2a\u6570\u636e\u70b9 10, <\u810f\u503c>, 30, 40，\u6570 fill="#5070dd" \u7684 path \u5f97\u67f1\u6570）：<\/p>\n\n\u8f93\u5165\u89e3\u6790\u51fa\u7684\u7b2c 2 \u4e2a\u503c\u753b\u51fa\u7684\u67f1\u5b50\u8bf4\u660e<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
        \u6b63\u5e38\u6570\u5b57 20<\/td>\n20<\/td>\n4<\/td>\n\u2014<\/td>\n<\/tr>\n
        null<\/td>\nNaN<\/td>\n3<\/td>\n\u4e0d\u753b，\u4e5f\u4e0d\u62a5\u9519<\/td>\n<\/tr>\n
        undefined<\/td>\nNaN<\/td>\n3<\/td>\n\u540c\u4e0a<\/td>\n<\/tr>\n
        \u5b57\u7b26\u4e32 '-'<\/td>\nNaN<\/td>\n3<\/td>\n\u5b98\u65b9\u6587\u6863\u63a8\u8350\u7684\u300c\u65e0\u6570\u636e\u300d\u5199\u6cd5，\u7b49\u4ef7\u4e8e null<\/td>\n<\/tr>\n
        \u7a7a\u5b57\u7b26\u4e32 ''<\/td>\nNaN<\/td>\n3<\/td>\n<\/td>\n<\/tr>\n
        \u5b57\u7b26\u4e32\u6570\u5b57 '20'<\/td>\n20<\/td>\n4<\/td>\n\u4f1a\u88ab\u8f6c\u6210\u6570\u5b57，CSV \u76f4\u63a5\u5582\u8fdb\u6765\u80fd\u7528<\/td>\n<\/tr>\n
        \u5b57\u7b26\u4e32\u5c0f\u6570 '22.75'<\/td>\n22.75<\/td>\n4<\/td>\n\u540c\u4e0a<\/td>\n<\/tr>\n
        \u5e26\u5355\u4f4d '20 \u5143'<\/td>\nNaN<\/td>\n3<\/td>\n\u5355\u4f4d\u5fc5\u987b\u81ea\u5df1\u5265（\u7b2c 33 \u7ae0）<\/td>\n<\/tr>\n
        NaN<\/td>\nNaN<\/td>\n3<\/td>\n<\/td>\n<\/tr>\n
        0<\/td>\n0<\/td>\n4<\/td>\n0 \u662f\u6709\u6548\u503c，\u753b\u51fa\u4e00\u6839\u9ad8\u5ea6\u4e3a 0 \u7684\u67f1（\u5b9e\u6d4b d \u91cc\u662f l0 0）<\/td>\n<\/tr>\n
        false<\/td>\n0<\/td>\n4<\/td>\n\u88ab\u5f53 0<\/td>\n<\/tr>\n
        true<\/td>\n1<\/td>\n4<\/td>\n\u88ab\u5f53 1<\/td>\n<\/tr>\n
        \u7a7a\u5bf9\u8c61 {}<\/td>\nNaN<\/td>\n3<\/td>\n<\/td>\n<\/tr>\n
        \u5b57\u7b26\u4e32\u65e5\u671f '2023-01-01'<\/td>\nNaN<\/td>\n3<\/td>\n\u6570\u503c\u8f74\u4e0d\u5403\u65e5\u671f\u5b57\u7b26\u4e32，\u8f74\u8bf7\u7528 type: 'time'<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        \u7c7b\u76ee\u8f74\u4e0a\u7684\u810f\u503c\u662f\u53e6\u4e00\u56de\u4e8b\u2014\u2014\u5b83\u4eec\u4e0d\u4e22\u6570\u636e，\u53ea\u662f\u53d8\u6210\u96be\u770b\u7684\u6807\u7b7e\u6587\u5b57：['a', null, 'c', 'd'] \u5b9e\u6d4b\u8f74\u4e0a\u5370\u51fa a null c d（null \u88ab\u8f6c\u6210\u4e86\u5b57\u7b26\u4e32），['a', '-', 'c', 'd'] \u5370 -，['a', '', 'c', 'd'] \u90a3\u4e00\u683c\u4ec0\u4e48\u90fd\u4e0d\u5370\u3002<\/p>\n

        \u997c\u56fe\u5bf9\u8fd9\u4e9b\u503c\u66f4\u4e0d\u5bbd\u5bb9（\u6bcf\u9879\u5199\u6210 {name, value}）：<\/p>\n\n\u997c\u56fe\u7684\u6570\u636e\u5b9e\u6d4b\u6247\u5f62 path \u6570\u6807\u7b7e\u6587\u5b57<\/tr>\n\n\n\n\n\n\n
        12, 8<\/td>\n2<\/td>\n\u98790\u3001\u98791<\/td>\n<\/tr>\n
        12, null \/ 12, '-'<\/td>\n1<\/td>\n\u53ea\u6709\u98790<\/td>\n<\/tr>\n
        12, 0<\/td>\n1<\/td>\n\u98790\u3001\u98791（0 \u503c\u9879\u6709\u6807\u7b7e\u4f46\u6ca1\u6709\u89d2\u5ea6）<\/td>\n<\/tr>\n
        12, -5<\/td>\n1<\/td>\n\u53ea\u6709\u98790<\/td>\n<\/tr>\n
        12, '8'<\/td>\n2<\/td>\n\u98790\u3001\u98791（\u5b57\u7b26\u4e32\u6570\u5b57\u7167\u7b97）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        \u4e5d\u3001\u4e00\u7ef4\u6570\u636e\u4e0e\u4e8c\u7ef4\u6570\u636e：\u56fe\u5f62\u9002\u914d\u89c4\u5219<\/h4>\n

        \u540c\u4e00\u4e2a\u6e90，\u5582\u7ed9\u4e0d\u540c\u7684\u56fe\u8868\u7c7b\u578b\u9700\u8981\u7684\u7ef4\u6570\u4e0d\u4e00\u6837\u3002\u5b9e\u6d4b\u9002\u914d\u8868：<\/p>\n\n\u4f60\u7ed9\u7684\u5f62\u72b6\u67f1\u72b6\u56fe \/ \u6298\u7ebf\u56fe\u6563\u70b9\u56fe\u997c\u56fe<\/tr>\n\n\n\n\n\n\n\n
        \u4e00\u7ef4\u6570\u5b57\u6570\u7ec4（series.data）<\/td>\n\u2705 \u6309\u4e0b\u6807\u5f53\u7c7b\u76ee<\/td>\n\u26a0\ufe0f \u53ea\u6709 x \u6709\u503c，y \u662f null（\u5b9e\u6d4b\u7b26\u53f7\u6570 0）<\/td>\n\u2705 \u503c\u5373\u89d2\u5ea6，\u65e0\u540d\u5b57<\/td>\n<\/tr>\n
        \u4e8c\u7ef4\u6570\u7ec4 [[12],[8],[20]]<\/td>\n\u26a0\ufe0f \u7c7b\u76ee\u8f74\u4e0a 0 \u6839\u67f1（\u5b9e\u6d4b 949 \u5b57\u8282）<\/td>\n\u2705 \u4e24\u4e2a\u6570\u5f53 x\/y<\/td>\n\u2705 3 \u4e2a\u6247\u5f62<\/td>\n<\/tr>\n
        \u4e8c\u7ef4\u6570\u7ec4 [['\u7532',12],['\u4e59',8]]<\/td>\n\u2705 \u7b2c\u4e00\u7ef4\u5f53\u7c7b\u76ee<\/td>\n\u2705<\/td>\n\u274c \u6709\u5143\u7d20\u65e0\u51e0\u4f55（\u89c1\u5751 4）<\/td>\n<\/tr>\n
        \u5bf9\u8c61\u6570\u7ec4<\/td>\n\u2705 \u9700\u8981 encode \u6216\u6392\u961f<\/td>\n\u2705 \u4e24\u4e2a\u6570\u503c\u7ef4\u81ea\u52a8\u6210 x\/y<\/td>\n\u2705 \u5b57\u6bb5\u540d\u662f name\/value \u65f6\u81ea\u52a8，\u5426\u5219\u8981 encode<\/td>\n<\/tr>\n
        dataset \u53ea\u6709\u4e00\u5217<\/td>\n\u274c 0 \u6839\u67f1（958 \u5b57\u8282）<\/td>\n\u274c<\/td>\n\u2014<\/td>\n<\/tr>\n
        \u4e8c\u7ef4\u65e0\u8868\u5934\u4e14\u4e0d\u5199 dimensions<\/td>\n\u2705 \u4f46\u5217\u540d\u9000\u5316\u6210 x\/y\/value<\/td>\n\u2705<\/td>\n\u2014<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        \u4e24\u6761\u9700\u8981\u8bb0\u4f4f\u7684\u673a\u5236：<\/p>\n

        \u5355\u5217\u8868\u4f1a\u88ab\u8865\u4e00\u4e2a\u7a7a\u7684 y \u7ef4\u5ea6\u3002 \u5b9e\u6d4b dataset: { source: { v: [1,2,3] } } \u7684\u6a21\u578b\u5c42\u8bfb\u6570\u662f dims: ["v","y"]\u2014\u2014ECharts \u7ed9\u7f3a\u7684\u90a3\u4e2a\u69fd\u4f4d\u9020\u4e86\u4e2a\u540d\u53eb y \u7684\u7ef4\u5ea6，\u4f46\u91cc\u9762\u4e00\u4e2a\u503c\u90fd\u6ca1\u6709，\u4e8e\u662f\u67f1\u9ad8\/\u7ebf\u9ad8\u5168\u90e8\u53d6\u4e0d\u5230，\u56fe\u4e0a\u53ea\u6709\u8f74\u548c\u6587\u5b57（958 \u5b57\u8282\u30010 \u6839\u67f1）\u3002\u6298\u7ebf\u4e5f\u4e00\u6837：1,503 \u5b57\u8282\u30010 \u6761\u7ebf\u3002 \u4fee\u6cd5\u5c31\u662f\u300c\u8865\u4e00\u5217，\u6216\u8005\u628a\u540c\u4e00\u5217\u540c\u65f6\u7f16\u7801\u7ed9 y\u300d\u3002<\/p>\n

        \u4e8c\u7ef4\u6570\u7ec4\u5582\u7ed9\u7c7b\u76ee\u8f74\u65f6，\u7b2c\u4e00\u7ef4\u4f1a\u88ab\u5f53\u6210 x \u503c\u3002 [[12],[8],[20]] \u91cc\u7684 12 \u4f1a\u88ab\u62ff\u53bb\u7c7b\u76ee\u8868\u91cc\u627e\u300c\u7c7b\u76ee 12\u300d，\u627e\u4e0d\u5230\u5c31\u4e00\u6839\u67f1\u90fd\u4e0d\u753b（\u5b9e\u6d4b\u7cfb\u5217\u8bfb\u6570 count: 3 \u4f46 y \u5168\u4e3a null）\u3002\u7c7b\u76ee\u8f74 + \u4e8c\u7ef4\u6570\u636e，\u7b2c\u4e00\u7ef4\u5fc5\u987b\u662f\u7c7b\u76ee\u540d\u3002<\/p>\n

        \n

        \u3010\u6700\u5c0f\u53ef\u8dd1\u3011<\/h3>\n

        \u672c\u7ae0\u7684\u5de5\u7a0b\u662f\u4e00\u5f20\u300c\u5582\u6cd5\u5bf9\u6bd4\u53f0\u300d：\u4e0a\u9762\u4e00\u5f20\u56fe\u914d\u4e94\u4e2a\u6a21\u5f0f\u6309\u94ae，\u4e2d\u95f4\u4e24\u5f20\u5c0f\u56fe\u4e13\u7ba1\u7f3a\u5931\u503c，\u6700\u4e0b\u9762\u4e00\u6bb5\u6587\u5b57\u628a data\/sales-daily.json \u7684\u4f53\u68c0\u7ed3\u679c\u548c\u805a\u5408\u8868\u6253\u5370\u51fa\u6765\u3002\u5efa ch10 \u6587\u4ef6\u5939，\u4e24\u4e2a\u6587\u4ef6\u3002<\/p>\n

        <!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/span>
        \n<<\/span>html<\/span> lang<\/span>=<\/span>"<\/span>zh-CN"<\/span><\/span>><\/span><\/span>
        \n<<\/span>head<\/span>><\/span><\/span>
        \n <<\/span>meta<\/span> charset<\/span>=<\/span>"<\/span>UTF-8"<\/span><\/span>><\/span><\/span>
        \n <<\/span>title<\/span>><\/span><\/span>\u7b2c 10 \u7ae0 \u6570\u636e\u600e\u4e48\u5582\u8fdb\u53bb<\/<\/span>title<\/span>><\/span><\/span>
        \n <<\/span>style<\/span>><\/span><\/span>
        \n body<\/span> {<\/span> font<\/span>:<\/span> 14px\/1.7 "Microsoft YaHei"<\/span>,<\/span> sans-serif;<\/span> margin<\/span>:<\/span> 24px;<\/span> color<\/span>:<\/span> #2b2b2b;<\/span> }<\/span>
        \n h1<\/span> {<\/span> font-size<\/span>:<\/span> 20px;<\/span> margin<\/span>:<\/span> 0 0 6px;<\/span> }<\/span>
        \n h2<\/span> {<\/span> font-size<\/span>:<\/span> 15px;<\/span> margin<\/span>:<\/span> 26px 0 6px;<\/span> border-left<\/span>:<\/span> 4px solid #8a5a2b;<\/span> padding-left<\/span>:<\/span> 8px;<\/span> }<\/span>
        \n #status<\/span> {<\/span> background<\/span>:<\/span> #eef5fb;<\/span> border-left<\/span>:<\/span> 4px solid #3d7ab8;<\/span> padding<\/span>:<\/span> 8px 12px;<\/span> margin<\/span>:<\/span> 10px 0 14px;<\/span> }<\/span>
        \n #modeInfo<\/span> {<\/span> background<\/span>:<\/span> #fff8ea;<\/span> border-left<\/span>:<\/span> 4px solid #b6902f;<\/span> padding<\/span>:<\/span> 8px 12px;<\/span> margin<\/span>:<\/span> 8px 0 0;<\/span>
        \n font-size<\/span>:<\/span> 13px;<\/span> min-height<\/span>:<\/span> 3.4em;<\/span> }<\/span>
        \n #report<\/span> {<\/span> background<\/span>:<\/span> #f6f4f1;<\/span> border<\/span>:<\/span> 1px solid #d9d2c7;<\/span> padding<\/span>:<\/span> 12px;<\/span> margin<\/span>:<\/span> 0;<\/span>
        \n white-space<\/span>:<\/span> pre;<\/span> overflow<\/span>:<\/span> auto;<\/span> font<\/span>:<\/span> 12px\/1.7 Consolas,<\/span> monospace;<\/span> }<\/span>
        \n button<\/span> {<\/span> padding<\/span>:<\/span> 6px 12px;<\/span> margin<\/span>:<\/span> 0 8px 8px 0;<\/span> cursor<\/span>:<\/span> pointer;<\/span> }<\/span>
        \n p.tip<\/span> {<\/span> font-size<\/span>:<\/span> 12px;<\/span> color<\/span>:<\/span> #6f675c;<\/span> margin<\/span>:<\/span> 6px 0 0;<\/span> }<\/span>
        \n <\/span><\/span><\/<\/span>style<\/span>><\/span><\/span>
        \n<\/<\/span>head<\/span>><\/span><\/span>
        \n<<\/span>body<\/span>><\/span><\/span>
        \n <<\/span>h1<\/span>><\/span><\/span>\u540c\u4e00\u4efd\u6708\u8868，\u4e94\u79cd\u5582\u6cd5\u2014\u2014\u770b\u6e05\u695a ECharts \u66ff\u4f60\u9009\u4e86\u54ea\u4e00\u5217<\/<\/span>h1<\/span>><\/span><\/span>
        \n <<\/span>p<\/span> id<\/span>=<\/span>"<\/span>status"<\/span><\/span>><\/span><\/span>\u6b63\u5728\u8bfb data\/sales-daily.json \u2026\u2026（\u672c\u9875\u7528\u4e86 fetch，\u5fc5\u987b\u7528 node tools\/serve.mjs \u6253\u5f00）<\/<\/span>p<\/span>><\/span><\/span><\/p>\n

        <<\/span>h2<\/span>><\/span><\/span>\u4e00\u3001\u5582\u6cd5\u5bf9\u6bd4\u53f0<\/<\/span>h2<\/span>><\/span><\/span>
        \n <<\/span>div<\/span> id<\/span>=<\/span>"<\/span>chart"<\/span><\/span> style<\/span>=<\/span>"<\/span>width<\/span>:<\/span>680px;<\/span> height<\/span>:<\/span>380px;<\/span><\/span>"<\/span><\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
        \n <<\/span>p<\/span>><\/span><\/span>
        \n <<\/span>button<\/span> id<\/span>=<\/span>"<\/span>btnAuto"<\/span><\/span>><\/span><\/span>\u2460 \u81ea\u52a8\u6392\u961f（\u4e0d\u5199 encode）<\/<\/span>button<\/span>><\/span><\/span>
        \n <<\/span>button<\/span> id<\/span>=<\/span>"<\/span>btnEncode"<\/span><\/span>><\/span><\/span>\u2461 encode \u9489\u4f4f（\u676f\u6570 \/ \u8ba2\u5355\u6570）<\/<\/span>button<\/span>><\/span><\/span>
        \n <<\/span>button<\/span> id<\/span>=<\/span>"<\/span>btnFilter"<\/span><\/span>><\/span><\/span>\u2462 transform（filter + sort \u94fe）<\/<\/span>button<\/span>><\/span><\/span>
        \n <<\/span>button<\/span> id<\/span>=<\/span>"<\/span>btnRow"<\/span><\/span>><\/span><\/span>\u2463 \u884c\u5e03\u5c40（\u8868\u8f6c\u7f6e）<\/<\/span>button<\/span>><\/span><\/span>
        \n <<\/span>button<\/span> id<\/span>=<\/span>"<\/span>btnName"<\/span><\/span>><\/span><\/span>\u2464 displayName \u6539\u540d<\/<\/span>button<\/span>><\/span><\/span>
        \n <\/<\/span>p<\/span>><\/span><\/span>
        \n <<\/span>p<\/span> id<\/span>=<\/span>"<\/span>modeInfo"<\/span><\/span>><\/span><\/span><\/<\/span>p<\/span>><\/span><\/span><\/p>\n

        <<\/span>h2<\/span>><\/span><\/span>\u4e8c\u3001\u7f3a\u5931\u65e5：31 \u5929\u91cc\u6709\u4e24\u5929\u662f null<\/<\/span>h2<\/span>><\/span><\/span>
        \n <<\/span>div<\/span> id<\/span>=<\/span>"<\/span>dirty"<\/span><\/span> style<\/span>=<\/span>"<\/span>width<\/span>:<\/span>680px;<\/span> height<\/span>:<\/span>300px;<\/span><\/span>"<\/span><\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
        \n <<\/span>p<\/span> class<\/span>=<\/span>"<\/span>tip"<\/span><\/span> id<\/span>=<\/span>"<\/span>dirtyInfo"<\/span><\/span>><\/span><\/span><\/<\/span>p<\/span>><\/span><\/span><\/p>\n

        <<\/span>h2<\/span>><\/span><\/span>\u4e09\u3001\u65ad\u70b9：\u6298\u7ebf\u5728 null \u5904\u600e\u4e48\u65ad<\/<\/span>h2<\/span>><\/span><\/span>
        \n <<\/span>div<\/span> id<\/span>=<\/span>"<\/span>gap"<\/span><\/span> style<\/span>=<\/span>"<\/span>width<\/span>:<\/span>680px;<\/span> height<\/span>:<\/span>300px;<\/span><\/span>"<\/span><\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
        \n <<\/span>p<\/span>><\/span><\/span><<\/span>button<\/span> id<\/span>=<\/span>"<\/span>btnGap"<\/span><\/span>><\/span><\/span>\u5207\u6362 connectNulls<\/<\/span>button<\/span>><\/span><\/span><\/<\/span>p<\/span>><\/span><\/span>
        \n <<\/span>p<\/span> class<\/span>=<\/span>"<\/span>tip"<\/span><\/span> id<\/span>=<\/span>"<\/span>gapInfo"<\/span><\/span>><\/span><\/span><\/<\/span>p<\/span>><\/span><\/span><\/p>\n

        <<\/span>h2<\/span>><\/span><\/span>\u56db\u3001\u4f53\u68c0\u62a5\u544a\u4e0e\u805a\u5408\u8868<\/<\/span>h2<\/span>><\/span><\/span>
        \n <<\/span>pre<\/span> id<\/span>=<\/span>"<\/span>report"<\/span><\/span>><\/span><\/span><\/<\/span>pre<\/span>><\/span><\/span><\/p>\n

        <<\/span>script<\/span> src<\/span>=<\/span>"<\/span>..\/..\/lib\/echarts.min.js"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
        \n <<\/span>script<\/span> type<\/span>=<\/span>"<\/span>module"<\/span><\/span> src<\/span>=<\/span>"<\/span>app.js"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
        \n<\/<\/span>body<\/span>><\/span><\/span>
        \n<\/<\/span>html<\/span>><\/span><\/span><\/p>\n

        \/\/ \u7b2c 10 \u7ae0：\u4e3b\u7ebf\u6570\u636e\u767b\u573a\u3002\u4e00\u4efd 1096 \u6761\u7684\u9010\u65e5\u8868，\u5148\u805a\u5408\u6210\u6708\u8868，\u518d\u7528\u4e94\u79cd\u5582\u6cd5\u753b\u540c\u4e00\u5f20\u56fe\u3002<\/span>
        \nasync<\/span> function<\/span> loadDaily<\/span>(<\/span>)<\/span> {<\/span>
        \n const<\/span> resp =<\/span> await<\/span> fetch<\/span>(<\/span>'..\/..\/data\/sales-daily.json'<\/span>)<\/span>;<\/span>
        \n if<\/span> (<\/span>!<\/span>resp.<\/span>ok)<\/span> throw<\/span> new<\/span> Error<\/span>(<\/span>`<\/span>HTTP <\/span>${<\/span>resp.<\/span>status}<\/span><\/span> <\/span>${<\/span>resp.<\/span>statusText}<\/span><\/span>`<\/span><\/span>)<\/span>;<\/span>
        \n return<\/span> resp.<\/span>json<\/span>(<\/span>)<\/span>;<\/span>
        \n}<\/span><\/p>\n

        \/\/ \u805a\u5408：\u5148\u6c42\u548c\u518d\u56db\u820d\u4e94\u5165\u5230\u5206\u3002\u672c\u7ae0\u9875\u9762\u4e0a\u6253\u5370\u7684\u6708\u8868\u3001\u6b63\u6587\u91cc\u5f15\u7528\u7684\u6bcf\u4e2a\u6570\u5b57\u90fd\u51fa\u81ea\u8fd9\u4e24\u884c\u3002<\/span>
        \nconst<\/span> sum<\/span> =<\/span> (<\/span>rows,<\/span> key<\/span>)<\/span> =><\/span> rows.<\/span>reduce<\/span>(<\/span>(<\/span>a,<\/span> r<\/span>)<\/span> =><\/span> a +<\/span> (<\/span>r[<\/span>key]<\/span> ||<\/span> 0<\/span>)<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>
        \nconst<\/span> round2<\/span> =<\/span> (<\/span>v<\/span>)<\/span> =><\/span> Math.<\/span>round<\/span>(<\/span>v *<\/span> 100<\/span>)<\/span> \/<\/span> 100<\/span>;<\/span><\/p>\n

        function<\/span> toMonthly<\/span>(<\/span>rows,<\/span> year<\/span>)<\/span> {<\/span>
        \n const<\/span> out =<\/span> [<\/span>]<\/span>;<\/span>
        \n for<\/span> (<\/span>let<\/span> m =<\/span> 1<\/span>;<\/span> m <=<\/span> 12<\/span>;<\/span> m++<\/span>)<\/span> {<\/span>
        \n const<\/span> tag =<\/span> year +<\/span> '-'<\/span> +<\/span> String<\/span>(<\/span>m)<\/span>.<\/span>padStart<\/span>(<\/span>2<\/span>,<\/span> '0'<\/span>)<\/span>;<\/span>
        \n const<\/span> sub =<\/span> rows.<\/span>filter<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>date.<\/span>startsWith<\/span>(<\/span>tag)<\/span>)<\/span>;<\/span>
        \n out.<\/span>push<\/span>(<\/span>{<\/span> month<\/span>:<\/span> tag.<\/span>slice<\/span>(<\/span>5<\/span>)<\/span> +<\/span> ' \u6708'<\/span>,<\/span> sales<\/span>:<\/span> round2<\/span>(<\/span>sum<\/span>(<\/span>sub,<\/span> 'sales'<\/span>)<\/span>)<\/span>,<\/span>
        \n cups<\/span>:<\/span> sum<\/span>(<\/span>sub,<\/span> 'cups'<\/span>)<\/span>,<\/span> orders<\/span>:<\/span> sum<\/span>(<\/span>sub,<\/span> 'orders'<\/span>)<\/span> }<\/span>)<\/span>;<\/span>
        \n }<\/span>
        \n return<\/span> out;<\/span>
        \n}<\/span><\/p>\n

        function<\/span> grouped<\/span>(<\/span>v,<\/span> digits<\/span>)<\/span> {<\/span>
        \n const<\/span> parts =<\/span> Math.<\/span>abs<\/span>(<\/span>v)<\/span>.<\/span>toFixed<\/span>(<\/span>digits ||<\/span> 0<\/span>)<\/span>.<\/span>split<\/span>(<\/span>'.'<\/span>)<\/span>;<\/span>
        \n parts[<\/span>0<\/span>]<\/span> =<\/span> parts[<\/span>0<\/span>]<\/span>.<\/span>replace<\/span>(<\/span>\/<\/span>\\\\B(?=(\\\\d{3})+(?!\\\\d))<\/span>\/<\/span>g<\/span><\/span>,<\/span> ','<\/span>)<\/span>;<\/span>
        \n return<\/span> (<\/span>v <<\/span> 0<\/span> ?<\/span> '-'<\/span> :<\/span> ''<\/span>)<\/span> +<\/span> parts.<\/span>join<\/span>(<\/span>'.'<\/span>)<\/span>;<\/span>
        \n}<\/span><\/p>\n

        const<\/span> chart =<\/span> echarts.<\/span>init<\/span>(<\/span>document.<\/span>getElementById<\/span>(<\/span>'chart'<\/span>)<\/span>,<\/span> null<\/span>,<\/span> {<\/span> renderer<\/span>:<\/span> 'svg'<\/span> }<\/span>)<\/span>;<\/span>
        \nconst<\/span> dirtyChart =<\/span> echarts.<\/span>init<\/span>(<\/span>document.<\/span>getElementById<\/span>(<\/span>'dirty'<\/span>)<\/span>,<\/span> null<\/span>,<\/span> {<\/span> renderer<\/span>:<\/span> 'svg'<\/span> }<\/span>)<\/span>;<\/span>
        \nconst<\/span> gapChart =<\/span> echarts.<\/span>init<\/span>(<\/span>document.<\/span>getElementById<\/span>(<\/span>'gap'<\/span>)<\/span>,<\/span> null<\/span>,<\/span> {<\/span> renderer<\/span>:<\/span> 'svg'<\/span> }<\/span>)<\/span>;<\/span>
        \nconst<\/span> modeInfo =<\/span> document.<\/span>getElementById<\/span>(<\/span>'modeInfo'<\/span>)<\/span>;<\/span><\/p>\n

        \/\/ \u6570\u4e00\u6570\u56fe\u4e0a\u771f\u753b\u51fa\u4e86\u51e0\u4e2a\u56fe\u5f62\u3002SVG \u6e32\u67d3\u5668\u624d\u6709 DOM \u53ef\u6570，canvas \u6e32\u67d3\u4e0b\u8fd4\u56de null\u3002<\/span>
        \nfunction<\/span> countBars<\/span>(<\/span>el<\/span>)<\/span> {<\/span>
        \n const<\/span> svg =<\/span> el.<\/span>querySelector<\/span>(<\/span>'svg'<\/span>)<\/span>;<\/span>
        \n return<\/span> svg ?<\/span> svg.<\/span>querySelectorAll<\/span>(<\/span>'path[fill="#5070dd"]'<\/span>)<\/span>.<\/span>length :<\/span> null<\/span>;<\/span>
        \n}<\/span><\/p>\n

        \/\/ \u6298\u7ebf\u65ad\u5f00\u8fd9\u4ef6\u4e8b\u53ea\u6709 M \u7684\u4e2a\u6570\u80fd\u8bc1\u660e：\u4e00\u6761 path \u91cc\u51fa\u73b0\u4e24\u6b21 M \u5c31\u662f\u65ad\u5f00\u4e86<\/span>
        \nfunction<\/span> readLine<\/span>(<\/span>el<\/span>)<\/span> {<\/span>
        \n const<\/span> svg =<\/span> el.<\/span>querySelector<\/span>(<\/span>'svg'<\/span>)<\/span>;<\/span>
        \n if<\/span> (<\/span>!<\/span>svg)<\/span> return<\/span> null<\/span>;<\/span>
        \n const<\/span> paths =<\/span> Array.<\/span>from<\/span>(<\/span>svg.<\/span>querySelectorAll<\/span>(<\/span>'path'<\/span>)<\/span>)<\/span>.<\/span>filter<\/span>(<\/span>
        \n (<\/span>p<\/span>)<\/span> =><\/span> p.<\/span>getAttribute<\/span>(<\/span>'stroke'<\/span>)<\/span> ===<\/span> '#5070dd'<\/span> &&<\/span> p.<\/span>getAttribute<\/span>(<\/span>'stroke-width'<\/span>)<\/span> ===<\/span> '2'<\/span>
        \n )<\/span>;<\/span>
        \n return<\/span> {<\/span>
        \n paths<\/span>:<\/span> paths.<\/span>length,<\/span>
        \n moves<\/span>:<\/span> paths.<\/span>map<\/span>(<\/span>(<\/span>p<\/span>)<\/span> =><\/span> (<\/span>(<\/span>p.<\/span>getAttribute<\/span>(<\/span>'d'<\/span>)<\/span> ||<\/span> ''<\/span>)<\/span>.<\/span>match<\/span>(<\/span>\/<\/span>M<\/span>\/<\/span>g<\/span><\/span>)<\/span> ||<\/span> [<\/span>]<\/span>)<\/span>.<\/span>length)<\/span>,<\/span>
        \n symbols<\/span>:<\/span> Array.<\/span>from<\/span>(<\/span>svg.<\/span>querySelectorAll<\/span>(<\/span>'path'<\/span>)<\/span>)<\/span>.<\/span>filter<\/span>(<\/span>
        \n (<\/span>p<\/span>)<\/span> =><\/span> (<\/span>p.<\/span>getAttribute<\/span>(<\/span>'d'<\/span>)<\/span> ||<\/span> ''<\/span>)<\/span>.<\/span>indexOf<\/span>(<\/span>'M1 0A1'<\/span>)<\/span> ===<\/span> 0<\/span>
        \n )<\/span>.<\/span>length
        \n }<\/span>;<\/span>
        \n}<\/span><\/p>\n

        let<\/span> monthly =<\/span> [<\/span>]<\/span>;<\/span>
        \nlet<\/span> transposed =<\/span> [<\/span>]<\/span>;<\/span>
        \nlet<\/span> marchDays =<\/span> [<\/span>]<\/span>;<\/span>
        \nlet<\/span> marchSales =<\/span> [<\/span>]<\/span>;<\/span>
        \nlet<\/span> marchSource =<\/span> [<\/span>]<\/span>;<\/span>
        \nlet<\/span> connectNulls =<\/span> false<\/span>;<\/span><\/p>\n

        function<\/span> showAuto<\/span>(<\/span>)<\/span> {<\/span>
        \n chart.<\/span>setOption<\/span>(<\/span>{<\/span>
        \n title<\/span>:<\/span> {<\/span> text<\/span>:<\/span> '\u6a21\u5f0f\u2460 \u81ea\u52a8\u6392\u961f：\u4e24\u4e2a\u7cfb\u5217\u90fd\u4e0d\u5199 encode'<\/span>,<\/span> subtext<\/span>:<\/span> '\u56fe\u4f8b\u662f\u5217\u540d，\u523b\u5ea6\u88ab\u6700\u5927\u90a3\u4e00\u5217\u6491\u6ee1'<\/span> }<\/span>,<\/span>
        \n legend<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
        \n tooltip<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
        \n xAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'category'<\/span> }<\/span>,<\/span>
        \n yAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'value'<\/span> }<\/span>,<\/span>
        \n dataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> monthly }<\/span>,<\/span>
        \n series<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span> }<\/span>,<\/span> {<\/span> type<\/span>:<\/span> 'line'<\/span> }<\/span>]<\/span>
        \n }<\/span>,<\/span> {<\/span> replaceMerge<\/span>:<\/span> [<\/span>'dataset'<\/span>,<\/span> 'series'<\/span>]<\/span> }<\/span>)<\/span>;<\/span>
        \n modeInfo.<\/span>textContent =<\/span> '\u770b\u56fe\u4f8b：sales \/ cups\u2014\u2014\u8fd9\u5c31\u662f\u5217\u540d\u5f53\u7cfb\u5217\u540d\u7684\u6837\u5b50\u3002\u770b\u7eb5\u8f74：0～5,000,000，'<\/span>
        \n +<\/span> '\u676f\u6570（\u5341\u4e07\u7ea7）\u88ab\u9500\u552e\u989d（\u767e\u4e07\u7ea7）\u538b\u6210\u8d34\u5730\u7684\u76f4\u7ebf\u3002\u4e0d\u5199 encode，ECharts \u5c31\u66ff\u4f60\u6392\u961f\u9009\u4e86\u524d\u4e24\u4e2a\u6570\u503c\u5217\u3002'<\/span>;<\/span>
        \n}<\/span><\/p>\n

        function<\/span> showEncode<\/span>(<\/span>)<\/span> {<\/span>
        \n chart.<\/span>setOption<\/span>(<\/span>{<\/span>
        \n title<\/span>:<\/span> {<\/span> text<\/span>:<\/span> '\u6a21\u5f0f\u2461 encode \u9489\u4f4f：\u67f1=\u676f\u6570\u3001\u7ebf=\u8ba2\u5355\u6570'<\/span>,<\/span> subtext<\/span>:<\/span> '\u540c\u4e00\u4efd dataset，\u53ea\u591a\u4e86 encode \u548c name'<\/span> }<\/span>,<\/span>
        \n legend<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
        \n tooltip<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
        \n xAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'category'<\/span> }<\/span>,<\/span>
        \n yAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'value'<\/span> }<\/span>,<\/span>
        \n dataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> monthly }<\/span>,<\/span>
        \n series<\/span>:<\/span> [<\/span>
        \n {<\/span> name<\/span>:<\/span> '\u676f\u6570'<\/span>,<\/span> type<\/span>:<\/span> 'bar'<\/span>,<\/span> encode<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 'month'<\/span>,<\/span> y<\/span>:<\/span> 'cups'<\/span> }<\/span> }<\/span>,<\/span>
        \n {<\/span> name<\/span>:<\/span> '\u8ba2\u5355\u6570'<\/span>,<\/span> type<\/span>:<\/span> 'line'<\/span>,<\/span> encode<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 'month'<\/span>,<\/span> y<\/span>:<\/span> 'orders'<\/span> }<\/span> }<\/span>
        \n ]<\/span>
        \n }<\/span>,<\/span> {<\/span> replaceMerge<\/span>:<\/span> [<\/span>'dataset'<\/span>,<\/span> 'series'<\/span>]<\/span> }<\/span>)<\/span>;<\/span>
        \n modeInfo.<\/span>textContent =<\/span> '\u540c\u4e00\u4efd\u8868，\u56fe\u4f8b\u53d8\u6210\u676f\u6570 \/ \u8ba2\u5355\u6570，\u7eb5\u8f74\u56de\u5230 0～180,000\u3002'<\/span>
        \n +<\/span> 'encode \u4e0d\u6539\u53d8\u6570\u636e，\u53ea\u6539\u53d8\u300c\u54ea\u4e00\u5217\u63a5\u5230\u54ea\u4e2a\u901a\u9053\u300d\u2014\u2014\u8fd9\u5c31\u662f\u9489\u4f4f\u7684\u4ef7\u503c\u3002'<\/span>;<\/span>
        \n}<\/span><\/p>\n

        function<\/span> showFilter<\/span>(<\/span>)<\/span> {<\/span>
        \n chart.<\/span>setOption<\/span>(<\/span>{<\/span>
        \n title<\/span>:<\/span> {<\/span> text<\/span>:<\/span> '\u6a21\u5f0f\u2462 transform：\u5148\u7b5b\u51fa\u6708\u9500\u552e\u989d > 400 \u4e07，\u518d\u964d\u5e8f'<\/span>,<\/span> subtext<\/span>:<\/span> '\u7b2c 1 \u4efd dataset \u5403\u7b2c 0 \u4efd，\u7cfb\u5217\u7528 datasetId \u8ba4\u9886'<\/span> }<\/span>,<\/span>
        \n tooltip<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
        \n xAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'category'<\/span> }<\/span>,<\/span>
        \n yAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'value'<\/span> }<\/span>,<\/span>
        \n dataset<\/span>:<\/span> [<\/span>
        \n {<\/span> id<\/span>:<\/span> 'raw'<\/span>,<\/span> source<\/span>:<\/span> monthly }<\/span>,<\/span>
        \n {<\/span> id<\/span>:<\/span> 'big'<\/span>,<\/span> fromDatasetId<\/span>:<\/span> 'raw'<\/span>,<\/span> transform<\/span>:<\/span> [<\/span>
        \n {<\/span> type<\/span>:<\/span> 'filter'<\/span>,<\/span> config<\/span>:<\/span> {<\/span> dimension<\/span>:<\/span> 'sales'<\/span>,<\/span> '>'<\/span>:<\/span> 4000000<\/span> }<\/span> }<\/span>,<\/span>
        \n {<\/span> type<\/span>:<\/span> 'sort'<\/span>,<\/span> config<\/span>:<\/span> {<\/span> dimension<\/span>:<\/span> 'sales'<\/span>,<\/span> order<\/span>:<\/span> 'desc'<\/span> }<\/span> }<\/span>
        \n ]<\/span> }<\/span>
        \n ]<\/span>,<\/span>
        \n series<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span>,<\/span> datasetId<\/span>:<\/span> 'big'<\/span>,<\/span> encode<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 'month'<\/span>,<\/span> y<\/span>:<\/span> 'sales'<\/span> }<\/span> }<\/span>]<\/span>
        \n }<\/span>,<\/span> {<\/span> replaceMerge<\/span>:<\/span> [<\/span>'dataset'<\/span>,<\/span> 'series'<\/span>]<\/span> }<\/span>)<\/span>;<\/span>
        \n const<\/span> n =<\/span> monthly.<\/span>filter<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>sales ><\/span> 4000000<\/span>)<\/span>.<\/span>length;<\/span>
        \n const<\/span> hit =<\/span> countBars<\/span>(<\/span>document.<\/span>getElementById<\/span>(<\/span>'chart'<\/span>)<\/span>)<\/span>;<\/span>
        \n modeInfo.<\/span>textContent =<\/span> '\u6708\u9500\u552e\u989d\u8d85\u8fc7 400 \u4e07\u7684\u6709 '<\/span> +<\/span> n +<\/span> ' \u4e2a\u6708，\u56fe\u4e0a\u753b\u4e86 '<\/span> +<\/span> (<\/span>hit ===<\/span> null<\/span> ?<\/span> '（\u8bf7\u7528\u6d4f\u89c8\u5668\u6253\u5f00）'<\/span> :<\/span> hit)<\/span> +<\/span>
        \n ' \u6839\u67f1\u5b50，\u987a\u5e8f\u662f\u964d\u5e8f\u3002\u6ce8\u610f series \u4e0a\u7684 datasetId：\u4e0d\u8ba4\u9886\u7684\u8bdd\u7cfb\u5217\u4ecd\u7136\u5403\u7b2c 0 \u4efd\u3001\u8fc7\u6ee4\u7b49\u4e8e\u767d\u505a\u3002'<\/span>;<\/span>
        \n}<\/span><\/p>\n

        function<\/span> showRowLayout<\/span>(<\/span>)<\/span> {<\/span>
        \n chart.<\/span>setOption<\/span>(<\/span>{<\/span>
        \n title<\/span>:<\/span> {<\/span> text<\/span>:<\/span> '\u6a21\u5f0f\u2463 \u884c\u5e03\u5c40：\u4e00\u884c\u4e00\u4e2a\u6307\u6807'<\/span>,<\/span> subtext<\/span>:<\/span> 'seriesLayoutBy: row，\u7cfb\u5217\u540d\u81ea\u52a8\u53d6\u6bcf\u884c\u7b2c\u4e00\u4e2a\u683c\u5b50'<\/span> }<\/span>,<\/span>
        \n legend<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
        \n tooltip<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
        \n xAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'category'<\/span> }<\/span>,<\/span>
        \n yAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'value'<\/span> }<\/span>,<\/span>
        \n dataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> transposed,<\/span> seriesLayoutBy<\/span>:<\/span> 'row'<\/span> }<\/span>,<\/span>
        \n series<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span> }<\/span>,<\/span> {<\/span> type<\/span>:<\/span> 'line'<\/span> }<\/span>]<\/span>
        \n }<\/span>,<\/span> {<\/span> replaceMerge<\/span>:<\/span> [<\/span>'dataset'<\/span>,<\/span> 'series'<\/span>]<\/span> }<\/span>)<\/span>;<\/span>
        \n modeInfo.<\/span>textContent =<\/span> '\u8fd9\u5f20\u8868\u88ab\u8f6c\u7f6e\u6210\u300c\u6708\u4efd\u5f53\u7b2c\u4e00\u884c\u300d，seriesLayoutBy: row \u8ba9 ECharts \u6a2a\u7740\u8bfb\u3002'<\/span>
        \n +<\/span> '\u56fe\u4f8b\u662f \u9500\u552e\u989d \/ \u676f\u6570\u2014\u2014\u5b83\u4eec\u6765\u81ea\u6bcf\u884c\u7684\u7b2c\u4e00\u4e2a\u683c\u5b50，\u4e0d\u662f\u4f60\u4ee5\u4e3a\u7684 displayName\u3002'<\/span>;<\/span>
        \n}<\/span><\/p>\n

        function<\/span> showDisplayName<\/span>(<\/span>)<\/span> {<\/span>
        \n chart.<\/span>setOption<\/span>(<\/span>{<\/span>
        \n title<\/span>:<\/span> {<\/span> text<\/span>:<\/span> '\u6a21\u5f0f\u2464 displayName：\u5217\u540d\u4fdd\u6301\u82f1\u6587，\u663e\u793a\u7528\u4e2d\u6587'<\/span>,<\/span> subtext<\/span>:<\/span> 'dimensions: [{name, displayName}]'<\/span> }<\/span>,<\/span>
        \n legend<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
        \n tooltip<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
        \n xAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'category'<\/span> }<\/span>,<\/span>
        \n yAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'value'<\/span> }<\/span>,<\/span>
        \n dataset<\/span>:<\/span> {<\/span>
        \n source<\/span>:<\/span> monthly,<\/span>
        \n dimensions<\/span>:<\/span> [<\/span>
        \n {<\/span> name<\/span>:<\/span> 'month'<\/span>,<\/span> displayName<\/span>:<\/span> '\u6708\u4efd'<\/span> }<\/span>,<\/span>
        \n {<\/span> name<\/span>:<\/span> 'sales'<\/span>,<\/span> displayName<\/span>:<\/span> '\u9500\u552e\u989d'<\/span> }<\/span>,<\/span>
        \n {<\/span> name<\/span>:<\/span> 'cups'<\/span>,<\/span> displayName<\/span>:<\/span> '\u676f\u6570'<\/span> }<\/span>,<\/span>
        \n {<\/span> name<\/span>:<\/span> 'orders'<\/span>,<\/span> displayName<\/span>:<\/span> '\u8ba2\u5355\u6570'<\/span> }<\/span>
        \n ]<\/span>
        \n }<\/span>,<\/span>
        \n series<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span> }<\/span>,<\/span> {<\/span> type<\/span>:<\/span> 'line'<\/span> }<\/span>]<\/span>
        \n }<\/span>,<\/span> {<\/span> replaceMerge<\/span>:<\/span> [<\/span>'dataset'<\/span>,<\/span> 'series'<\/span>]<\/span> }<\/span>)<\/span>;<\/span>
        \n modeInfo.<\/span>textContent =<\/span> '\u548c\u6a21\u5f0f\u2460\u540c\u4e00\u4efd\u6570\u636e\u3001\u540c\u6837\u4e0d\u5199 encode，\u56fe\u4f8b\u5374\u662f\u4e2d\u6587\u2014\u2014\u56e0\u4e3a displayName \u53ea\u6539\u663e\u793a\u3001\u4e0d\u6539\u53d6\u503c\u7528\u7684\u952e\u540d\u3002'<\/span>
        \n +<\/span> '\u628a dimensions \u76f4\u63a5\u5199\u6210\u4e2d\u6587\u540d\u4f1a\u5f97\u5230\u4e00\u5f20\u7a7a\u56fe（\u672c\u7ae0\u5751 2）\u3002'<\/span>;<\/span>
        \n}<\/span><\/p>\n

        function<\/span> drawMarch<\/span>(<\/span>)<\/span> {<\/span>
        \n dirtyChart.<\/span>setOption<\/span>(<\/span>{<\/span>
        \n title<\/span>:<\/span> {<\/span> text<\/span>:<\/span> '2025 \u5e74 3 \u6708\u9010\u65e5\u9500\u552e\u989d（dataset + encode）'<\/span>,<\/span> subtext<\/span>:<\/span> '\u7b2c 14\u300115 \u65e5\u662f null'<\/span> }<\/span>,<\/span>
        \n tooltip<\/span>:<\/span> {<\/span> trigger<\/span>:<\/span> 'axis'<\/span> }<\/span>,<\/span>
        \n grid<\/span>:<\/span> {<\/span> left<\/span>:<\/span> 74<\/span>,<\/span> right<\/span>:<\/span> 20<\/span>,<\/span> top<\/span>:<\/span> 60<\/span>,<\/span> bottom<\/span>:<\/span> 60<\/span> }<\/span>,<\/span>
        \n xAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'category'<\/span> }<\/span>,<\/span>
        \n yAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'value'<\/span> }<\/span>,<\/span>
        \n dataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> marchSource }<\/span>,<\/span>
        \n series<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span>,<\/span> encode<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 'day'<\/span>,<\/span> y<\/span>:<\/span> 'sales'<\/span> }<\/span> }<\/span>]<\/span>
        \n }<\/span>)<\/span>;<\/span>
        \n gapChart.<\/span>setOption<\/span>(<\/span>{<\/span>
        \n title<\/span>:<\/span> {<\/span> text<\/span>:<\/span> '\u540c\u4e00\u4efd\u6570\u636e\u753b\u6298\u7ebf'<\/span>,<\/span> subtext<\/span>:<\/span> 'connectNulls: false'<\/span> }<\/span>,<\/span>
        \n tooltip<\/span>:<\/span> {<\/span> trigger<\/span>:<\/span> 'axis'<\/span> }<\/span>,<\/span>
        \n grid<\/span>:<\/span> {<\/span> left<\/span>:<\/span> 74<\/span>,<\/span> right<\/span>:<\/span> 20<\/span>,<\/span> top<\/span>:<\/span> 60<\/span>,<\/span> bottom<\/span>:<\/span> 60<\/span> }<\/span>,<\/span>
        \n xAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'category'<\/span>,<\/span> data<\/span>:<\/span> marchDays }<\/span>,<\/span>
        \n yAxis<\/span>:<\/span> {<\/span> type<\/span>:<\/span> 'value'<\/span> }<\/span>,<\/span>
        \n series<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'line'<\/span>,<\/span> data<\/span>:<\/span> marchSales }<\/span>]<\/span>
        \n }<\/span>)<\/span>;<\/span>
        \n const<\/span> hit =<\/span> countBars<\/span>(<\/span>document.<\/span>getElementById<\/span>(<\/span>'dirty'<\/span>)<\/span>)<\/span>;<\/span>
        \n document.<\/span>getElementById<\/span>(<\/span>'dirtyInfo'<\/span>)<\/span>.<\/span>textContent =<\/span>
        \n '31 \u5929\u91cc\u753b\u51fa\u7684\u67f1\u5b50：'<\/span> +<\/span> (<\/span>hit ===<\/span> null<\/span> ?<\/span> '（\u8bf7\u7528\u6d4f\u89c8\u5668\u6253\u5f00\u8fd9\u4e00\u9875\u624d\u6570\u5f97\u5230）'<\/span> :<\/span> hit)<\/span> +<\/span>
        \n ' \u6839\u3002null \u7684\u90a3\u4e24\u5929\u7c7b\u76ee\u683c\u5b50\u8fd8\u5728，\u53ea\u662f\u6ca1\u6709\u67f1\u2014\u2014\u6240\u4ee5\u8f74\u4e0a\u4ecd\u7136\u5360\u4f4d\u3002'<\/span>;<\/span>
        \n readGapInfo<\/span>(<\/span>)<\/span>;<\/span>
        \n}<\/span><\/p>\n

        function<\/span> readGapInfo<\/span>(<\/span>)<\/span> {<\/span>
        \n const<\/span> r =<\/span> readLine<\/span>(<\/span>document.<\/span>getElementById<\/span>(<\/span>'gap'<\/span>)<\/span>)<\/span>;<\/span>
        \n if<\/span> (<\/span>!<\/span>r)<\/span> {<\/span>
        \n document.<\/span>getElementById<\/span>(<\/span>'gapInfo'<\/span>)<\/span>.<\/span>textContent =<\/span> '（\u8fd9\u4e00\u6bb5\u8981\u5728\u6d4f\u89c8\u5668\u91cc\u770b：canvas \u6e32\u67d3\u6216\u6ca1\u6709 DOM \u65f6\u6570\u4e0d\u51fa\u6765\u3002）'<\/span>;<\/span>
        \n return<\/span>;<\/span>
        \n }<\/span>
        \n document.<\/span>getElementById<\/span>(<\/span>'gapInfo'<\/span>)<\/span>.<\/span>textContent =<\/span>
        \n 'connectNulls='<\/span> +<\/span> connectNulls +<\/span> ' \u2192 \u7ebf\u6761 path \u6570 '<\/span> +<\/span> r.<\/span>paths +<\/span> '，\u6bcf\u6761\u91cc\u7684 M \u4e2a\u6570 '<\/span> +<\/span> JSON<\/span>.<\/span>stringify<\/span>(<\/span>r.<\/span>moves)<\/span> +<\/span>
        \n '，\u7b26\u53f7（\u5c0f\u5706\u70b9）\u6570 '<\/span> +<\/span> r.<\/span>symbols +<\/span> '\u3002M \u51fa\u73b0\u4e24\u6b21\u5c31\u662f\u65ad\u6210\u4e86\u4e24\u6bb5；\u628a\u5b57\u8282\u6570\u62ff\u53bb\u5bf9\u6bd4\u662f\u770b\u4e0d\u51fa\u533a\u522b\u7684\u3002'<\/span>;<\/span>
        \n}<\/span><\/p>\n

        document.<\/span>getElementById<\/span>(<\/span>'btnGap'<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
        \n connectNulls =<\/span> !<\/span>connectNulls;<\/span>
        \n gapChart.<\/span>setOption<\/span>(<\/span>{<\/span>
        \n title<\/span>:<\/span> {<\/span> text<\/span>:<\/span> '\u540c\u4e00\u4efd\u6570\u636e\u753b\u6298\u7ebf'<\/span>,<\/span> subtext<\/span>:<\/span> 'connectNulls: '<\/span> +<\/span> connectNulls }<\/span>,<\/span>
        \n series<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'line'<\/span>,<\/span> data<\/span>:<\/span> marchSales,<\/span> connectNulls<\/span>:<\/span> connectNulls }<\/span>]<\/span>
        \n }<\/span>)<\/span>;<\/span>
        \n readGapInfo<\/span>(<\/span>)<\/span>;<\/span>
        \n}<\/span>)<\/span>;<\/span><\/p>\n

        document.<\/span>getElementById<\/span>(<\/span>'btnAuto'<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> showAuto)<\/span>;<\/span>
        \ndocument.<\/span>getElementById<\/span>(<\/span>'btnEncode'<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> showEncode)<\/span>;<\/span>
        \ndocument.<\/span>getElementById<\/span>(<\/span>'btnFilter'<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> showFilter)<\/span>;<\/span>
        \ndocument.<\/span>getElementById<\/span>(<\/span>'btnRow'<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> showRowLayout)<\/span>;<\/span>
        \ndocument.<\/span>getElementById<\/span>(<\/span>'btnName'<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> showDisplayName)<\/span>;<\/span><\/p>\n

        function<\/span> report<\/span>(<\/span>rows<\/span>)<\/span> {<\/span>
        \n const<\/span> missing =<\/span> rows.<\/span>filter<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>missing)<\/span>.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>date)<\/span>;<\/span>
        \n const<\/span> promoDays =<\/span> rows.<\/span>filter<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>promotion)<\/span>.<\/span>length;<\/span>
        \n const<\/span> promoNames =<\/span> new<\/span> Set<\/span>(<\/span>rows.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>promotion)<\/span>.<\/span>filter<\/span>(<\/span>Boolean)<\/span>)<\/span>;<\/span>
        \n const<\/span> keys =<\/span> Object.<\/span>keys<\/span>(<\/span>rows[<\/span>0<\/span>]<\/span>)<\/span>;<\/span>
        \n const<\/span> nulls =<\/span> keys.<\/span>map<\/span>(<\/span>(<\/span>k<\/span>)<\/span> =><\/span> k +<\/span> ' '<\/span> +<\/span> rows.<\/span>filter<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r[<\/span>k]<\/span> ===<\/span> null<\/span> ||<\/span> r[<\/span>k]<\/span> ===<\/span> undefined<\/span>)<\/span>.<\/span>length)<\/span>;<\/span>
        \n const<\/span> keySets =<\/span> new<\/span> Set<\/span>(<\/span>rows.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> Object.<\/span>keys<\/span>(<\/span>r)<\/span>.<\/span>join<\/span>(<\/span>','<\/span>)<\/span>)<\/span>)<\/span>;<\/span>
        \n const<\/span> lines =<\/span> [<\/span>]<\/span>;<\/span>
        \n lines.<\/span>push<\/span>(<\/span>'\u6761\u6570 '<\/span> +<\/span> rows.<\/span>length +<\/span> '，\u8d77 '<\/span> +<\/span> rows[<\/span>0<\/span>]<\/span>.<\/span>date +<\/span> '，\u6b62 '<\/span> +<\/span> rows[<\/span>rows.<\/span>length –<\/span> 1<\/span>]<\/span>.<\/span>date +<\/span>
        \n '，\u8986\u76d6\u6708\u4efd '<\/span> +<\/span> new<\/span> Set<\/span>(<\/span>rows.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>date.<\/span>slice<\/span>(<\/span>0<\/span>,<\/span> 7<\/span>)<\/span>)<\/span>)<\/span>.<\/span>size +<\/span> ' \u4e2a'<\/span>)<\/span>;<\/span>
        \n lines.<\/span>push<\/span>(<\/span>'\u663e\u5f0f\u7f3a\u5931\u65e5 '<\/span> +<\/span> missing.<\/span>length +<\/span> ' \u4e2a：'<\/span> +<\/span> missing.<\/span>join<\/span>(<\/span>'\u3001'<\/span>)<\/span>)<\/span>;<\/span>
        \n lines.<\/span>push<\/span>(<\/span>'\u4fc3\u9500\u65e5 '<\/span> +<\/span> promoDays +<\/span> ' \u4e2a，\u4fc3\u9500\u540d '<\/span> +<\/span> promoNames.<\/span>size +<\/span> ' \u79cd'<\/span>)<\/span>;<\/span>
        \n lines.<\/span>push<\/span>(<\/span>'\u5404\u5217\u7a7a\u503c（null\/undefined）\u6570：'<\/span> +<\/span> nulls.<\/span>join<\/span>(<\/span>'，'<\/span>)<\/span>)<\/span>;<\/span>
        \n lines.<\/span>push<\/span>(<\/span>'\u952e\u96c6\u5408\u79cd\u7c7b '<\/span> +<\/span> keySets.<\/span>size +<\/span> ' \u79cd（\u7f3a\u5931\u65e5\u591a\u4e86 missing \u952e，\u6240\u4ee5\u4e0d\u7edf\u4e00）'<\/span>)<\/span>;<\/span>
        \n lines.<\/span>push<\/span>(<\/span>''<\/span>)<\/span>;<\/span>
        \n lines.<\/span>push<\/span>(<\/span>'2025 \u9010\u6708\u805a\u5408（\u672c\u9875\u6b63\u6587\u5f15\u7528\u7684\u6708\u8868）'<\/span>)<\/span>;<\/span>
        \n lines.<\/span>push<\/span>(<\/span>'\u6708\u4efd \u9500\u552e\u989d \u676f\u6570 \u8ba2\u5355\u6570'<\/span>)<\/span>;<\/span>
        \n for<\/span> (<\/span>const<\/span> r of<\/span> monthly)<\/span> {<\/span>
        \n lines.<\/span>push<\/span>(<\/span>r.<\/span>month +<\/span> ' '<\/span> +<\/span> grouped<\/span>(<\/span>r.<\/span>sales,<\/span> 2<\/span>)<\/span>.<\/span>padStart<\/span>(<\/span>14<\/span>)<\/span> +<\/span> ' '<\/span> +<\/span>
        \n grouped<\/span>(<\/span>r.<\/span>cups)<\/span>.<\/span>padStart<\/span>(<\/span>8<\/span>)<\/span> +<\/span> ' '<\/span> +<\/span> grouped<\/span>(<\/span>r.<\/span>orders)<\/span>.<\/span>padStart<\/span>(<\/span>8<\/span>)<\/span>)<\/span>;<\/span>
        \n }<\/span>
        \n lines.<\/span>push<\/span>(<\/span>''<\/span>)<\/span>;<\/span>
        \n lines.<\/span>push<\/span>(<\/span>'\u6708\u9500\u552e\u989d > 4,000,000 \u7684\u6708\u4efd：'<\/span> +<\/span> monthly.<\/span>filter<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>sales ><\/span> 4000000<\/span>)<\/span>.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>month)<\/span>.<\/span>join<\/span>(<\/span>'\u3001'<\/span>)<\/span>)<\/span>;<\/span>
        \n document.<\/span>getElementById<\/span>(<\/span>'report'<\/span>)<\/span>.<\/span>textContent =<\/span> lines.<\/span>join<\/span>(<\/span>'\\\\n'<\/span>)<\/span>;<\/span>
        \n}<\/span><\/p>\n

        try<\/span> {<\/span>
        \n const<\/span> rows =<\/span> await<\/span> loadDaily<\/span>(<\/span>)<\/span>;<\/span>
        \n monthly =<\/span> toMonthly<\/span>(<\/span>rows,<\/span> '2025'<\/span>)<\/span>;<\/span>
        \n transposed =<\/span> [<\/span>
        \n [<\/span>'\u6708\u4efd'<\/span>,<\/span> …<\/span>monthly.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>month)<\/span>]<\/span>,<\/span>
        \n [<\/span>'\u9500\u552e\u989d'<\/span>,<\/span> …<\/span>monthly.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>sales)<\/span>]<\/span>,<\/span>
        \n [<\/span>'\u676f\u6570'<\/span>,<\/span> …<\/span>monthly.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>cups)<\/span>]<\/span>,<\/span>
        \n [<\/span>'\u8ba2\u5355\u6570'<\/span>,<\/span> …<\/span>monthly.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>orders)<\/span>]<\/span>
        \n ]<\/span>;<\/span>
        \n const<\/span> march =<\/span> rows.<\/span>filter<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>date.<\/span>startsWith<\/span>(<\/span>'2025-03'<\/span>)<\/span>)<\/span>;<\/span>
        \n marchDays =<\/span> march.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>date.<\/span>slice<\/span>(<\/span>8<\/span>)<\/span> +<\/span> ' \u65e5'<\/span>)<\/span>;<\/span>
        \n marchSales =<\/span> march.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> r.<\/span>sales)<\/span>;<\/span>
        \n marchSource =<\/span> marchDays.<\/span>map<\/span>(<\/span>(<\/span>d,<\/span> i<\/span>)<\/span> =><\/span> (<\/span>{<\/span> day<\/span>:<\/span> d,<\/span> sales<\/span>:<\/span> marchSales[<\/span>i]<\/span> }<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

        const<\/span> cities =<\/span> rows.<\/span>length;<\/span>
        \n document.<\/span>getElementById<\/span>(<\/span>'status'<\/span>)<\/span>.<\/span>textContent =<\/span>
        \n '\u8bfb\u5230\u4e86 '<\/span> +<\/span> cities +<\/span> ' \u6761\u9010\u65e5\u8bb0\u5f55，\u805a\u5408\u6210 2025 \u5e74\u7684 12 \u884c\u6708\u8868，\u672c\u7ae0\u4e0b\u9762\u4e94\u5f20\u56fe\u90fd\u6765\u81ea\u5b83\u3002'<\/span>;<\/span>
        \n showAuto<\/span>(<\/span>)<\/span>;<\/span>
        \n drawMarch<\/span>(<\/span>)<\/span>;<\/span>
        \n report<\/span>(<\/span>rows)<\/span>;<\/span>
        \n}<\/span> catch<\/span> (<\/span>err)<\/span> {<\/span>
        \n document.<\/span>getElementById<\/span>(<\/span>'status'<\/span>)<\/span>.<\/span>textContent =<\/span> '\u52a0\u8f7d\u5931\u8d25：'<\/span> +<\/span> err.<\/span>message +<\/span>
        \n '\u3002\u8bf7\u786e\u8ba4\u5df2\u7ecf\u8fd0\u884c node tools\/serve.mjs，\u5e76\u7528 http:\/\/127.0.0.1:18000\/code\/ch10\/index.html \u6253\u5f00\u672c\u9875\u3002'<\/span>;<\/span>
        \n}<\/span><\/p>\n

        window.<\/span>addEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
        \n chart.<\/span>resize<\/span>(<\/span>)<\/span>;<\/span>
        \n dirtyChart.<\/span>resize<\/span>(<\/span>)<\/span>;<\/span>
        \n gapChart.<\/span>resize<\/span>(<\/span>)<\/span>;<\/span>
        \n}<\/span>)<\/span>;<\/span><\/p>\n

        \u8dd1\u8d77\u6765\u5e94\u5f53\u770b\u5230（\u8fd9\u53f0\u673a\u5668\u4e0a\u5237\u51fa\u6765\u7684\u6570\u5b57，\u4f60\u8dd1\u4e00\u904d\u5e94\u5f53\u4e00\u81f4）：<\/p>\n

          \n
        • \u72b6\u6001\u6761：\u8bfb\u5230\u4e86 1096 \u6761\u9010\u65e5\u8bb0\u5f55，\u805a\u5408\u6210 2025 \u5e74\u7684 12 \u884c\u6708\u8868，\u672c\u7ae0\u4e0b\u9762\u4e94\u5f20\u56fe\u90fd\u6765\u81ea\u5b83\u3002<\/li>\n
        • \u6a21\u5f0f\u2460：\u56fe\u4f8b sales \/ cups，\u7eb5\u8f74\u6700\u9ad8 5,000,000，\u6298\u7ebf\u8d34\u5730\u3002<\/li>\n
        • 2025-03 \u90a3\u5f20\u67f1\u72b6\u56fe：29 \u6839\u67f1\u5b50（31 \u5929\u91cc\u753b\u51fa\u7684\u67f1\u5b50：29 \u6839），\u7b2c 14\u300115 \u65e5\u7684\u683c\u5b50\u7a7a\u7740\u3002<\/li>\n
        • #gapInfo \u521d\u59cb：connectNulls=false \u2192 \u7ebf\u6761 path \u6570 1，\u6bcf\u6761\u91cc\u7684 M \u4e2a\u6570 [2]，\u7b26\u53f7（\u5c0f\u5706\u70b9）\u6570 29；\u70b9\u4e00\u6b21\u6309\u94ae\u53d8\u6210 [1]，\u7b26\u53f7\u6570\u4ecd\u662f 29\u3002<\/li>\n
        • \u62a5\u544a\u533a\u7684\u6708\u8868 12 \u884c，\u7b2c\u4e00\u884c 01 \u6708 3,126,085.40 110,552 69,039，\u6700\u540e\u4e00\u884c 12 \u6708 4,068,117.30 141,106 88,282\u3002<\/li>\n<\/ul>\n
          \n

          \u3010\u9010\u6b65\u52a0\u6599\u3011<\/h3>\n

          \u7b2c\u4e00\u6b65：\u5148\u8bfb\u4f53\u68c0\u62a5\u544a，\u518d\u753b\u56fe<\/h4>\n

          node tools\/serve.mjs \u4e4b\u540e\u6253\u5f00 code\/ch10\/index.html，\u5148\u628a\u76ee\u5149\u653e\u5728\u6700\u4e0b\u9762\u90a3\u6bb5\u62a5\u544a\u4e0a\u2014\u2014\u5b83\u662f\u672c\u7ae0\u540e\u9762\u6240\u6709\u6570\u5b57\u7684\u51fa\u5904：<\/p>\n

          \u6761\u6570 1096，\u8d77 2023-01-01，\u6b62 2025-12-31，\u8986\u76d6\u6708\u4efd 36 \u4e2a
          \n\u663e\u5f0f\u7f3a\u5931\u65e5 4 \u4e2a：2025-03-14\u30012025-03-15\u30012025-07-22\u30012025-11-03
          \n\u4fc3\u9500\u65e5 48 \u4e2a，\u4fc3\u9500\u540d 11 \u79cd
          \n\u5404\u5217\u7a7a\u503c（null\/undefined）\u6570：date 0，sales 4，cups 4，orders 4，avgTicket 4，newMembers 4，openStores 0，promotion 1048
          \n\u952e\u96c6\u5408\u79cd\u7c7b 2 \u79cd（\u7f3a\u5931\u65e5\u591a\u4e86 missing \u952e，\u6240\u4ee5\u4e0d\u7edf\u4e00）<\/p>\n

          \u6700\u540e\u4e00\u884c\u503c\u5f97\u505c\u4e00\u4e0b：\u8fd9\u4efd JSON \u91cc\u6240\u6709\u5bf9\u8c61\u7684\u952e\u5e76\u4e0d\u5b8c\u5168\u4e00\u81f4\u2014\u2014\u6b63\u5e38\u8bb0\u5f55 8 \u4e2a\u952e，\u56db\u4e2a\u7f3a\u5931\u65e5\u591a\u4e00\u4e2a missing: true\u3002\u8fd9\u5bf9 dataset \u65e0\u5bb3（\u5217\u540d\u53d6\u81ea\u7b2c\u4e00\u6761\u8bb0\u5f55，\u540e\u9762\u591a\u51fa\u6765\u7684\u952e\u88ab\u5ffd\u7565），\u4f46\u5982\u679c\u4f60\u7684\u4ee3\u7801\u5199\u6210 rows.map((r) => r.missing)，\u5c31\u4f1a\u5f97\u5230\u4e00\u5806 undefined\u3002data\/README.md \u91cc\u5bf9\u8fd9\u4ef6\u4e8b\u6709\u767b\u8bb0\u3002<\/p>\n

          openStores \u90a3\u4e00\u5217\u7684\u7a7a\u503c\u662f 0\u2014\u2014\u56e0\u4e3a\u56db\u4e2a\u7f3a\u5931\u65e5\u90a3\u5929\u5b83\u7684\u503c\u662f\u6570\u5b57 0（\u6ca1\u8425\u4e1a），\u4e0d\u662f null\u3002\u8fd9\u4e24\u4e2a\u300c\u96f6\u300d\u5728\u56fe\u4e0a\u957f\u5f97\u4e00\u6a21\u4e00\u6837，\u4f46\u542b\u4e49\u5b8c\u5168\u4e0d\u540c（\u7b2c 13 \u7ae0\u8bb2\u600e\u4e48\u5206\u5f00\u5904\u7406）\u3002<\/p>\n

          \u7b2c\u4e8c\u6b65：\u6309\u6a21\u5f0f\u2460，\u770b\u6e05\u6392\u961f<\/h4>\n

          \u6253\u5f00\u9875\u9762\u65f6\u5c31\u662f\u6a21\u5f0f\u2460\u3002\u770b\u56fe\u4f8b（sales \/ cups），\u770b\u7eb5\u8f74\u4e0a\u9650（5,000,000）\u3002\u73b0\u5728\u505a\u4e00\u4ef6\u6709\u7834\u574f\u6027\u7684\u4e8b：\u628a series \u91cc\u90a3\u4e24\u4e2a\u7cfb\u5217\u6539\u6210\u4e09\u4e2a（{type:'bar'}\u3001{type:'line'}\u3001{type:'bar'}），\u5237\u65b0\u3002\u5b9e\u6d4b\u7b2c\u4e09\u4e2a\u7cfb\u5217\u62ff\u5230 orders，\u56fe\u4f8b\u53d8\u6210 sales \/ cups \/ orders \u4e09\u9879\u2014\u2014\u56e0\u4e3a\u6708\u8868\u91cc\u6b63\u597d\u8fd8\u6709\u7b2c\u4e09\u4e2a\u6570\u503c\u5217\u3002\u518d\u52a0\u7b2c\u56db\u4e2a（{type:'line'}），\u5b83\u91cd\u65b0\u62ff sales\u3002<\/p>\n

          \u8fd9\u5c31\u662f\u539f\u7406\u5148\u884c\u7b2c\u4e09\u8282\u90a3\u5f20\u961f\u5217\u8868\u3002\u52a0\u5b8c\u8bb0\u5f97\u5220\u6389\u2014\u2014\u672c\u7ae0\u540e\u9762\u7684\u5bf9\u6bd4\u90fd\u5efa\u7acb\u5728\u300c\u4e24\u4e2a\u7cfb\u5217\u300d\u4e0a\u3002<\/p>\n

          \u7b2c\u4e09\u6b65：\u6309\u6a21\u5f0f\u2461，\u628a\u5217\u9489\u4f4f<\/h4>\n

          \u5bf9\u6bd4\u6a21\u5f0f\u2460\u548c\u2461\u7684\u4e24\u5904\u53d8\u5316：\u56fe\u4f8b\u4ece\u5217\u540d\u53d8\u6210 \u676f\u6570 \/ \u8ba2\u5355\u6570（\u8fd9\u662f name \u7ed9\u7684，\u4e0d\u662f encode \u7ed9\u7684）；\u7eb5\u8f74\u4ece 5,000,000 \u53d8\u6210 180,000（\u8fd9\u662f encode \u7ed9\u7684）\u3002\u4e24\u4ef6\u4e8b\u5404\u81ea\u72ec\u7acb：\u53ea\u5199 name \u4e0d\u5199 encode，\u523b\u5ea6\u8fd8\u662f\u88ab\u9500\u552e\u989d\u6491\u6ee1；\u53ea\u5199 encode \u4e0d\u5199 name，\u56fe\u4f8b\u663e\u793a\u7684\u662f\u4f60\u9489\u4f4f\u7684\u90a3\u4e2a\u5217\u540d\u3002<\/p>\n

          \u6253\u5f00 Console \u6284\u4e00\u53e5\u8fdb\u53bb，\u80fd\u76f4\u63a5\u770b\u5230\u6a21\u578b\u5c42\u7684\u8bfb\u6570（getModel() \u662f\u5185\u90e8 API，\u751f\u4ea7\u7248\u5305\u91cc\u4e5f\u5728）：<\/p>\n

          const<\/span> sm =<\/span> chart.<\/span>getModel<\/span>(<\/span>)<\/span>.<\/span>getSeries<\/span>(<\/span>)<\/span>[<\/span>0<\/span>]<\/span>;<\/span>
          \nsm.<\/span>getSource<\/span>(<\/span>)<\/span>.<\/span>sourceFormat;<\/span> \/\/ 'objectRows'<\/span>
          \nsm.<\/span>getData<\/span>(<\/span>)<\/span>.<\/span>mapDimension<\/span>(<\/span>'x'<\/span>)<\/span>;<\/span> \/\/ 'month'<\/span>
          \nsm.<\/span>getData<\/span>(<\/span>)<\/span>.<\/span>mapDimension<\/span>(<\/span>'y'<\/span>)<\/span>;<\/span> \/\/ 'sales'（\u6a21\u5f0f\u2460）\/ 'cups'（\u6a21\u5f0f\u2461）<\/span>
          \nsm.<\/span>getData<\/span>(<\/span>)<\/span>.<\/span>mapDimensionsAll<\/span>(<\/span>'defaultedLabel'<\/span>)<\/span>;<\/span> \/\/ ['sales'] \u2014\u2014 \u9ed8\u8ba4\u6807\u7b7e\u4e5f\u542c y \u7684<\/span><\/p>\n

          \u7b2c\u56db\u6b65：\u6309\u6a21\u5f0f\u2462，\u770b transform \u4e0e\u8ba4\u9886<\/h4>\n

          \u6a21\u5f0f\u2462\u753b 6 \u6839\u67f1\u5b50，\u987a\u5e8f 08 \u6708\u300110 \u6708\u300107 \u6708\u300112 \u6708\u300106 \u6708\u300109 \u6708（\u9500\u552e\u989d\u964d\u5e8f）\u3002\u62a5\u544a\u533a\u6700\u540e\u4e00\u884c\u5217\u51fa\u7684\u6708\u4efd\u5c31\u662f\u8fd9 6 \u4e2a，\u4e24\u8005\u5fc5\u987b\u4e00\u81f4\u3002<\/p>\n

          \u73b0\u5728\u628a series \u91cc\u7684 datasetId: 'big' \u5220\u6389，\u5237\u65b0：\u67f1\u5b50\u7acb\u523b\u53d8\u6210 12 \u6839\u3001\u6708\u4efd\u6062\u590d\u539f\u5e8f\u2014\u2014\u7cfb\u5217\u9000\u56de\u5403\u7b2c 0 \u4efd，transform \u5168\u767d\u505a\u3002\u8fd9\u5c31\u662f\u539f\u7406\u5148\u884c\u7b2c\u4e03\u8282\u7b2c\u4e00\u6761\u3002\u60f3\u6309\u987a\u5e8f\u9a8c\u8bc1\u94fe\u5f0f\u5f15\u7528，\u518d\u628a fromDatasetId: 'raw' \u4e5f\u5220\u6389，\u7b2c 1 \u4efd dataset \u7684\u8f93\u5165\u4f1a\u7f3a，\u5b9e\u6d4b\u629b Error:（\u751f\u4ea7\u7248\u6d88\u606f\u4e3a\u7a7a）\u3002<\/p>\n

          \u7b2c\u4e94\u6b65：\u6309\u6a21\u5f0f\u2463，\u6478\u4e00\u4e0b\u884c\u5e03\u5c40<\/h4>\n

          \u6a21\u5f0f\u2463\u7684\u56fe\u548c\u6a21\u5f0f\u2461\u51e0\u4e4e\u4e00\u6837，\u4f46\u6570\u636e\u5f62\u72b6\u6362\u4e86：transposed \u662f\u4e00\u4e2a\u300c\u6708\u4efd\u5728\u7b2c\u4e00\u884c\u3001\u6bcf\u884c\u4e00\u4e2a\u6307\u6807\u300d\u7684\u4e8c\u7ef4\u6570\u7ec4，\u9760 dataset.seriesLayoutBy: 'row' \u6a2a\u7740\u8bfb\u3002\u56fe\u4f8b \u9500\u552e\u989d \/ \u676f\u6570 \u6765\u81ea\u6bcf\u884c\u7684\u7b2c\u4e00\u4e2a\u683c\u5b50\u3002<\/p>\n

          \u505a\u4e2a\u5b9e\u9a8c：\u628a series \u6539\u6210 []（\u4e00\u4e2a\u7cfb\u5217\u90fd\u4e0d\u5199）\u3002\u5b9e\u6d4b\u56fe\u4e0a\u6ca1\u6709\u4efb\u4f55\u6570\u636e\u56fe\u5f62\u3001\u7cfb\u5217\u6570 0\u2014\u2014\u884c\u5e03\u5c40\u4e0d\u4f1a\u628a\u300c\u6709\u51e0\u884c\u300d\u81ea\u52a8\u53d8\u6210\u300c\u6709\u51e0\u4e2a\u7cfb\u5217\u300d，\u7cfb\u5217\u4ecd\u8981\u4f60\u81ea\u5df1\u5199\u51fa\u6765\u3002<\/p>\n

          \u7b2c\u516d\u6b65：\u6309\u6a21\u5f0f\u2464，\u6bd4\u8f83\u4e24\u79cd\u6539\u540d<\/h4>\n

          \u6a21\u5f0f\u2464\u548c\u6a21\u5f0f\u2460\u662f\u540c\u4e00\u4efd\u6570\u636e\u3001\u540c\u6837\u7684\u4e24\u4e2a\u4e0d\u5199 encode \u7684\u7cfb\u5217，\u552f\u4e00\u533a\u522b\u662f\u591a\u4e86 dimensions: [{name, displayName}]\u3002\u56fe\u4f8b\u4ece\u82f1\u6587\u53d8\u4e2d\u6587，\u6392\u961f\u89c4\u5219\u4e00\u70b9\u6ca1\u53d8（\u67f1\u4ecd\u662f sales\u3001\u7ebf\u4ecd\u662f cups）\u3002<\/p>\n

          \u60f3\u9a8c\u8bc1\u300c\u76f4\u63a5\u6539\u5217\u540d\u4f1a\u7a7a\u56fe\u300d，\u628a\u8fd9\u6bb5\u66ff\u8fdb\u53bb\u5237\u65b0：<\/p>\n

          dataset<\/span>:<\/span> {<\/span> source<\/span>:<\/span> monthly,<\/span> dimensions<\/span>:<\/span> [<\/span>'\u6708\u4efd'<\/span>,<\/span> '\u9500\u552e\u989d'<\/span>,<\/span> '\u676f\u6570'<\/span>,<\/span> '\u8ba2\u5355\u6570'<\/span>]<\/span> }<\/span>,<\/span>
          \nseries<\/span>:<\/span> [<\/span>{<\/span> type<\/span>:<\/span> 'bar'<\/span> }<\/span>]<\/span><\/p>\n

          \u5b9e\u6d4b 446 \u5b57\u8282\u3001\u4e00\u6839\u67f1\u5b50\u90fd\u6ca1\u6709\u3001Console \u91cc\u4e00\u6761\u8b66\u544a\u90fd\u6ca1\u6709\u3002\u628a encode \u6539\u6210\u4e0b\u6807 {x: 0, y: 1} \u4e5f\u4e00\u6837\u662f\u7a7a\u56fe\u2014\u2014\u56e0\u4e3a\u53d6\u4e0d\u5230\u503c\u4e0d\u662f\u7f16\u7801\u627e\u4e0d\u5230\u5217，\u662f\u5217\u672c\u8eab\u5df2\u7ecf\u548c\u6e90\u91cc\u7684\u952e\u8131\u94a9\u4e86\u3002<\/p>\n

          \u7b2c\u4e03\u6b65：\u628a\u7f3a\u5931\u65e5\u5355\u72ec\u62ce\u51fa\u6765\u770b<\/h4>\n

          #dirty \u7528\u7684\u662f dataset + encode，#gap \u7528\u7684\u662f series.data\u2014\u2014\u540c\u4e00\u4e2a marchSales \u6570\u7ec4\u3001\u540c\u6837\u4e24\u4e2a null，\u4e24\u6761\u8def\u90fd\u753b\u51fa 29 \u6839\u67f1\u5b50\u3002null \u7684\u884c\u4e3a\u4e0d\u968f\u5582\u6cd5\u6539\u53d8\u3002<\/p>\n

          \u6570\u4e00\u4e0b\u8f74\u4e0a\u7684\u683c\u5b50：01 \u65e5 \u5230 31 \u65e5 \u5168\u5728，14 \u65e5 15 \u65e5 \u4e24\u683c\u53ea\u662f\u6ca1\u6709\u67f1\u3002\u300c\u6570\u636e\u4e22\u4e86\u300d\u5728\u56fe\u4e0a\u8868\u73b0\u4e3a\u7a7a\u683c\u5b50，\u4e0d\u662f\u5c11\u4e24\u4e2a\u683c\u5b50\u2014\u2014\u8fd9\u5c31\u662f\u4e3b\u7ebf\u6570\u636e\u4e3a\u4ec0\u4e48\u4fdd\u7559 null \u884c\u800c\u4e0d\u76f4\u63a5\u5220\u6389\u5b83\u4eec\u3002<\/p>\n

          \u7b2c\u516b\u6b65：\u6570 M，\u628a connectNulls \u9489\u6b7b<\/h4>\n

          \u70b9 \u5207\u6362 connectNulls \u6309\u94ae，#gapInfo \u4f1a\u6253\u5370：<\/p>\n

          connectNulls=false \u2192 \u7ebf\u6761 path \u6570 1，\u6bcf\u6761\u91cc\u7684 M \u4e2a\u6570 [2]，\u7b26\u53f7（\u5c0f\u5706\u70b9）\u6570 29
          \nconnectNulls=true \u2192 \u7ebf\u6761 path \u6570 1，\u6bcf\u6761\u91cc\u7684 M \u4e2a\u6570 [1]，\u7b26\u53f7（\u5c0f\u5706\u70b9）\u6570 29<\/p>\n

          M \u7684\u4e2a\u6570\u662f\u5224\u636e（\u5b9e\u6d4b\u4e24\u79cd\u60c5\u51b5\u7684 SVG \u5b57\u8282\u6570\u90fd\u662f 13,227\u3001d \u5b57\u7b26\u4e32\u957f\u5ea6\u90fd\u662f 331，\u770b\u4e0d\u51fa\u533a\u522b）\u3002\u7b26\u53f7\u6570\u4e00\u76f4\u662f 29\u2014\u2014connectNulls \u53ea\u8fde\u7ebf，\u4e0d\u4f1a\u8865\u70b9：\u8de8\u8fc7\u53bb\u7684\u90a3\u4e00\u6bb5\u4e24\u5934\u6709\u7ebf\u8fde\u7740，\u4f46\u4e2d\u95f4\u90a3\u4e24\u4e2a\u7a7a\u4f4d\u4ecd\u7136\u6ca1\u6709\u5706\u70b9\u3002<\/p>\n

          \n

          \u3010\u53c2\u6570\u901f\u67e5\u3011<\/h3>\n

          \u8868\u4e00：dataset \u7684\u952e<\/h4>\n\n\u952e\u4f5c\u7528\u5b9e\u6d4b\u6ce8\u610f<\/tr>\n\n\n\n\n\n\n\n\n\n\n
          dataset.source<\/td>\n\u6570\u636e\u672c\u4f53，\u56db\u79cd\u5f62\u72b6\u90fd\u5403<\/td>\n\u5199\u6210\u6570\u7ec4（dataset: rows）\u5f53\u573a\u629b TypeError: Bind must be called on a function<\/td>\n<\/tr>\n
          dataset.id<\/td>\n\u7ed9\u8fd9\u4efd\u8868\u8d77\u540d<\/td>\n\u914d\u5408 series.datasetId \/ dataset.fromDatasetId<\/td>\n<\/tr>\n
          dataset.sourceHeader<\/td>\n\u4e8c\u7ef4\u6570\u7ec4\u9996\u884c\u662f\u4e0d\u662f\u8868\u5934<\/td>\n'auto'（\u2261true\u22611）／false（\u22610）／2 \u8868\u793a\u524d\u4e24\u884c\u90fd\u662f\u8868\u5934<\/td>\n<\/tr>\n
          dataset.dimensions<\/td>\n\u5b9a\u4e49\u5217\u540d<\/td>\n\u5bf9\u8c61\u6570\u7ec4\u4e0a\u6539\u540d\u4f1a\u8ba9\u53d6\u503c\u5168\u90e8\u843d\u7a7a；\u5b89\u5168\u5199\u6cd5\u662f {name, displayName}<\/td>\n<\/tr>\n
          dataset.seriesLayoutBy<\/td>\n'column'（\u9ed8\u8ba4）／'row'<\/td>\n\u5bf9\u5bf9\u8c61\u6570\u7ec4\u65e0\u4f5c\u7528<\/td>\n<\/tr>\n
          dataset.transform<\/td>\n\u6574\u5f62\u5668，\u5bf9\u8c61\u6216\u6570\u7ec4<\/td>\n\u6570\u7ec4\u6309\u4e66\u5199\u987a\u5e8f\u6267\u884c；\u5199\u5728 series \u4e0a\u4f1a\u88ab\u5ffd\u7565<\/td>\n<\/tr>\n
          dataset.fromDatasetIndex<\/td>\n\u8fd9\u4e00\u4efd\u7684\u8f93\u5165\u662f\u7b2c\u51e0\u4efd<\/td>\n\u7f3a\u7701\u662f 0，\u4e0d\u662f\u4e0a\u4e00\u5c42<\/td>\n<\/tr>\n
          dataset.fromDatasetId<\/td>\n\u540c\u4e0a，\u6309\u540d\u5b57<\/td>\n\u548c fromDatasetIndex \u4e8c\u9009\u4e00<\/td>\n<\/tr>\n
          dataset.name \/ dataset.type<\/td>\n\u7ec4\u4ef6\u901a\u7528\u5b57\u6bb5<\/td>\n\u4e00\u822c\u4e0d\u5199<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

          \u8868\u4e8c：\u7cfb\u5217\u4fa7\u5403\u6570\u636e\u7684\u952e<\/h4>\n\n\u952e\u4f5c\u7528\u5b9e\u6d4b\u6ce8\u610f<\/tr>\n\n\n\n\n\n\n\n\n
          series.data<\/td>\n\u76f4\u63a5\u7ed9\u8fd9\u4e2a\u7cfb\u5217\u7684\u6570\u636e<\/td>\n\u4e00\u65e6\u5199\u4e86\u5b83，dataset \u5bf9\u8fd9\u4e2a\u7cfb\u5217\u5c31\u4e0d\u8d77\u4f5c\u7528（\u5b9e\u6d4b\u8bfb\u5230 3 \u884c\u800c\u975e\u8868\u91cc\u7684 8 \u884c）<\/td>\n<\/tr>\n
          series.encode<\/td>\n\u901a\u9053 \u2192 \u7ef4\u5ea6<\/td>\n\u5217\u540d\u4e0d\u5b58\u5728\u65f6\u9759\u9ed8\u56de\u9000（\u5751 6）<\/td>\n<\/tr>\n
          series.datasetIndex<\/td>\n\u8ba4\u9886\u7b2c\u51e0\u4efd dataset<\/td>\n\u7f3a\u7701 0<\/td>\n<\/tr>\n
          series.datasetId<\/td>\n\u6309\u540d\u5b57\u8ba4\u9886<\/td>\n\u5b9e\u6d4b\u751f\u6548<\/td>\n<\/tr>\n
          series.seriesLayoutBy<\/td>\n\u53ea\u6709\u8fd9\u4e2a\u7cfb\u5217\u6309\u884c\u8bfb<\/td>\n\u8986\u76d6 dataset \u4e0a\u7684\u540c\u540d\u8bbe\u7f6e<\/td>\n<\/tr>\n
          series.sourceHeader<\/td>\n\u7cfb\u5217\u7ea7\u8868\u5934\u8bbe\u7f6e<\/td>\n\u540c\u4e0a，\u7c92\u5ea6\u548c seriesLayoutBy \u4e00\u6837<\/td>\n<\/tr>\n
          series.dimensions<\/td>\n\u7cfb\u5217\u7ea7\u5217\u540d<\/td>\n\u6781\u5c11\u7528，\u7b2c 33 \u7ae0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

          （series.source \u4e0d\u662f\u5408\u6cd5\u5b57\u6bb5：\u5b9e\u6d4b\u5199\u4e86\u7b49\u4e8e\u6ca1\u5199，\u7cfb\u5217\u8bfb\u5230 0 \u884c\u3001448 \u5b57\u8282\u7a7a\u56fe\u3002）<\/p>\n

          \u8868\u4e09：\u901a\u9053\u4e0e encode \u53d6\u503c<\/h4>\n\n\u901a\u9053\u7528\u5728\u54ea\u4e9b\u56fe\u5b9e\u6d4b<\/tr>\n\n\n\n\n\n\n\n\n
          series.encode.x<\/td>\n\u76f4\u89d2\u5750\u6807\u7cfb\u7684\u6a2a\u8f74<\/td>\n\u5217\u540d\u6216\u4e0b\u6807\u90fd\u53ef<\/td>\n<\/tr>\n
          series.encode.y<\/td>\n\u7eb5\u8f74<\/td>\n\u5199\u6570\u7ec4\u65f6\u51e0\u4f55\u53d6\u7b2c\u4e00\u5217<\/td>\n<\/tr>\n
          series.encode.label<\/td>\n\u67f1\u9876\/\u70b9\u4e0a\u6807\u7b7e<\/td>\n\u591a\u5217\u7528\u7a7a\u683c\u8fde\u63a5（2358 1324）<\/td>\n<\/tr>\n
          series.encode.tooltip<\/td>\n\u63d0\u793a\u6846<\/td>\n\u4e0e label \u5404\u7ba1\u5404\u7684，\u4e92\u4e0d\u5f71\u54cd<\/td>\n<\/tr>\n
          series.encode.value<\/td>\n\u997c\/\u73af\u3001\u70ed\u529b\u7b49<\/td>\n\u997c\u56fe\u5fc5\u987b\u5b83\u6216\u5b57\u6bb5\u540d\u6070\u597d\u662f value<\/td>\n<\/tr>\n
          series.encode.itemName<\/td>\n\u997c\/\u73af\u7684\u6247\u533a\u540d<\/td>\n\u914d\u5408 value \u4f7f\u7528<\/td>\n<\/tr>\n
          series.encode.latitude \/ longitude<\/td>\n\u5730\u7406\u6563\u70b9<\/td>\n\u7b2c 25 \u7ae0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

          \u4e0d\u5199 encode \u65f6\u7684\u9ed8\u8ba4：defaultedLabel \u4e0e defaultedTooltip \u90fd\u7b49\u4e8e y \u90a3\u4e00\u7ef4（\u5b9e\u6d4b ["sales"]）\u3002<\/p>\n

          \u8868\u56db：\u5185\u7f6e transform<\/h4>\n\n\u5199\u6cd5\u914d\u7f6e\u5b9e\u6d4b<\/tr>\n\n\n\n\n
          'filter'<\/td>\n{dimension: 'sales', '>': 4000000}<\/td>\n\u8fd0\u7b97\u7b26 > >= < <= = != <> value reg<\/td>\n<\/tr>\n
          'filter'（\u590d\u5408）<\/td>\n{and: […]} \/ {or: […]} \/ {not: {…}}<\/td>\n\u53ef\u5d4c\u5957<\/td>\n<\/tr>\n
          'sort'<\/td>\n{dimension: 'sales', order: 'desc'}<\/td>\n\u4e5f\u53ef\u4e3a\u6570\u7ec4\u6309\u591a\u5217\u6392；incomparable \u53d6 'min'\/'max'<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

          \u4e24\u4e2a\u5fc5\u987b\u5199\u7684\u8fb9\u754c：type \u524d\u9762\u4e0d\u8981\u52a0 echarts:（\u5b9e\u6d4b\u52a0\u4e86\u629b\u9519，\u751f\u4ea7\u7248\u6d88\u606f\u662f\u7a7a\u7684 Error:）；filter \u5c11\u5199 dimension\u3001sort \u5c11\u5199 order \u90fd\u629b\u9519，\u5f00\u53d1\u7248\u5206\u522b\u7ed9 Relation condition must has prop "dimension" specified. \u548c Sort transform config must has "order" specified.\u3002<\/p>\n

          \u8868\u4e94：\u56db\u79cd\u5582\u6cd5\u7684\u9009\u578b\u53e3\u8bc0<\/h4>\n\n\u6570\u636e\u5728\u54ea\u7528\u4ec0\u4e48\u4e3a\u4ec0\u4e48<\/tr>\n\n\n\n\n\n\n
          \u5c31\u4e09\u56db\u884c\u3001\u5199\u5728\u4ee3\u7801\u91cc<\/td>\nseries.data \u7eaf\u6570\u5b57\u6570\u7ec4<\/td>\n\u6700\u77ed，\u4e00\u773c\u770b\u5b8c<\/td>\n<\/tr>\n
          \u6bcf\u4e2a\u70b9\u8981\u5355\u72ec\u914d\u8272\/\u6837\u5f0f<\/td>\nseries.data \u5bf9\u8c61\u6570\u7ec4<\/td>\n\u53ea\u6709\u5b83\u80fd\u5199 {value, itemStyle}<\/td>\n<\/tr>\n
          \u591a\u4e2a\u7cfb\u5217\u5171\u7528\u4e00\u5f20\u8868<\/td>\ndataset.source \u5bf9\u8c61\u6570\u7ec4 + encode<\/td>\n\u4e00\u4efd\u6e90\u3001N \u4e2a\u7cfb\u5217，\u53ea\u7ef4\u62a4\u4e00\u5f20\u8868<\/td>\n<\/tr>\n
          \u540e\u7aef\u76f4\u63a5\u8fd4\u56de CSV \u8f6c\u7684\u4e8c\u7ef4\u6570\u7ec4<\/td>\ndataset.source \u4e8c\u7ef4\u6570\u7ec4 + sourceHeader<\/td>\n\u4e0d\u7528\u81ea\u5df1 map<\/td>\n<\/tr>\n
          \u9700\u8981\u8fc7\u6ee4\/\u6392\u5e8f\u540e\u518d\u5582<\/td>\ndataset + transform<\/td>\n\u6574\u5f62\u8ddf\u7740 option \u8d70，\u5207\u6362\u7b5b\u9009\u4e0d\u7528\u91cd\u7b97\u6570\u636e<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

          \u8868\u516d：data\/ \u7684\u5206\u5c42\u5730\u56fe（8 \u4e2a\u6587\u4ef6，\u672c\u7ae0\u8d77\u5168\u4e66\u5171\u7528）<\/h4>\n\n\u5c42\u6587\u4ef6\u6761\u6570 \/ \u5927\u5c0f\u5217\u540e\u9762\u4e3b\u8981\u5582\u7ed9\u8c01<\/tr>\n\n\n\n\n\n\n\n\n\n
          \u4e3b\u6570\u636e<\/td>\nstores.json<\/td>\n12 \u6761 \/ 2.7 KB<\/td>\nstoreId name city province tier lat lng area seats openDate<\/td>\n\u5730\u56fe（\u7b2c 25 \u7ae0）\u3001\u6761\u5f62\u6392\u884c<\/td>\n<\/tr>\n
          \u4e3b\u6570\u636e<\/td>\ncategories.json<\/td>\n8 \u6761 \/ 2.1 KB<\/td>\ncategoryId name group price season<\/td>\n\u997c\/\u73af（\u7b2c 16 \u7ae0）\u3001\u6851\u57fa\u3001\u6811\u56fe<\/td>\n<\/tr>\n
          \u660e\u7ec6\u5c42<\/td>\nsales-daily-store.json<\/td>\n4,234 \u6761 \/ 944.1 KB<\/td>\ndate storeId city sales cups orders avgTicket newMembers weather promotion<\/td>\n\u65e5\u5386\u70ed\u529b（\u7b2c 30 \u7ae0）\u3001\u7bb1\u7ebf\u56fe\u3001\u7b2c 33 \u7ae0\u7684\u6570\u636e\u6574\u5f62<\/td>\n<\/tr>\n
          \u6c47\u603b\u5c42<\/td>\nsales-daily.json<\/td>\n1,096 \u6761 \/ 199.0 KB<\/td>\n\u4e0a\u9762 8 \u5217，\u89c1\u672c\u7ae0\u4f53\u68c0<\/td>\n\u6298\u7ebf\u8d8b\u52bf（\u7b2c 13 \u7ae0）\u3001dataZoom（\u7b2c 20 \u7ae0）<\/td>\n<\/tr>\n
          \u6c47\u603b\u5c42<\/td>\nsales-store-month.json<\/td>\n332 \u6761 \/ 59.4 KB<\/td>\nmonth storeId sales cups orders avgTicket newMembers openDays<\/td>\n\u5806\u53e0\u9762\u79ef\u3001\u70ed\u529b\u56fe\u3001visualMap<\/td>\n<\/tr>\n
          \u6c47\u603b\u5c42<\/td>\nsales-category-month.json<\/td>\n288 \u6761 \/ 28.2 KB<\/td>\nmonth categoryId sales units<\/td>\n\u6851\u57fa\u3001\u96f7\u8fbe\u7684\u65f6\u95f4\u7ef4\u5ea6<\/td>\n<\/tr>\n
          \u6307\u6807\u5c42<\/td>\nstore-metrics.json<\/td>\n12 \u6761 \/ 4.4 KB<\/td>\n16 \u4e2a\u95e8\u5e97\u5e74\u5ea6\u6307\u6807\u5217<\/td>\n\u96f7\u8fbe（\u7b2c 17 \u7ae0）\u3001\u5e73\u884c\u5750\u6807（\u7b2c 31 \u7ae0）<\/td>\n<\/tr>\n
          \u72ec\u7acb<\/td>\ndemo-stock.json<\/td>\n261 \u6761 \/ 53.6 KB<\/td>\ndate open close lowest highest volume ohlc<\/td>\nK \u7ebf（\u7b2c 30 \u7ae0）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

          \u5206\u5c42\u601d\u8def\u662f\u771f\u5b9e\u6570\u4ed3\u7684\u601d\u8def：\u660e\u7ec6\u5c42\u80fd\u805a\u5408\u51fa\u6c47\u603b\u5c42，\u6c47\u603b\u5c42\u80fd\u7b97\u51fa\u6307\u6807\u5c42，\u4efb\u4f55\u4e00\u5c42\u5bf9\u5f97\u4e0a\u8d26\u3002\u672c\u4e66\u540e\u9762\u6bcf\u7ae0\u53d6\u6570\u90fd\u4ece\u8fd9\u5f20\u8868\u91cc\u9009，\u4e0d\u518d\u4e34\u65f6\u9020\u6570\u636e\u3002<\/p>\n

          \n

          \u3010\u5e38\u89c1\u5751\u3011<\/h3>\n

          \u5751 1：\u4e0d\u5199 encode，ECharts \u66ff\u4f60\u9009\u9519\u4e86\u5217<\/h4>\n

          \u73b0\u8c61：\u56fe\u80fd\u51fa\u6765，\u4f46\u6298\u7ebf\u8d34\u5730\u3001\u56fe\u4f8b\u663e\u793a\u82f1\u6587\u5217\u540d\u3001\u7eb5\u8f74\u523b\u5ea6\u6bd4\u9884\u60f3\u5927\u5341\u500d\u3002<\/p>\n

          \u6839\u56e0：\u5b9e\u6d4b\u6392\u961f\u89c4\u5219\u2014\u2014\u7b2c\u4e00\u5217\u5f53\u7c7b\u76ee，\u5176\u4f59\u6570\u503c\u5217\u6309\u5217\u5e8f\u53d1\u7ed9\u5404\u7cfb\u5217，\u5217\u7528\u5b8c\u4e86\u4ece\u5934\u91cd\u590d\u3002\u4f60\u60f3\u770b\u7684\u676f\u6570\u88ab\u6392\u5728\u7b2c\u4e8c\u4e2a，\u800c\u7eb5\u8f74\u662f\u6309\u6700\u5927\u503c（\u9500\u552e\u989d）\u5b9a\u7684\u3002<\/p>\n

          \u4fee\u6cd5：\u6240\u6709\u8fdb\u5165\u6b63\u5f0f\u9879\u76ee\u7684 dataset \u90fd\u663e\u5f0f\u5199 encode，\u628a\u300c\u54ea\u5217\u63a5\u54ea\u4e2a\u901a\u9053\u300d\u8fd9\u4ef6\u4e8b\u4ece\u5e93\u91cc\u593a\u56de\u6765\u3002\u987a\u5e26\u5199 name，\u56fe\u4f8b\u624d\u4f1a\u663e\u793a\u4f60\u8981\u7684\u5b57\u3002<\/p>\n

          \u5751 2：\u5728\u5bf9\u8c61\u6570\u7ec4\u4e0a\u628a dimensions \u6539\u6210\u4e2d\u6587\u5217\u540d，\u753b\u51fa\u4e00\u5f20\u7a7a\u56fe<\/h4>\n

          \u73b0\u8c61：\u4e0d\u62a5\u9519\u3001\u4e0d\u8b66\u544a，\u56fe\u4e0a\u53ea\u6709\u5750\u6807\u8f74（\u5b9e\u6d4b 446 \u5b57\u8282\u30010 \u4e2a <text>\u30010 \u6839\u67f1）\u3002\u628a encode \u6539\u6210\u6309\u4e0b\u6807\u5199\u4e5f\u4e00\u6837\u7a7a\u3002<\/p>\n

          \u6839\u56e0：dimensions \u6570\u7ec4\u662f\u91cd\u65b0\u5b9a\u4e49\u5217\u540d\u3002\u5bf9\u8c61\u6570\u7ec4\u53d6\u503c\u9760 row[\u5217\u540d]，\u5217\u540d\u4e00\u6539，\u6e90\u91cc\u7684 sales\/cups \u518d\u4e5f\u53d6\u4e0d\u5230，\u8bfb\u5230\u7684\u6bcf\u4e00\u5217\u90fd\u662f\u7a7a\u7684\u2014\u2014\u8fd9\u548c\u7f16\u7801\u65b9\u5f0f\u65e0\u5173，\u6240\u4ee5\u6309\u4e0b\u6807\u4e5f\u6551\u4e0d\u56de\u6765\u3002<\/p>\n

          \u4fee\u6cd5：\u6539\u540d\u4e00\u5f8b\u7528 dimensions: [{ name: 'sales', displayName: '\u9500\u552e\u989d' }]（\u5b9e\u6d4b\u6b63\u5e38，\u56fe\u4f8b\u663e\u793a\u4e2d\u6587\u800c\u53d6\u503c\u4ecd\u7528 sales）\u3002\u8981\u5199 dimensions \u6570\u7ec4，\u5c31\u5f97\u628a\u6e90\u91cc\u7684\u952e\u540d\u539f\u6837\u6284\u4e00\u904d，\u6216\u8005\u6539\u7528\u4e8c\u7ef4\u6570\u7ec4\u5582\u6cd5\u3002<\/p>\n

          \u5751 3：\u53ea\u7ed9\u4e00\u5217\u6570\u636e，\u56fe\u753b\u4e0d\u51fa\u6765<\/h4>\n

          \u73b0\u8c61：dataset \u91cc\u53ea\u6709\u4e00\u5217（{source: {v: [1,2,3]}} \u6216 [{sales: 1}, {sales: 2}]），\u67f1\u72b6\u56fe 0 \u6839\u67f1（958 \u5b57\u8282）\u3001\u6298\u7ebf 0 \u6761\u7ebf（1,503 \u5b57\u8282），\u8f74\u548c\u6587\u5b57\u90fd\u6b63\u5e38\u3002<\/p>\n

          \u6839\u56e0：ECharts \u53d1\u73b0\u7f3a\u7ef4\u5ea6，\u4f1a\u7ed9\u5b83\u8865\u4e00\u4e2a\u540d\u53eb y \u7684\u7a7a\u7ef4\u5ea6（\u5b9e\u6d4b\u6a21\u578b\u8bfb\u6570 dims: ["v","y"]\u3001y \u5217\u5168\u4e3a null）\u3002\u8865\u4e0a\u6765\u7684\u8fd9\u5217\u6ca1\u6709\u4efb\u4f55\u503c\u3002<\/p>\n

          \u4fee\u6cd5：\u7c7b\u76ee + \u6570\u503c，\u81f3\u5c11\u4e24\u5217\u3002\u771f\u53ea\u6709\u4e00\u5217\u6570\u636e，\u5c31\u81ea\u5df1\u8865\u4e0a\u7c7b\u76ee\u5217，\u6216\u8005\u6539\u8d70 series.data: [1,2,3]（\u90a3\u4f1a\u8ba9\u4e0b\u6807\u5f53\u7c7b\u76ee）\u3002<\/p>\n

          \u5751 4：\u997c\u56fe\u4e0d\u5403 [['\u7532', 12], ['\u4e59', 8]]<\/h4>\n

          \u73b0\u8c61：\u5bb9\u5668\u9ad8\u5ea6\u6b63\u5e38\u3001Console \u5e72\u51c0，\u4f46\u997c\u56fe\u662f\u4e00\u7247\u7a7a\u767d\u3002<\/p>\n

          \u6839\u56e0：\u5b9e\u6d4b\u8fd9\u79cd\u5f62\u72b6\u7ed9\u997c\u56fe\u5f97\u5230 684 \u5b57\u8282\u7684 SVG，\u91cc\u9762\u6709\u4e09\u4e2a <path d="" fill="#000">\u2014\u2014\u5143\u7d20\u5efa\u4e86，\u51e0\u4f55\u662f\u7a7a\u7684\u3002\u6a21\u578b\u5c42\u8bfb\u6570 dims: ["value","value0"]\u3001defaultedLabel: []\u3002\u540c\u6837\u7684\u6570\u7ec4\u5582\u67f1\u72b6\u56fe\u5219\u4f1a\u628a \u7532 \u5f53 x \u503c\u300112 \u5f53 y \u503c\u3002<\/p>\n

          \u4fee\u6cd5：\u997c\u56fe\u7684\u6570\u636e\u7528 {name, value} \u5bf9\u8c61\u6570\u7ec4，\u6216\u8005\u7528 dataset + encode: {itemName, value}\u3002\u4e0a\u9762\u4e24\u79cd\u5b9e\u6d4b\u90fd\u662f 1,905 \u5b57\u8282\u3001\u4e24\u4e2a\u6247\u5f62\u3001\u6807\u7b7e\u6b63\u5e38\u3002<\/p>\n

          \u5751 5：dataset \u5199\u6210\u6570\u7ec4\u3001transform \u5199\u5230\u7cfb\u5217\u4e0a<\/h4>\n

          \u73b0\u8c61：dataset: rows（\u76f4\u63a5\u628a\u6570\u7ec4\u7ed9\u5b83）\u5f53\u573a\u629b TypeError: Bind must be called on a function；dataset: {} \u629b\u540c\u4e00\u4e2a\u9519\u3002<\/p>\n

          \u6839\u56e0：dataset \u53ea\u80fd\u662f\u300c\u4e00\u4e2a\u5e26 source \u7684\u5bf9\u8c61\u300d\u6216\u300c\u8fd9\u6837\u7684\u5bf9\u8c61\u7ec4\u6210\u7684\u6570\u7ec4\u300d\u3002\u88f8\u6570\u7ec4\u88ab\u5f53\u6210\u591a\u4efd dataset，\u4e8e\u662f\u6bcf\u4e00\u9879\u90fd\u6ca1\u6709 source\u3002<\/p>\n

          \u4fee\u6cd5：\u5199\u6210 dataset: { source: rows }\u3002\u53e6\u4e00\u4f8b：transform \u5199\u5728\u7cfb\u5217\u4e0a\u662f\u5408\u6cd5\u952e\u540d\u3001\u65e0\u6548\u5199\u6cd5（\u5b9e\u6d4b 12 \u884c\u5168\u5728\u3001\u4e00\u6761\u90fd\u6ca1\u8fc7\u6ee4）\u2014\u2014\u5b83\u53ea\u5c5e\u4e8e dataset\u3002<\/p>\n

          \u5751 6：encode \u5199\u4e86\u4e0d\u5b58\u5728\u7684\u7ef4\u5ea6\u540d，\u9759\u9ed8\u7528\u9ed8\u8ba4\u5217<\/h4>\n

          \u73b0\u8c61：\u56fe\u7167\u753b，\u4f46\u663e\u793a\u7684\u6570\u5b57\u4e0d\u662f\u4f60\u6307\u5b9a\u7684\u90a3\u5217\u3002\u4ec0\u4e48\u9519\u90fd\u4e0d\u62a5\u3002<\/p>\n

          \u6839\u56e0：\u5b9e\u6d4b encode.tooltip: ['\u4e0d\u5b58\u5728'] \u4e4b\u540e defaultedTooltip \u56de\u9000\u6210 ["sales"]，\u8f93\u51fa\u548c\u4e0d\u5199\u4e00\u6a21\u4e00\u6837\u3002<\/p>\n

          \u4fee\u6cd5：\u7528\u7b2c\u4e09\u6b65\u90a3\u53e5 Console \u8bca\u65ad\u2014\u2014sm.getData().mapDimension('y') \u76f4\u63a5\u544a\u8bc9\u4f60\u8fd9\u4e2a\u7cfb\u5217\u771f\u6b63\u7528\u4e86\u54ea\u4e00\u5217\u3002\u8fd9\u4e00\u884c\u6bd4\u76ef\u7740 option \u6570\u4e00\u904d\u53ef\u9760\u3002<\/p>\n

          \u5751 7：\u591a\u5c42 transform \u94fe\u4e0d\u5199\u8f93\u5165，\u8fc7\u6ee4\u767d\u505a<\/h4>\n

          \u73b0\u8c61：dataset \u6570\u7ec4\u91cc\u7b2c 1 \u4efd\u8fc7\u6ee4\u3001\u7b2c 2 \u4efd\u6392\u5e8f，\u7cfb\u5217\u5403\u7b2c 2 \u4efd，\u7ed3\u679c\u6392\u5e8f\u751f\u6548\u4e86\u4f46\u8fc7\u6ee4\u6ca1\u751f\u6548（\u5b9e\u6d4b 4 \u884c\u5168\u5728\u800c\u4e0d\u662f 2 \u884c）\u3002<\/p>\n

          \u6839\u56e0：\u6ca1\u5199 fromDatasetIndex\/fromDatasetId \u65f6，\u6bcf\u4efd dataset \u7684\u8f93\u5165\u9ed8\u8ba4\u90fd\u662f\u7b2c 0 \u4efd，\u4e0d\u662f\u5b83\u7684\u4e0a\u4e00\u5c42\u3002<\/p>\n

          \u4fee\u6cd5：\u8981\u4e48\u6bcf\u5c42\u90fd\u663e\u5f0f\u58f0\u660e\u8f93\u5165，\u8981\u4e48\u5e72\u8106\u5408\u5e76\u6210\u4e00\u5c42 transform: [filter, sort]（\u5b9e\u6d4b\u7ed3\u679c\u76f8\u540c，\u4e14\u4e0d\u4f1a\u6f0f）\u3002\u66f4\u72e0\u7684\u4e00\u79cd\u7ec4\u5408\u662f\u8fc7\u6ee4\u6761\u4ef6\u5199\u9519\u5bfc\u81f4 0 \u884c，\u7136\u540e\u518d\u94fe\u4e00\u5c42 sort：\u5b9e\u6d4b\u629b Error:（\u5f00\u53d1\u7248 Can not find dimension info via: sales. Existing dimensions: []）\u2014\u2014\u7a7a\u8868\u4e0a\u6ca1\u6709\u7ef4\u5ea6\u53ef\u6392\u3002<\/p>\n

          \u5751 8：\u4e24\u4efd dataset \u90fd\u4e0d\u8ba4\u9886，\u6216\u8005\u6362\u4e86\u7b5b\u9009\u6761\u4ef6\u65e7\u7cfb\u5217\u8fd8\u8d56\u7740<\/h4>\n

          \u73b0\u8c61：\u4e24\u4e2a\u7cfb\u5217\u753b\u7684\u662f\u540c\u4e00\u4efd\u6570\u636e；\u6216\u8005\u70b9\u6309\u94ae\u6362\u4e86\u7b5b\u9009\u6761\u4ef6\u4e4b\u540e，\u56fe\u4e0a\u7cfb\u5217\u6570\u6ca1\u53d8\u5c11\u3002<\/p>\n

          \u6839\u56e0：\u4e24\u6761\u72ec\u7acb\u89c4\u5219\u3002\u524d\u8005\u662f\u300c\u7cfb\u5217\u9ed8\u8ba4\u5403 datasetIndex 0\u300d；\u540e\u8005\u662f\u7b2c 9 \u7ae0\u8bb2\u8fc7\u7684\u9ed8\u8ba4\u5408\u5e76\u4e0d\u5220\u6570\u7ec4\u6210\u5458\u3002\u5b9e\u6d4b：\u6a21\u5f0f\u2460（2 \u4e2a\u7cfb\u5217\u30011 \u4efd dataset）\u7528\u9ed8\u8ba4\u5408\u5e76\u5207\u5230\u6a21\u5f0f\u2462（1 \u4e2a\u7cfb\u5217\u30012 \u4efd dataset），\u7ed3\u679c\u662f seriesCount \u4ecd\u662f 2\u3001datasetCount \u53d8\u6210 2，\u56fe\u4e0a\u8fd8\u662f 12 \u4e2a\u6708\u3002<\/p>\n

          \u4fee\u6cd5：\u6362\u6570\u636e\u96c6\u65f6\u540c\u65f6\u5199\u8ba4\u9886\u5173\u7cfb（series.datasetId），\u5e76\u4e14\u7528 chart.setOption(option, { replaceMerge: ['dataset', 'series'] })\u3002\u672c\u7ae0\u9875\u9762\u4e94\u4e2a\u6a21\u5f0f\u6309\u94ae\u5168\u90fd\u8fd9\u4e48\u5199\u3002<\/p>\n

          \u5751 9：\u63d0\u793a\u6846\u6a21\u677f\u91cc\u7684 {c} \u5728 dataset \u4e0a\u6253\u5370 [object Object]<\/h4>\n

          \u73b0\u8c61：tooltip.formatter: '{a} | {b} | {c}' \u6253\u5370\u51fa \u9500\u552e\u989d | 2023-01-01 | [object Object]\u3002<\/p>\n

          \u6839\u56e0：\u5bf9\u8c61\u6570\u7ec4\u6e90\u91cc，\u4e00\u4e2a\u6570\u636e\u70b9\u5c31\u662f\u6574\u884c\u5bf9\u8c61，{c}（\u7b2c\u4e09\u4e2a\u53c2\u6570＝\u503c）\u6253\u4e0d\u51fa\u6807\u91cf\u3002\u6362\u6210\u4e8c\u7ef4\u6570\u7ec4\u6e90，\u540c\u4e00\u53e5\u6a21\u677f\u6253\u5370\u7684\u662f\u6574\u884c 2023-01-01,66005,2358\u3002<\/p>\n

          \u4fee\u6cd5：\u5403 dataset \u65f6\u7528 encode \u6307\u5b9a\u901a\u9053，\u6a21\u677f\u6539\u7528 p.value \u56de\u8c03（\u5b9e\u6d4b p.value.sales\/p.value.cups \u53ef\u76f4\u63a5\u53d6，\u8f93\u51fa 66005.33\/2358），\u6216\u8005\u7528 @ \u8bed\u6cd5\u6309\u7ef4\u5ea6\u4e0b\u6807\u53d6（\u5b9e\u6d4b {@[1]} \u6253\u5370 66005.33）\u3002series.data \u7eaf\u6570\u5b57\u6570\u7ec4\u624d\u9002\u5408 {a}{b}{c}（\u5b9e\u6d4b\u8f93\u51fa \u9500\u552e\u989d | \u7532 | 100）\u3002<\/p>\n

          \n

          \u3010\u5de5\u7a0b\u6587\u4ef6\u3011<\/h3>\n

          ch10\/
          \n\u251c\u2500\u2500 index.html \u2190 \u4e94\u6309\u94ae\u5bf9\u6bd4\u53f0 + \u4e24\u5f20\u7f3a\u5931\u503c\u5c0f\u56fe + \u4f53\u68c0\u62a5\u544a\u533a
          \n\u2514\u2500\u2500 app.js \u2190 fetch \u2192 \u805a\u5408 \u2192 \u4e94\u79cd\u5582\u6cd5 \u2192 \u56fe\u5f62\u8ba1\u6570，\u7ea6 220 \u884c<\/p>\n

          \u8dd1\u6cd5（\u672c\u7ae0\u5fc5\u987b\u6709\u670d\u52a1\u5668，\u5224\u636e\u89c1\u7b2c 6 \u7ae0）：<\/p>\n

          node<\/span> tools\/extract.mjs –write<\/span> # \u628a\u672c\u7ae0\u4ee3\u7801\u91cd\u5efa\u6210 code\/ch10\/<\/span>
          \nnode<\/span> tools\/serve.mjs # \u6253\u5f00 http:\/\/127.0.0.1:18000\/code\/ch10\/index.html<\/span><\/p>\n

          \u53cc\u51fb file:\/\/ \u6253\u5f00\u4f1a\u505c\u5728\u72b6\u6001\u6761\u90a3\u53e5\u300c\u52a0\u8f7d\u5931\u8d25\u300d\u4e0a：fetch \u5728 file:\/\/ \u4e0b\u88ab\u6d4f\u89c8\u5668\u62e6\u6389，\u8fd9\u662f\u7b2c 6 \u7ae0\u5b9e\u9a8c\u8fc7\u7684\u884c\u4e3a，\u4e0d\u662f\u672c\u7ae0\u4ee3\u7801\u574f\u4e86\u3002<\/p>\n

          app.js \u91cc\u56db\u4e2a\u503c\u5f97\u5355\u72ec\u6307\u51fa\u6765\u7684\u5199\u6cd5：<\/p>\n

            \n
          • toMonthly() \u662f\u5168\u4e66\u6708\u8868\u7684\u552f\u4e00\u6765\u6e90\u3002\u6b63\u6587\u91cc\u6bcf\u4e2a\u300c3,126,085.40\u300d\u90fd\u662f\u5b83\u8dd1\u51fa\u6765\u7684；sum \u91cc\u7684 r[key] || 0 \u987a\u624b\u628a\u56db\u4e2a null \u5f53 0 \u52a0\u8fdb\u53bb\u4e86\u2014\u2014\u8fd9\u5bf9\u6708\u8868\u65e0\u5bb3（\u7f3a\u5931\u6708\u7684\u5176\u5b83 29 \u5929\u4ecd\u5728），\u4f46\u7b2c 13 \u7ae0\u8bb2\u65e5\u5747\u503c\u65f6\u5fc5\u987b\u6362\u6210\u300c\u8df3\u8fc7\u5e76\u8ba1\u6570\u300d\u3002<\/li>\n
          • countBars() \/ readLine() \u6570\u7684\u662f DOM \u91cc\u7684\u771f\u56fe\u5f62，\u6240\u4ee5\u53ea\u5728 renderer: 'svg' \u4e0b\u6709\u7ed3\u679c；canvas \u6e32\u67d3\u4e0b\u8fd9\u4e24\u4e2a\u51fd\u6570\u8fd4\u56de null，\u9875\u9762\u4e0a\u4f1a\u6253\u5370\u300c\u8bf7\u7528\u6d4f\u89c8\u5668\u6253\u5f00\u300d\u3002\u8fd9\u662f\u6709\u610f\u7684：\u522b\u7528 getOption() \u5224\u65ad\u56fe\u753b\u6ca1\u753b\u51fa\u6765（\u7b2c 9 \u7ae0），\u8981\u5224\u65ad\u56fe\u5f62\u5c31\u6570\u5f62\u72b6\u3002<\/li>\n
          • \u4e94\u4e2a\u6a21\u5f0f\u51fd\u6570\u90fd\u4ee5 setOption(…, { replaceMerge: ['dataset', 'series'] }) \u6536\u5c3e，\u56e0\u4e3a\u6a21\u5f0f\u95f4\u7cfb\u5217\u6570\u548c dataset \u4efd\u6570\u90fd\u4f1a\u53d8（\u5751 8）\u3002<\/li>\n
          • option \u5b57\u9762\u91cf\u5168\u90e8\u76f4\u63a5\u5199\u5728 setOption( \u7684\u62ec\u53f7\u91cc\u3002\u5148\u5b58\u8fdb const \u518d\u4f20，type: 'bar' \u4f1a\u88ab TypeScript \u62d3\u5bbd\u6210 string，\u7b2c 39 \u7ae0\u4f1a\u62a5 TS2769\u3002<\/li>\n<\/ul>\n
            \n

            \u3010\u7ec3\u4e60\u3011<\/h3>\n

            \u7ec3\u4e60 1：\u628a\u9ed8\u8ba4\u6807\u7b7e\u6539\u6210\u676f\u6570<\/h4>\n

            \u53ea\u5141\u8bb8\u52a8 series[0] \u4e00\u4e2a\u5730\u65b9，\u8ba9\u6a21\u5f0f\u2461\u7684\u67f1\u5b50\u9876\u4e0a\u663e\u793a\u676f\u6570\u800c\u4e0d\u662f\u9500\u552e\u989d\u3002\u6539\u5b8c\u7528 Console \u9a8c\u8bc1 defaultedLabel\u3002<\/p>\n

            \u7b54\u6848：`series: [{ name: '\u676f\u6570', type: 'bar', encode: { x: 'month', y: 'cups', label: 'cups' } }, \u2026]`\u2014\u2014\u5176\u5b9e\u53ea\u5199 `encode: {x:'month', y:'cups'}` \u5c31\u591f\u4e86，\u56e0\u4e3a\u5b9e\u6d4b `defaultedLabel` \u6052\u7b49\u4e8e y \u90a3\u4e00\u7ef4（\u6a21\u5f0f\u2461\u9489\u4f4f `cups` \u4e4b\u540e `defaultedLabel` \u81ea\u5df1\u5c31\u53d8\u6210 `["cups"]`）\u3002\u8981\u663e\u793a\u4e24\u5217\u624d\u9700\u8981\u663e\u5f0f\u5199 `label: ['cups','orders']`，\u5b9e\u6d4b\u6807\u7b7e\u6253\u5370 `110552 69039`（\u7a7a\u683c\u5206\u9694）\u3002\u522b\u5fd8\u4e86 `label: { show: true }`：\u6807\u7b7e\u9ed8\u8ba4\u4e0d\u663e\u793a，`encode.label` \u53ea\u51b3\u5b9a\u663e\u793a\u54ea\u4e00\u7ef4（\u5b9e\u6d4b\u4e0d\u5199 `show` \u65f6 11,175 \u5b57\u8282\u3001\u5199 `show` \u540e 11,214 \u5b57\u8282）\u3002<\/p>\n

            \u7ec3\u4e60 2：\u628a\u6708\u8868\u6362\u6210\u65e5\u8868，\u770b\u770b openStores \u90a3\u4e00\u5217<\/h4>\n

            \u628a toMonthly(rows, '2025') \u6362\u6210\u76f4\u63a5\u5582 rows \u7684\u524d 40 \u6761（rows.slice(0, 40)），\u6a21\u5f0f\u2460\u4e0e\u6a21\u5f0f\u2461\u5404\u81ea\u8dd1\u4e00\u904d，\u7136\u540e\u628a encode.y \u6307\u5411 openStores\u3002<\/p>\n

            \u7b54\u6848：\u6a21\u5f0f\u2460\u4f1a\u5148\u7ed9 `sales`\u3001\u518d\u7ed9 `cups`（\u7b2c\u4e00\u5217 `date` \u5f53\u7c7b\u76ee，\u4e0e\u6708\u8868\u540c\u89c4\u5219）；`encode.y: 'openStores'` \u4e4b\u540e\u6298\u7ebf\u4f1a\u53d8\u6210\u4e00\u6761\u51e0\u4e4e\u6c34\u5e73\u7684\u5e26\u5b50\u2014\u2014`openStores` \u53ea\u6709 5～12 \u8fd9\u4e00\u70b9\u70b9\u8303\u56f4，\u800c\u7eb5\u8f74\u4ecd\u6309\u5176\u5b83\u5217\u7684\u6570\u636e\u8303\u56f4\u7b97\u523b\u5ea6\u5417？\u4e0d：\u5b9e\u6d4b**\u53ea\u753b `openStores` \u65f6\u7eb5\u8f74\u4e0a\u9650\u662f 12**（`0, 300, 600, 900, 1200, 1500` \u90a3\u7c7b\u523b\u5ea6\u662f `orders` \u65f6\u7684）\u3002\u8fd9\u9898\u771f\u6b63\u8981\u7ec3\u7684\u662f\u53d1\u73b0\u300c\u523b\u5ea6\u8ddf\u7740\u5b9e\u9645\u7f16\u7801\u8fdb\u6765\u7684\u5217\u8d70\u300d，\u6240\u4ee5\u523b\u5ea6\u7a81\u53d8\u8bf4\u660e\u7f16\u7801\u6539\u5bf9\u4e86\u3002\u56db\u4e2a\u7f3a\u5931\u65e5\u4f1a\u628a\u7ebf\u65ad\u6210\u51e0\u6bb5（`connectNulls` \u7b2c\u516b\u6b65），\u8fd9\u662f\u540c\u4e00\u4e2a\u5751\u7684\u53e6\u4e00\u526f\u9762\u5b54\u3002<\/p>\n

            \u7ec3\u4e60 3：\u5199\u4e00\u4e2a\u300c\u53ea\u7b5b\u4fc3\u9500\u65e5\u300d\u7684\u6309\u94ae<\/h4>\n

            \u52a0\u7b2c\u516d\u4e2a\u6309\u94ae：\u56fe\u4e0a\u53ea\u753b 2025 \u5e74\u6709\u4fc3\u9500\u7684\u90a3\u51e0\u5929（data\/sales-daily.json \u91cc promotion \u975e null \u7684\u8bb0\u5f55），\u7c7b\u76ee\u8f74\u663e\u793a\u65e5\u671f，\u67f1\u9ad8\u663e\u793a sales，\u5e76\u5728 #modeInfo \u91cc\u6253\u5370\u51fa\u8bb0\u5f55\u6761\u6570\u3002\u4e0d\u8bb8\u5728 JS \u91cc filter\u3002<\/p>\n

            \u7b54\u6848：\u8981\u70b9\u6709\u4e09\u6761\u3002\u2460 \u6574\u5f62\u5fc5\u987b\u4ea4\u7ed9 `transform`：`dataset: [{ id: 'raw', source: daily2025 }, { id: 'hit', fromDatasetId: 'raw', transform: { type: 'filter', config: { dimension: 'promotion', value: (v) => !!v } } }]`\u2014\u2014`value` \u8fd0\u7b97\u7b26\u6536\u4e00\u4e2a\u8c13\u8bcd\u51fd\u6570，\u8fd9\u662f\u516d\u79cd\u6bd4\u8f83\u7b26\u91cc\u552f\u4e00\u80fd\u5199\u903b\u8f91\u7684\u90a3\u4e2a\u3002\u2461 \u7cfb\u5217\u8981\u8ba4\u9886：`{ type: 'bar', datasetId: 'hit', encode: { x: 'date', y: 'sales' } }`，\u4e0d\u5199\u5c31\u662f\u5751 8\u3002\u2462 \u6536\u5c3e\u7528 `replaceMerge: ['dataset', 'series']`，\u5426\u5219\u4e0a\u4e00\u4e2a\u6a21\u5f0f\u7684\u7cfb\u5217\u8d56\u7740\u4e0d\u8d70\u3002\u6761\u6570\u7528 JS \u6570\u4e00\u904d\u5373\u53ef（2025 \u5168\u5e74\u7684\u4fc3\u9500\u65e5\u5728\u62a5\u544a\u533a\u90a3 48 \u4e2a\u91cc，\u81ea\u5df1\u6309 `date.startsWith('2025')` \u7b5b\u4e00\u904d）\u3002\u8fdb\u9636：\u628a `value` \u6362\u6210 `reg`\u2014\u2014`{dimension: 'promotion', reg: '.'}` \u5b9e\u6d4b\u4e5f\u80fd\u9009\u51fa\u975e\u7a7a\u9879，\u4f46 `null` \u53c2\u4e0e\u6b63\u5219\u5339\u914d\u7684\u884c\u4e3a\u4e0d\u5982\u8c13\u8bcd\u6e05\u695a\u3002<\/p>\n

            \n

            \u3010\u5c0f\u7ed3\u3011<\/h3>\n
              \n
            • \u6570\u636e\u53ea\u6709\u4e24\u6247\u95e8：series.data（\u5185\u90e8\u5f62\u72b6 original，\u6ca1\u6709\u5217\u540d\u53ef\u8a00）\u548c dataset.source（arrayRows \/ objectRows \/ keyedColumns）\u3002\u4e03\u79cd\u5199\u6cd5\u91cc\u516d\u79cd\u753b\u51fa\u9010\u5b57\u7b26\u76f8\u540c\u7684\u56fe（\u56fe\u5f62\u6307\u7eb9 1,681 \u5b57\u7b26），\u552f\u4e00\u4f8b\u5916\u662f series.data \u7684\u5bf9\u8c61\u6570\u7ec4\u2014\u2014\u5b83\u5fc5\u987b\u989d\u5916\u8865 xAxis.data\u3002<\/li>\n
            • \u4e09\u4e2a\u8bcd\u5206\u6e05\u5c31\u4e0d\u4e71：\u7ef4\u5ea6\u662f\u5217，\u7cfb\u5217\u662f series[i]，\u901a\u9053\u662f\u56fe\u8868\u7c7b\u578b\u8981\u7684\u69fd\u4f4d\u3002\u4e0d\u5199 encode \u5c31\u662f\u8ba9\u5e93\u91cc\u66ff\u4f60\u6392\u961f：\u7b2c\u4e00\u5217\u5f53\u7c7b\u76ee，\u5176\u4f59\u6570\u503c\u5217\u6309\u5217\u5e8f\u53d1，\u7528\u5b8c\u5c31\u91cd\u590d\u3002<\/li>\n
            • encode \u662f\u672c\u7ae0\u6027\u4ef7\u6bd4\u6700\u9ad8\u7684\u4e00\u884c\u914d\u7f6e：\u5b83\u4e0d\u6539\u6570\u636e，\u53ea\u6539\u300c\u54ea\u5217\u63a5\u54ea\u6761\u901a\u9053\u300d，\u987a\u5e26\u628a\u7eb5\u8f74\u523b\u5ea6\u548c\u9ed8\u8ba4\u6807\u7b7e\/\u63d0\u793a\u6846\u7684\u5185\u5bb9\u4e00\u8d77\u5b9a\u4e0b\u6765\u3002label \u548c tooltip \u662f\u4e24\u6761\u4e92\u4e0d\u76f8\u5e72\u7684\u901a\u9053，\u5199\u9519\u5217\u540d\u4e0d\u4f1a\u62a5\u9519\u2014\u2014\u7528 sm.getData().mapDimension('y') \u9a8c\u3002<\/li>\n
            • \u6539\u540d\u8bf7\u7528 displayName，\u4e0d\u8981\u7528 dimensions \u76f4\u63a5\u6539\u5217\u540d（\u5bf9\u8c61\u6570\u7ec4\u4e0a\u4f1a\u5f97\u5230\u4e00\u5f20 446 \u5b57\u8282\u7684\u7a7a\u56fe）\u3002<\/li>\n
            • dataset \u7684\u4ef7\u503c\u5728\u4e00\u4efd\u8868\u5582\u591a\u4e2a\u7cfb\u5217\u4e0e transform \u6574\u5f62\u3002\u8bb0\u56db\u6761：\u7cfb\u5217\u9ed8\u8ba4\u53ea\u5403\u7b2c 0 \u4efd；transform \u53ea\u5c5e\u4e8e dataset；\u591a\u5c42\u94fe\u7684\u8f93\u5165\u5fc5\u987b\u7528 fromDatasetIndex\/fromDatasetId \u663e\u5f0f\u58f0\u660e（\u7f3a\u7701\u662f\u7b2c 0 \u4efd，\u4e0d\u662f\u4e0a\u4e00\u5c42）；transform \u6570\u7ec4\u6309\u4e66\u5199\u987a\u5e8f\u6267\u884c\u3002\u5185\u7f6e\u6574\u5f62\u5668\u53ea\u6709 filter \u548c sort，\u5199 type \u65f6\u4e0d\u8981\u52a0 echarts: \u524d\u7f00\u3002<\/li>\n
            • \u810f\u503c\u6709\u4e00\u6761\u7edf\u4e00\u89c4\u5219\u548c\u4e09\u4e2a\u4f8b\u5916：\u89c4\u5219\u662f\u300c\u8f6c\u4e0d\u51fa\u6570\u5b57\u7684\u4e00\u5f8b\u5f53\u7a7a，\u4e0d\u753b\u3001\u4e0d\u62a5\u9519\u300d（null\/undefined\/'-'\/\u7a7a\u4e32\/\u5e26\u5355\u4f4d\u5b57\u7b26\u4e32\u5168\u4e00\u6837，\u4e14 series.data \u4e0e dataset \u884c\u4e3a\u4e00\u81f4）\u3002\u4f8b\u5916\u662f：\u5b57\u7b26\u4e32\u6570\u5b57\u4f1a\u88ab\u5f53\u771f\u6570\u5b57\u7528；0\/false\/true \u4f1a\u88ab\u753b\u51fa\u6765（0\u30010\u30011）；\u997c\u56fe\u5bf9\u7a7a\u503c\u7684\u5bb9\u5fcd\u5ea6\u66f4\u4f4e\u3002\u6298\u7ebf\u65ad\u6ca1\u65ad\u53ea\u770b d \u91cc M \u7684\u4e2a\u6570，\u5b57\u8282\u6570\u4e00\u70b9\u4e5f\u4e0d\u4f1a\u53d8\u3002<\/li>\n
            • \u4e3b\u7ebf\u6570\u636e\u4ece\u672c\u7ae0\u8d77\u6b63\u5f0f\u4e0a\u5c97\u3002data\/ \u7684 8 \u4e2a\u6587\u4ef6\u6309\u4e3b\u6570\u636e／\u660e\u7ec6\u5c42／\u6c47\u603b\u5c42／\u6307\u6807\u5c42\u5206\u597d，sales-daily.json \u90a3 1,096 \u6761\u662f\u5168\u4e66\u6700\u5e38\u7528\u7684\u90a3\u4efd\u2014\u2014\u5b83\u7684\u56db\u4e2a\u7f3a\u5931\u65e5\u300148 \u4e2a\u4fc3\u9500\u65e5\u548c openStores = 0 \u7684\u6545\u969c\u65e5，\u7b2c 13 \u7ae0\u548c\u7b2c 33 \u7ae0\u8fd8\u4f1a\u56de\u6765\u3002<\/li>\n<\/ul>\n

              \u6570\u636e\u80fd\u5582\u8fdb\u53bb\u4e86，\u4f46\u6bcf\u6b21 fetch \u56de\u6765\u90fd\u8981 init \u4e00\u4e2a\u65b0\u5b9e\u4f8b\u5417？\u4e00\u4e2a\u9875\u9762\u653e\u56db\u5f20\u56fe\u8981\u4e0d\u8981\u5404\u7ba1\u5404\u7684\u9500\u6bc1？\u4e0b\u4e00\u7ae0\u5904\u7406\u5b9e\u4f8b\u672c\u8eab：echarts.init \u7684\u53c2\u6570\u3001\u91cd\u590d init \u7684\u8b66\u544a\u3001resize \u7684\u6b63\u786e\u59ff\u52bf，\u4ee5\u53ca\u5355\u9875\u5e94\u7528\u91cc\u6700\u5bb9\u6613\u51fa\u4e8b\u7684\u90a3\u6761\u2014\u2014\u5fd8\u8bb0 dispose()\u3002<\/p>\n

              \n","protected":false},"excerpt":{"rendered":"

              \u3010\u672c\u7ae0\u76ee\u6807\u3011
              \n\u5b66\u5b8c\u8fd9\u4e00\u7ae0，\u4f60\u80fd：
              \n\u8ba4\u5f97\u51fa\u56db\u79cd\u5582\u6570\u636e\u7684\u5199\u6cd5，\u5e76\u8bf4\u6e05\u5b83\u4eec\u5185\u90e8\u5176\u5b9e\u662f\u540c\u4e00\u5f20\u8868：series.data \u7684\u7eaf\u6570\u5b57\u6570\u7ec4\u3001\u4e8c\u7ef4\u6570\u7ec4\u3001\u5bf9\u8c61\u6570\u7ec4，\u4ee5\u53ca dataset.source\u3002\u4f60\u4f1a\u77e5\u9053 ECharts \u628a\u6765\u6e90\u5f52\u6210\u54ea\u516d\u79cd\u5f62\u72b6（sourceFormat），\u4ee5\u53ca\u54ea\u79cd\u5199\u6cd5\u5fc5\u987b\u989d\u5916\u8865 xAxis.data\u3002\u5206\u6e05\u4e09\u4e2a\u8bcd：\u7ef4\u5ea6（\u8868\u7684\u4e00\u5217&#xff<\/p>\n","protected":false},"author":2,"featured_media":116809,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[994,87],"topic":[],"class_list":["post-116812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-echarts","tag-87"],"yoast_head":"\n\u300aECharts\u5165\u95e8\u300b\u7b2c 10 \u7ae0 \u6570\u636e\u600e\u4e48\u5582\u8fdb\u53bb\uff1adataset\u3001\u7ef4\u5ea6\u4e0e encode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/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:\/\/www.wsisp.com\/helps\/116812.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u300aECharts\u5165\u95e8\u300b\u7b2c 10 \u7ae0 \u6570\u636e\u600e\u4e48\u5582\u8fdb\u53bb\uff1adataset\u3001\u7ef4\u5ea6\u4e0e encode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u3010\u672c\u7ae0\u76ee\u6807\u3011 \u5b66\u5b8c\u8fd9\u4e00\u7ae0，\u4f60\u80fd： \u8ba4\u5f97\u51fa\u56db\u79cd\u5582\u6570\u636e\u7684\u5199\u6cd5，\u5e76\u8bf4\u6e05\u5b83\u4eec\u5185\u90e8\u5176\u5b9e\u662f\u540c\u4e00\u5f20\u8868：series.data \u7684\u7eaf\u6570\u5b57\u6570\u7ec4\u3001\u4e8c\u7ef4\u6570\u7ec4\u3001\u5bf9\u8c61\u6570\u7ec4，\u4ee5\u53ca dataset.source\u3002\u4f60\u4f1a\u77e5\u9053 ECharts \u628a\u6765\u6e90\u5f52\u6210\u54ea\u516d\u79cd\u5f62\u72b6（sourceFormat），\u4ee5\u53ca\u54ea\u79cd\u5199\u6cd5\u5fc5\u987b\u989d\u5916\u8865 xAxis.data\u3002\u5206\u6e05\u4e09\u4e2a\u8bcd：\u7ef4\u5ea6（\u8868\u7684\u4e00\u5217&#xff\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/116812.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-21T21:08:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261021210842-6ad929daa69e6.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/116812.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/116812.html\",\"name\":\"\u300aECharts\u5165\u95e8\u300b\u7b2c 10 \u7ae0 \u6570\u636e\u600e\u4e48\u5582\u8fdb\u53bb\uff1adataset\u3001\u7ef4\u5ea6\u4e0e encode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-10-21T21:08:45+00:00\",\"dateModified\":\"2026-10-21T21:08:45+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/116812.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/116812.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/116812.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u300aECharts\u5165\u95e8\u300b\u7b2c 10 \u7ae0 \u6570\u636e\u600e\u4e48\u5582\u8fdb\u53bb\uff1adataset\u3001\u7ef4\u5ea6\u4e0e encode\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u300aECharts\u5165\u95e8\u300b\u7b2c 10 \u7ae0 \u6570\u636e\u600e\u4e48\u5582\u8fdb\u53bb\uff1adataset\u3001\u7ef4\u5ea6\u4e0e encode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","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:\/\/www.wsisp.com\/helps\/116812.html","og_locale":"zh_CN","og_type":"article","og_title":"\u300aECharts\u5165\u95e8\u300b\u7b2c 10 \u7ae0 \u6570\u636e\u600e\u4e48\u5582\u8fdb\u53bb\uff1adataset\u3001\u7ef4\u5ea6\u4e0e encode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u3010\u672c\u7ae0\u76ee\u6807\u3011 \u5b66\u5b8c\u8fd9\u4e00\u7ae0，\u4f60\u80fd： \u8ba4\u5f97\u51fa\u56db\u79cd\u5582\u6570\u636e\u7684\u5199\u6cd5，\u5e76\u8bf4\u6e05\u5b83\u4eec\u5185\u90e8\u5176\u5b9e\u662f\u540c\u4e00\u5f20\u8868：series.data \u7684\u7eaf\u6570\u5b57\u6570\u7ec4\u3001\u4e8c\u7ef4\u6570\u7ec4\u3001\u5bf9\u8c61\u6570\u7ec4，\u4ee5\u53ca dataset.source\u3002\u4f60\u4f1a\u77e5\u9053 ECharts \u628a\u6765\u6e90\u5f52\u6210\u54ea\u516d\u79cd\u5f62\u72b6（sourceFormat），\u4ee5\u53ca\u54ea\u79cd\u5199\u6cd5\u5fc5\u987b\u989d\u5916\u8865 xAxis.data\u3002\u5206\u6e05\u4e09\u4e2a\u8bcd：\u7ef4\u5ea6（\u8868\u7684\u4e00\u5217&#xff","og_url":"https:\/\/www.wsisp.com\/helps\/116812.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-10-21T21:08:45+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261021210842-6ad929daa69e6.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"22 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/116812.html","url":"https:\/\/www.wsisp.com\/helps\/116812.html","name":"\u300aECharts\u5165\u95e8\u300b\u7b2c 10 \u7ae0 \u6570\u636e\u600e\u4e48\u5582\u8fdb\u53bb\uff1adataset\u3001\u7ef4\u5ea6\u4e0e encode - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-10-21T21:08:45+00:00","dateModified":"2026-10-21T21:08:45+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/116812.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/116812.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/116812.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u300aECharts\u5165\u95e8\u300b\u7b2c 10 \u7ae0 \u6570\u636e\u600e\u4e48\u5582\u8fdb\u53bb\uff1adataset\u3001\u7ef4\u5ea6\u4e0e encode"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/116812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=116812"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/116812\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/116809"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=116812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=116812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=116812"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=116812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}