| (window.webpackJsonp=window.webpackJsonp||[]).push([[74],{375:function(e,n,t){"use strict";t.r(n),n.default="# Document Editing Guidelines\n\n## Adding a Markdown File [[[#adding-a-markdown-file]]]\n\nAdd a markdown file to the `contents/zh/` (Chinese posts) or `contents/en/` (English posts) directories, up to three levels. Update the path and title information in `contents/zh/posts.yml` or `contents/en/posts.yml`. Add the corresponding contributor information in `components/helper/contributors.ts`. (Notice, `en` and `zh` are separate entries in that file.)\n\nLowercase markdown file names.\n\n## Using Prettier to Automatically Format Code [[[#using-prettier-to-automatically-format-code]]]\n\nBefore you start, we recommend installing the [prettier VSCode plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), which will automatically format the code for you when you save it.\n\nIf you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent `prettier` from formatting the code inside the block\n\n```markdown\n\x3c!-- prettier-ignore-start --\x3e\n\x3c!-- prettier-ignore-end --\x3e\n```\n\nIf you find blocks of code that are not formatted, check first for syntax errors in the code.\n\n## Built-in Variables [[[#built-in-variables]]]\n\n- `optionPath`: For example, the source code of [xAxis.type](${optionPath}xAxis.type) is:\n\n <pre>[xAxis.type](${optionPath}xAxis.type)</pre>\n- `apiPath`: For example, the source code of [echarts.init](${apiPath}echarts.init) is:\n\n <pre>[echarts.init](${apiPath}echarts.init)</pre>\n- `mainSitePath`: For example, the source code of [echarts.init](${mainSitePath}api.html#echarts.init) is:\n\n <pre>[echarts.init](${mainSitePath}api.html#echarts.init)</pre>\n- `exampleEditorPath`: For example, the source code of [line-simple](${exampleEditorPath}line-simple&edit=1&reset=1) is:\n\n <pre>[line-simple](${exampleEditorPath}line-simple&edit=1&reset=1)</pre>\n- `exampleViewPath`: For example, the source code of [line-simple](${exampleViewPath}line-simple&edit=1&reset=1) is:\n\n <pre>[line-simple](${exampleViewPath}scatter-exponential-regression&edit=1&reset=1)</pre>\n- `lang`: For example, the source code of [Get Started](${lang}/get-started) is:\n\n <pre>[Get Started](${lang}/get-started)</pre>\n\n\n## Headings [[[#headings]]]\n\nThe syntax:\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n## Some Heading [[[#a-unique-id-for-link]]]\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\n<md-alert type=\"danger\">\nThe id is used to link this heading from outside.\nIt's strongly recommended to declare the id in each heading (e.g., [[[#a-unique-id-for-link]]]) and ensure it remains unchanged. Otherwise an id is auto-generated base on the title text, which may be unstable (changed when the heading text is changed), and varies across different languages.\n</md-alert>\n\nNote: No need to declare id for the main title of an article, as the link for an article is the file path (declared in `posts.yml`).\n\n## Link to Other Articles [[[#link-to-other-articles]]]\n\nThe syntax is:\n<pre>\n[Get Apache ECharts](${lang}/basics/download)\n</pre>\nThe effect is:\n[Get Apache ECharts](${lang}/basics/download)\n\n## Embedding Code [[[#embedding-code]]]\n\n### Basic Usage [[[#embedding-code-basic-usage]]]\n\nThe syntax is:\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js\noption = {\n series: [{\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }]\n};\n```\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\nThe effect is:\n```js\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n### Recommended Way of Writing Code [[[#embedding-code-recommended-way-of-writing-code]]]\n\nIn order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.\n\nFor example, the comment `...`\n\n```js\noption = {\n series: [\n {\n type: 'bar'\n // ...\n }\n ]\n};\n```\n\n### Live Preview and Editing [[[#embedding-code-live-preview-and-editing]]]\n\n> Currently only preview (render the charts) of ECharts option code is supported\n\nThe syntax is:\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js live\noption = {\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\nThe effect is:\n```js live\noption = {\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n### More Preview Layouts [[[#embedding-code-more-preview-layouts]]]\n\n#### Left to Right [[[#embedding-code-more-preview-layouts-left-to-right]]]\n\nThe syntax is:\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js live {layout: 'lr'}\noption = {\n ...\n};\n```\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\nThe effect is:\n```js live {layout: 'lr'}\noption = {\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n#### Right to left [[[#embedding-code-more-preview-layouts-right-to-left]]]\n\nThe syntax is:\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js live {layout: 'rl'}\noption = {\n ...\n};\n```\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\nThe effect is:\n```js live {layout: 'rl'}\noption = {\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n#### Down to Up [[[#embedding-code-more-preview-layouts-down-to-up]]]\n\nThe syntax is:\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js live {layout: 'bt'}\noption = {\n ...\n};\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\nThe effect is:\n```js live {layout: 'bt'}\noption = {\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n### Highlighting Lines of Code and Adding Filenames [[[#embedding-code-highlighting-lines-of-code-and-adding-filenames]]]\n\nThe syntax is:\n\x3c!-- prettier-ignore-start --\x3e\n<pre>\n```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n</pre>\n\x3c!-- prettier-ignore-end --\x3e\n\nThe effect is:\n```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n## Embedding Images [[[#embedding-images]]]\n\nSource images are stored under `static/images/`.\n\nThe syntax is:\n```\n\n```\n\n### Set the Image Height and Width [[[#embedding-images-set-width-height]]]\n\nFor the temporary style of the current page, you can just write html.\n\n```\n<img data-src=\"images/demo.png\" style=\"width: 50px\" />\n```\n\n## Embedding Examples (Iframe) [[[#embedding-examples]]]\n\n\nThe syntax is:\n```\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\"></md-example>\n```\n`src` is the string after `?c=` in the https://echarts.apache.org/examples/en/editor.html?c=line-simple address.\n\nThe effect is:\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\"></md-example>\n\n## Link to Examples [[[#link-to-examples]]]\n\nThe syntax is:\n<pre>[line-simple](${exampleEditorPath}line-simple&edit=1&reset=1)</pre>\n\nThe effect is:\n[line-simple](${exampleEditorPath}line-simple&edit=1&reset=1)\n\n\n## Link to ECharts Option Items [[[#link-to-echarts-option-items]]]\n\nThe syntax is:\n<pre>[xAxis.type](${optionPath}xAxis.type)</pre>\n\nThe effect is:\n[xAxis.type](${optionPath}xAxis.type)\n\nThe syntax is:\n<pre>[echarts.init](${apiPath}echarts.init)</pre>\n\nThe effect is:\n[echarts.init](${apiPath}echarts.init)\n\n\n## More Component Usage [[[#more-component-usage]]]\n\nThe documentation supports the use of globally registered `markdown` components. In addition to the `md-example` component just described, the following components are also available\n\n### md-alert [[[#more-component-usage-md-alert]]]\n\nPrompt components\n\n```\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n```\n\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n\n```\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n```\n\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n\n```\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n```\n\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n\n```\n<md-alert type=\"danger\">\nThis is a danger alert.\n</md-alert>\n```\n\n<md-alert type=\"danger\">\nThis is a danger alert.\n</md-alert>\n"}}]); |