{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/chart","result":{"data":{"current":{"frontmatter":{"title":"Semi DV 数据可视化","order":86,"brief":"Semi DV 是 Semi 设计系统中的数据可视化解决方案","icon":"doc-vchart"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#创建图表主题","title":"创建图表主题"},{"url":"#接入主题","title":"接入主题"},{"url":"#在-figma-中使用图表主题","title":"在 Figma 中使用图表主题"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 86,\n  \"category\": \"展示类\",\n  \"title\": \"Semi DV 数据可视化\",\n  \"icon\": \"doc-vchart\",\n  \"dir\": \"column\",\n  \"brief\": \"Semi DV 是 Semi 设计系统中的数据可视化解决方案\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/dsm_vchart\"\n  }, \"Semi DV\"), \" \\u662F\\u57FA\\u4E8E\\u5B57\\u8282\\u8DF3\\u52A8\\u5F00\\u6E90\\u53EF\\u89C6\\u5316\\u89E3\\u51B3\\u65B9\\u6848 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://visactor.io/vchart\"\n  }, \"VChart\"), \" \\u7684\\u5E95\\u5C42\\u80FD\\u529B\\uFF0C\\u6240\\u5C01\\u88C5\\u7684\\u4E00\\u5957\\u7B26\\u5408 Semi Design \\u98CE\\u683C\\u7684\\u6570\\u636E\\u53EF\\u89C6\\u5316\\u89E3\\u51B3\\u65B9\\u6848\\u3002\"), mdx(\"p\", null, \"VChart \\u57FA\\u4E8E\\u53EF\\u89C6\\u5316\\u8BED\\u6CD5\\u5E93 VGrammar \\u548C\\u6E32\\u67D3\\u5F15\\u64CE VRender \\u8FDB\\u884C\\u5C01\\u88C5\\uFF0C\\u5728\\u6EE1\\u8DB3\\u6570\\u636E\\u5448\\u73B0\\u7684\\u540C\\u65F6\\uFF0C\\u8FD8\\u652F\\u6301\\u9762\\u5411\\u53D9\\u4E8B\\u573A\\u666F\\u7684\\u52A8\\u753B\\u7F16\\u6392\\u3001\\u4E30\\u5BCC\\u7684\\u4EA4\\u4E92\\u80FD\\u529B\\u548C\\u5B9A\\u5236\\u5316\\u7684\\u56FE\\u8868\\u98CE\\u683C\\u3002Semi DV \\u5728\\u6B64\\u57FA\\u7840\\u4E0A\\u652F\\u6301\\u56FE\\u8868\\u4E3B\\u9898\\u914D\\u7F6E\\uFF0C\\u5E2E\\u52A9\\u7528\\u6237\\u5728\\u4FDD\\u969C\\u9875\\u9762 UI \\u6574\\u4F53\\u6027\\u7684\\u540C\\u65F6\\uFF0C\\u7075\\u6D3B\\u5B9E\\u73B0\\u4E2A\\u6027\\u5316\\u89C6\\u89C9\\u8868\\u8FBE\\u3002\"), mdx(\"p\", null, \"Semi DV \\u652F\\u6301\\u7B80\\u6613\\u6A21\\u5F0F\\u548C\\u9AD8\\u7EA7\\u6A21\\u5F0F\\u4E24\\u79CD\\u914D\\u7F6E\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7B80\\u6613\\u6A21\\u5F0F\\uFF1A\\u5B9A\\u5236\\u4E3B\\u9898\\u8272\\uFF0C\\u9009\\u62E9\\u8272\\u677F\\uFF0C\\u4EE5\\u53CA\\u5706\\u89D2\\u3001\\u95F4\\u8DDD\\u3001\\u7C97\\u7EC6\\u98CE\\u683C\\u5373\\u53EF\\u83B7\\u53D6\\u8F7B\\u677E\\u83B7\\u53D6\\u4E00\\u5957\\u56FE\\u8868\\u4E3B\\u9898\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9AD8\\u7EA7\\u6A21\\u5F0F\\uFF1A\\u652F\\u6301\\u4ECE\\u57FA\\u7840 Token\\uFF08\\u989C\\u8272\\u3001\\u5B57\\u4F53\\u3001\\u5706\\u89D2\\u3001\\u95F4\\u8DDD\\u3001\\u7EBF\\u6BB5\\u3001\\u52A8\\u753B\\uFF09\\uFF0C\\u5143\\u7D20\\uFF08\\u6807\\u9898\\u3001\\u5750\\u6807\\u8F74\\u3001\\u56FE\\u5217\\u3001\\u4EA4\\u4E92\\u5143\\u7D20\\uFF09\\uFF0C\\u56FE\\u8868\\uFF08\\u67F1\\u72B6\\u56FE\\u3001\\u6298\\u7EBF\\u56FE\\u3001\\u9762\\u79EF\\u56FE\\u3001\\u997C\\u56FE\\u3001\\u6F0F\\u6597\\u56FE\\uFF09\\u7B49\\u5C42\\u7EA7\\u8FDB\\u884C\\u914D\\u7F6E\\uFF0C\\u6EE1\\u8DB3\\u7528\\u6237\\u7CBE\\u7EC6\\u5316\\u914D\\u7F6E\\u9700\\u6C42\")), mdx(\"h3\", null, \"\\u521B\\u5EFA\\u56FE\\u8868\\u4E3B\\u9898\"), mdx(\"p\", null, \"\\u8BBF\\u95EE\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/dsm/design_system_list?type=vcharts\"\n  }, \"\\u521B\\u5EFA\\u8BBE\\u8BA1\\u7CFB\\u7EDF\"), \", \\u70B9\\u51FB\\u521B\\u5EFA\\u56FE\\u8868\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u6309\\u94AE\\u3002\\u5B8C\\u6210\\u914D\\u7F6E\\u540E\\uFF0C\\u4E00\\u952E\\u53D1\\u5E03\\u5373\\u53EF\\u63A8\\u9001\\u5230 npm \\u4E2D\\u3002\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/chart-create.jpeg\",\n    \"alt\": \"创建\"\n  })), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/chart-easy.jpeg\",\n    \"alt\": \"简易模式\"\n  })), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/chart-advance.jpeg\",\n    \"alt\": \"高级模式\"\n  })), mdx(\"p\", null, \"\\u5173\\u4E8E\\u914D\\u7F6E\\u4E3B\\u9898\\u7684\\u66F4\\u8BE6\\u7EC6\\u4F7F\\u7528\\u6587\\u6863\\u8BF7\\u53C2\\u8003\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/dsm_vchart/doc/zh-CN/theme/customized-theme-tutorial#dsm_%E5%88%9B%E5%BB%BA%E4%B8%BB%E9%A2%98\"\n  }, \"\\u521B\\u5EFA\\u4E3B\\u9898\")), mdx(\"h3\", null, \"\\u63A5\\u5165\\u4E3B\\u9898\"), mdx(\"p\", null, \"\\u5B89\\u88C5 VChart\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"# \\u4F7F\\u7528 npm \\u5B89\\u88C5\\nnpm install @visactor/react-vchart\\n# \\u4F7F\\u7528 yarn \\u5B89\\u88C5\\nyarn add @visactor/react-vchart\\n\")), mdx(\"p\", null, \"\\u4E3B\\u9898\\u5305\\u7531\\u8BBE\\u8BA1\\u5E08\\u5728 Semi DV \\u4E0A\\u914D\\u7F6E\\u5B8C\\u4E3B\\u9898\\u540E\\u53D1\\u5E03\\uFF0C\\u8BF7\\u5411\\u8BBE\\u8BA1\\u5E08\\u8BE2\\u95EE\\u4E3B\\u9898\\u5305\\u540D\\u79F0\\uFF0C\\u5047\\u8BBE\\u4E3B\\u9898\\u5305\\u540D\\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@ies/semi-vchart-theme-test\"), \"\\uFF0C\\u5B89\\u88C5\\u547D\\u4EE4\\u4E3A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"npm install @ies/semi-vchart-theme-test\\n# \\u6216\\nyarn add @ies/semi-vchart-theme-test\\n\")), mdx(\"p\", null, \"\\u5F15\\u5165\\u4E3B\\u9898\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// vchart \\u4EAE\\u8272\\nimport vchartLight from \\\"@ies/semi-vchart-theme-test/light.json\\\";\\n// vchart \\u6697\\u8272\\nimport vchartDark from \\\"@ies/semi-vchart-theme-test/dark.json\\\";\\n\")), mdx(\"p\", null, \"\\u6CE8\\u518C\\u4E3B\\u9898\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"import VChart from '@visactor/vchart';\\n\\nVChart.ThemeManager.registerTheme(\\\"myLightTheme\\\", vchartLight);\\n// apply a theme\\nVChart.ThemeManager.setCurrentTheme('myLightTheme');\\n\")), mdx(\"h3\", null, \"\\u5728 Figma \\u4E2D\\u4F7F\\u7528\\u56FE\\u8868\\u4E3B\\u9898\"), mdx(\"p\", null, \"\\u5B89\\u88C5 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/start/design-source\"\n  }, \"Figma \\u63D2\\u4EF6\"), \" \\uFF0C\\u53EF\\u9009\\u62E9\\u4E3B\\u9898\\uFF0C\\u5E76\\u5728\\u8BBE\\u8BA1\\u7A3F\\u4E0A\\u7ED8\\u5236\\u5E26\\u6709\\u4E3B\\u9898\\u7684\\u56FE\\u8868\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/chart","next":{"fields":{"slug":"en-US/feedback/banner"},"id":"35307725-6884-5e5e-abac-f5f9780ad9f7","frontmatter":{"title":"Banner","localeCode":"en-US","icon":"doc-banner","showNew":null}},"previous":{"fields":{"slug":"en-US/show/chart"},"id":"479baeb1-c967-582b-a41e-bece70061743","frontmatter":{"title":"Data Visualization","localeCode":"en-US","icon":"doc-vchart","showNew":null}}}},"staticQueryHashes":["1348983216308087","1477422646308087","3245198693308087","417590761308087","63159454308087"]}