[GitHub] [echarts] echarts-bot[bot] commented on issue #15075: series-candlestick-markPoint-symbolOffset no effect

2021-06-02 Thread GitBox


echarts-bot[bot] commented on issue #15075:
URL: https://github.com/apache/echarts/issues/15075#issuecomment-853618007






-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[GitHub] [echarts] SepVeneto opened a new issue #15075: series-candlestick-markPoint-symbolOffset no effect

2021-06-02 Thread GitBox


SepVeneto opened a new issue #15075:
URL: https://github.com/apache/echarts/issues/15075


   ### Version
   5.1.1
   
   ### Steps to reproduce
   
https://echarts.apache.org/en/option.html#series-candlestick.markPoint.symbolOffset
   try it, set the 'x' or 'y' in the number, like 100
   the symbol's position in the demo doesn't move.
   官方文档这里例子里添加symbolOffset这个属性,然后随便改个值
   
   or use this option
   ```js
   option = {
 tooltip: {
   trigger: "axis",
   axisPointer: {
 type: "cross"
   }
 },
 legend: {
   data: ["日K", "MA5", "MA10", "MA20", "MA30"]
 },
 grid: {
   left: "10%",
   right: "10%",
   bottom: "15%"
 },
 xAxis: {
   type: "category",
   data: ["2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30", 
"2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6", "2013/2/7", 
"2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20", "2013/2/21", "2013/2/22", 
"2013/2/25", "2013/2/26", "2013/2/27", "2013/2/28", "2013/3/1", "2013/3/4", 
"2013/3/5", "2013/3/6", "2013/3/7", "2013/3/8", "2013/3/11", "2013/3/12", 
"2013/3/13", "2013/3/14", "2013/3/15", "2013/3/18", "2013/3/19", "2013/3/20", 
"2013/3/21", "2013/3/22", "2013/3/25", "2013/3/26", "2013/3/27", "2013/3/28", 
"2013/3/29", "2013/4/1", "2013/4/2", "2013/4/3", "2013/4/8", "2013/4/9", 
"2013/4/10", "2013/4/11", "2013/4/12", "2013/4/15", "2013/4/16", "2013/4/17", 
"2013/4/18", "2013/4/19", "2013/4/22", "2013/4/23", "2013/4/24", "2013/4/25", 
"2013/4/26", "2013/5/2", "2013/5/3", "2013/5/6", "2013/5/7", "2013/5/8", 
"2013/5/9", "2013/5/10", "2013/5/13", "2013/5/14", "2013/5/15", "2013/5/16", 
"2013/5/17", "2013/5/20", "2013/5/21", "2013/5/22", "2013/5/23", "2013/5/24", 
"2013/
 5/27", "2013/5/28", "2013/5/29", "2013/5/30", "2013/5/31", "2013/6/3", 
"2013/6/4", "2013/6/5", "2013/6/6", "2013/6/7", "2013/6/13"],
   scale: true,
   boundaryGap: false,
   axisLine: {
 onZero: false
   },
   splitLine: {
 show: false
   },
   splitNumber: 20,
   min: "dataMin",
   max: "dataMax"
 },
 yAxis: {
   scale: true,
   splitArea: {
 show: true
   }
 },
 dataZoom: [{
   type: "inside",
   start: 50,
   end: 100
 }, {
   show: true,
   type: "slider",
   top: "90%",
   start: 50,
   end: 100
 }],
 series: [{
   name: "日K",
   type: "candlestick",
   data: [
 [2320.26, 2320.26, 2287.3, 2362.94],
 [2300, 2291.3, 2288.26, 2308.38],
 [2295.35, 2346.5, 2295.35, 2346.92],
 [2347.22, 2358.98, 2337.35, 2363.8],
 [2360.75, 2382.48, 2347.89, 2383.76],
 [2383.43, 2385.42, 2371.23, 2391.82],
 [2377.41, 2419.02, 2369.57, 2421.15],
 [2425.92, 2428.15, 2417.58, 2440.38],
 [2411, 2433.13, 2403.3, 2437.42],
 [2432.68, 2434.48, 2427.7, 2441.73],
 [2430.69, 2418.53, 2394.22, 2433.89],
 [2416.62, 2432.4, 2414.4, 2443.03],
 [2441.91, 2421.56, 2415.43, 2444.8],
 [2420.26, 2382.91, 2373.53, 2427.07],
 [2383.49, 2397.18, 2370.61, 2397.94],
 [2378.82, 2325.95, 2309.17, 2378.82],
 [2322.94, 2314.16, 2308.76, 2330.88],
 [2320.62, 2325.82, 2315.01, 2338.78],
 [2313.74, 2293.34, 2289.89, 2340.71],
 [2297.77, 2313.22, 2292.03, 2324.63],
 [2322.32, 2365.59, 2308.92, 2366.16],
 [2364.54, 2359.51, 2330.86, 2369.65],
 [2332.08, 2273.4, 2259.25, 2333.54],
 [2274.81, 2326.31, 2270.1, 2328.14],
 [2333.61, 2347.18, 2321.6, 2351.44],
 [2340.44, 2324.29, 2304.27, 2352.02],
 [2326.42, 2318.61, 2314.59, 2333.67],
 [2314.68, 2310.59, 2296.58, 2320.96],
 [2309.16, 2286.6, 2264.83, 2333.29],
 [2282.17, 2263.97, 2253.25, 2286.33],
 [2255.77, 2270.28, 2253.31, 2276.22],
 [2269.31, 2278.4, 2250, 2312.08],
 [2267.29, 2240.02, 2239.21, 2276.05],
 [2244.26, 2257.43, 2232.02, 2261.31],
 [2257.74, 2317.37, 2257.42, 2317.86],
 [2318.21, 2324.24, 2311.6, 2330.81],
 [2321.4, 2328.28, 2314.97, 2332],
 [2334.74, 2326.72, 2319.91, 2344.89],
 [2318.58, 2297.67, 2281.12, 2319.99],
 [2299.38, 2301.26, 2289, 2323.48],
 [2273.55, 2236.3, 2232.91, 2273.55],
 [2238.49, 2236.62, 2228.81, 2246.87],
 [2229.46, 2234.4, 2227.31, 2243.95],
 [2234.9, 2227.74, 2220.44, 2253.42],
 [2232.69, 2225.29, 2217.25, 2241.34],
 [2196.24, 2211.59, 2180.67, 2212.59],
 [2215.47, 2225.77, 2215.47, 2234.73],
 [2224.93, 2226.13, 2212.56, 2233.04],
 [2236.98, 2219.55, 2217.26, 2242.48],
 [2218.09, 2206.78, 2204.44, 2226.26],
 [2199.91, 2181.94, 2177.39, 2204.99],
 [2169.63, 2194.85, 2165.78, 2196.43],
 [2195.03, 2193.8, 2178.47, 2197.51],
 [2181.82, 2197.6, 2175.44, 2206.03],
 [2201.12, 2244.64, 2200.58, 22

[GitHub] [echarts] Getchang commented on issue #15074: hover、click事件多次触发finished的问题

2021-06-02 Thread GitBox


Getchang commented on issue #15074:
URL: https://github.com/apache/echarts/issues/15074#issuecomment-853614979


   > > 放到一个promise里面
   > > `let prom = new Promise(resolve => { this.myChart.on('finished', 
function () { resolve() }) })`
   > > 然后
   > > `prom.then(() => { this.$emit('closeLoading') })`
   > 
   > > 放到一个promise里面
   > > `let prom = new Promise(resolve => { this.myChart.on('finished', 
function () { resolve() }) })`
   > > 然后
   > > `prom.then(() => { this.$emit('closeLoading') })`
   > 
   > 我之前试过了 没用
   
   > 
这种做法是没有解决多次触发finished,但是可以让你的后续业务只触发一次,如果非要只触发一次finished,可以在业务操作执行后,解绑事件监听finished。
   `prom.then(() => { this.$emit('closeLoading'); 
this.myChart.off('finished')})`


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[echarts-handbook] branch master updated: update guide

2021-06-02 Thread shenyi
This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git


The following commit(s) were added to refs/heads/master by this push:
 new 80d9f5f  update guide
80d9f5f is described below

commit 80d9f5ff7cc25b838f3a7bdc18c25d1494fe56bb
Author: pissang 
AuthorDate: Thu Jun 3 14:36:20 2021 +0800

update guide
---
 components/markdown/Alert.vue | 37 +++--
 components/markdown/CodeBlock.vue |  3 +--
 contents/zh/meta/get-started.md   | 50 +--
 contents/zh/posts.js  | 10 
 layouts/default.vue   | 12 ++
 nuxt.config.js|  4 +---
 6 files changed, 71 insertions(+), 45 deletions(-)

diff --git a/components/markdown/Alert.vue b/components/markdown/Alert.vue
index e49cf87..f94e172 100644
--- a/components/markdown/Alert.vue
+++ b/components/markdown/Alert.vue
@@ -1,5 +1,5 @@
 
-  
+  
 
   
 
@@ -23,59 +23,60 @@ export default Vue.extend({
 
 
 
-.alert {
+.md-alert {
   @apply rounded-lg;
+  @apply border-l-4;
 }
 /* Info */
-.alert-info {
+.md-alert-info {
   @apply bg-blue-100 border-blue-400;
 }
-.alert-info code {
+.md-alert-info code {
   @apply bg-blue-200 shadow-none border-0 text-current;
 }
-.alert-info .alert-icon {
+.md-alert-info .md-alert-icon {
   @apply text-blue-400;
 }
-.alert-info .alert-content {
+.md-alert-info .md-alert-content {
   @apply text-blue-700;
 }
 /* Success */
-.alert-success {
+.md-alert-success {
   @apply bg-green-100 border-green-400;
 }
-.alert-success code {
+.md-alert-success code {
   @apply bg-green-200 shadow-none border-0 text-current;
 }
-.alert-success .alert-icon {
+.md-alert-success .md-alert-icon {
   @apply text-green-400;
 }
-.alert-success .alert-content {
+.md-alert-success .md-alert-content {
   @apply text-green-700;
 }
 /* Warning */
-.alert-warning {
+.md-alert-warning {
   @apply bg-orange-100 border-orange-400;
 }
-.alert-warning code {
+.md-alert-warning code {
   @apply bg-orange-200 shadow-none border-0 text-current;
 }
-.alert-warning .alert-icon {
+.md-alert-warning .md-alert-icon {
   @apply text-orange-400;
 }
-.alert-warning .alert-content {
+.md-alert-warning .md-alert-content {
   @apply text-orange-700;
 }
 /* Danger */
-.alert-danger {
+.md-alert-danger {
   @apply bg-red-100 border-red-400;
 }
-.alert-danger code {
+.md-alert-danger code {
   @apply bg-red-200 shadow-none border-0 text-current;
 }
-.alert-danger .alert-icon {
+.md-alert-danger .md-alert-icon {
   @apply text-red-400;
 }
-.alert-danger .alert-content {
+.md-alert-danger .md-alert-content {
   @apply text-red-700;
 }
 
diff --git a/components/markdown/CodeBlock.vue 
b/components/markdown/CodeBlock.vue
index 0ab12ca..b601c1f 100644
--- a/components/markdown/CodeBlock.vue
+++ b/components/markdown/CodeBlock.vue
@@ -135,7 +135,6 @@ export default defineComponent({
 position: absolute;
 right: 0;
 top: 0;
-color: #f7fafc;
 z-index: 10;
 font-family: DM Mono, Menlo, Monaco, Consolas, 'Liberation Mono',
   'Courier New', monospace;
@@ -144,7 +143,7 @@ export default defineComponent({
 letter-spacing: -0.025em;
 line-height: 1;
 
-@apply mr-4 mb-3;
+@apply text-blue-gray-400 mr-4 mt-3;
   }
 
   .clipboard {
diff --git a/contents/zh/meta/get-started.md b/contents/zh/meta/get-started.md
index d65a8e9..d38445d 100644
--- a/contents/zh/meta/get-started.md
+++ b/contents/zh/meta/get-started.md
@@ -1,4 +1,4 @@
-# 文档编写说明
+# 文档编辑指南
 
 ## 新增一个 markdown 文件
 
@@ -32,6 +32,8 @@ option = {
 
 ### 实时预览和编辑
 
+> 目前只支持对 Option 代码的预览
+
 ```markdown
 ```js [live]
 option = {
@@ -63,6 +65,7 @@ option = {
 
 ### 高亮代码行以及添加文件名
 
+使用:
 ```markdown
 ```js{1,3-5}[option.js]
 option = {
@@ -74,6 +77,7 @@ option = {
 \```
 ```
 
+效果:
 ```js{1,3-5}[option.js]
 option = {
 series: [{
@@ -84,7 +88,7 @@ option = {
 ```
 
 
-## 引用图片的方式
+## 引用图片
 
 图片实际存放地址在 `static/images/` 下。
 
@@ -103,10 +107,14 @@ option = {
 
 ## 添加示例 iframe
 
+`src`为 https://echarts.apache.org/examples/zh/editor.html?c=line-simple 
地址中`?c=`后面这一串
+
+使用:
 ```markdown
 
 ```
 
+效果:
 
 
 
@@ -123,26 +131,37 @@ option = {
 
 This is an info alert.
 
-
-This is an success alert.
-
-
-This is an warning alert.
-
-
-This is an danger alert.
-
 ```
 
 
 This is an info alert.
 
+
+```markdown
 
 This is an success alert.
 
+```
+
+This is an success alert.
+
+
+```markdown
 
 This is an warning alert.
 
+```
+
+
+This is an warning alert.
+
+
+```markdown
+
+This is an danger alert.
+
+```
+
 
 This is an danger alert.
 
@@ -152,7 +171,12 @@ This is an danger alert.
 
 实时代码预览组件
 
-> 不推荐直接使用该组件,应该尽可能使用前面的代码语法
+
+不推荐直接使用该组件,应该尽可能使用前面的代码语法
+直接使用该组件在 VSCode 中没法进行代码高亮,而且额外的空格可能会破坏 markdown 语法
+
+
+使用:
 
 ```markdown
 
@@ -169,6 +193,8 @@ option = {
 
 ```
 
+效果:
+
 
 option = {
 xAxis: {
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index 581

[GitHub] [echarts] zhoufanglu commented on issue #10037: 整个图表加载完成如何监听?rendered和finished都不正确

2021-06-02 Thread GitBox


zhoufanglu commented on issue #10037:
URL: https://github.com/apache/echarts/issues/10037#issuecomment-853601804


   > @zhoufanglu 可以考虑在 setOption 前监听 finished,finished 后取消监听。
   > 
   > ```js
   > function onFinished(e) {
   >console.log('onFinished', e)
   >myChart.off('finished', onFinished)
   > }
   > 
   > function setOption(options) {
   >   myChart.on('finished', onFinished)
   >   myChart.setOption(options)
   > }
   > ```
   
   这似乎是个好办法。谢谢大佬,我试试。


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[GitHub] [echarts] zhoufanglu commented on issue #15074: hover、click事件多次触发finished的问题

2021-06-02 Thread GitBox


zhoufanglu commented on issue #15074:
URL: https://github.com/apache/echarts/issues/15074#issuecomment-853601021


   > 放到一个promise里面
   > `let prom = new Promise(resolve => { this.myChart.on('finished', function 
() { resolve() }) })`
   > 然后
   > `prom.then(() => { this.$emit('closeLoading') })`
   
   
   
   > 放到一个promise里面
   > `let prom = new Promise(resolve => { this.myChart.on('finished', function 
() { resolve() }) })`
   > 然后
   > `prom.then(() => { this.$emit('closeLoading') })`
   
   我之前试过了 没用


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[GitHub] [echarts] plainheart commented on issue #15074: hover、click事件多次触发finished的问题

2021-06-02 Thread GitBox


plainheart commented on issue #15074:
URL: https://github.com/apache/echarts/issues/15074#issuecomment-853599042


   See https://github.com/apache/echarts/issues/10037#issuecomment-853596460


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[GitHub] [echarts] plainheart commented on issue #10037: 整个图表加载完成如何监听?rendered和finished都不正确

2021-06-02 Thread GitBox


plainheart commented on issue #10037:
URL: https://github.com/apache/echarts/issues/10037#issuecomment-853596460


   @zhoufanglu 可以考虑在 setOption 前监听 finished,finished 后取消监听。
   
   ```js
   function onFinished(e) {
  console.log('onFinished', e)
  myChart.off('finished', onFinished)
   }
   
   function setOption(options) {
 myChart.on('finished', onFinished)
 myChart.setOption(options)
   }
   ```


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[echarts-handbook] branch master updated: add code copy button

2021-06-02 Thread shenyi
This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git


The following commit(s) were added to refs/heads/master by this push:
 new 2192c36  add code copy button
2192c36 is described below

commit 2192c36ce656780c7597ad73dc46226aeed4
Author: pissang 
AuthorDate: Thu Jun 3 14:12:27 2021 +0800

add code copy button
---
 components/markdown/CodeBlock.vue  |  92 ---
 components/markdown/CodeBlockCopyClipboard.vue | 121 +
 components/markdown/Live.vue   |  18 +++-
 nuxt.config.js |  11 ++-
 package-lock.json  |  16 +---
 package.json   |   1 +
 6 files changed, 207 insertions(+), 52 deletions(-)

diff --git a/components/markdown/CodeBlock.vue 
b/components/markdown/CodeBlock.vue
index a8db9dc..0ab12ca 100644
--- a/components/markdown/CodeBlock.vue
+++ b/components/markdown/CodeBlock.vue
@@ -9,12 +9,14 @@
 :class="`language-${highlightResult.lang} line-numbers`"
   >
 
-
+{{ fileName }}
+
   
 
 
 
 import Prism from 'prismjs'
+
 // enable syntax highlighting on diff language
 import 'prismjs/components/prism-clike'
 import 'prismjs/components/prism-javascript'
@@ -28,6 +30,7 @@ import 'prismjs/plugins/diff-highlight/prism-diff-highlight'
 import 'prism-themes/themes/prism-material-oceanic.css'
 
 import { defineComponent, ref, onMounted, computed } from 
'@vue/composition-api'
+import CodeBlockCopyClipboard from './CodeBlockCopyClipboard.vue'
 
 const DIFF_HIGHLIGHT_SYNTAX = /^(diff)-([\w-]+)/i
 
@@ -39,8 +42,43 @@ function escapeHtml(unsafe) {
 .replace(/"/g, '"')
 .replace(/'/g, ''')
 }
+
+function highlight(lang: string, rawCode: string) {
+  lang = lang || ''
+  let grammer: string = ''
+
+  const diffLanguage = lang.match(DIFF_HIGHLIGHT_SYNTAX)
+  if (diffLanguage) {
+lang = diffLanguage[2]
+grammer = Prism.languages.diff
+  }
+
+  lang = lang === 'vue' ? 'html' : lang
+
+  if (!grammer) {
+grammer = Prism.languages[lang]
+  }
+
+  const highlightLanguage = diffLanguage ? `diff-${lang}` : lang
+
+  let code = grammer
+? Prism.highlight(rawCode, grammer, highlightLanguage)
+: rawCode
+
+  if (!lang || !grammer) {
+lang = 'text'
+code = escapeHtml(code)
+  }
+
+  return {
+lang,
+code
+  }
+}
 export default defineComponent({
-  components: {},
+  components: {
+CodeBlockCopyClipboard
+  },
   props: {
 lang: {
   type: String,
@@ -54,36 +92,7 @@ export default defineComponent({
 const rawCode = ref('')
 
 const highlightResult = computed(() => {
-  let lang = props.lang || ''
-  let grammer
-
-  const diffLanguage = lang.match(DIFF_HIGHLIGHT_SYNTAX)
-  if (diffLanguage) {
-lang = diffLanguage[2]
-grammer = Prism.languages.diff
-  }
-
-  lang = lang === 'vue' ? 'html' : lang
-
-  if (!grammer) {
-grammer = Prism.languages[lang]
-  }
-
-  const highlightLanguage = diffLanguage ? `diff-${lang}` : lang
-
-  let code = grammer
-? Prism.highlight(rawCode.value, grammer, highlightLanguage)
-: rawCode.value
-
-  if (!lang || !grammer) {
-lang = 'text'
-code = escapeHtml(code)
-  }
-
-  return {
-lang,
-code
-  }
+  return highlight(props.lang, rawCode.value)
 })
 
 // Update first time.
@@ -93,6 +102,7 @@ export default defineComponent({
 })
 
 return {
+  rawCode,
   highlightResult
 }
   }
@@ -100,8 +110,10 @@ export default defineComponent({
 
 
 
-.nuxt-content-highlight {
+.md-code-block {
   position: relative;
+}
+.nuxt-content-highlight {
   line-height: 1em;
   font-size: 13px;
 
@@ -131,8 +143,18 @@ export default defineComponent({
 line-height: 1.25rem;
 letter-spacing: -0.025em;
 line-height: 1;
-margin-right: 1rem;
-margin-top: 0.75rem;
+
+@apply mr-4 mb-3;
+  }
+
+  .clipboard {
+display: none;
+  }
+
+  &:hover {
+.clipboard {
+  display: block;
+}
   }
 }
 
diff --git a/components/markdown/CodeBlockCopyClipboard.vue 
b/components/markdown/CodeBlockCopyClipboard.vue
new file mode 100644
index 000..cef120f
--- /dev/null
+++ b/components/markdown/CodeBlockCopyClipboard.vue
@@ -0,0 +1,121 @@
+
+  
+http://www.w3.org/2000/svg";
+  class="h-6 w-6"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke="currentColor"
+  v-if="clipboardChecked"
+>
+  
+
+http://www.w3.org/2000/svg";
+  class="h-6 w-6"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke="currentColor"
+  v-else
+>
+  http://www.w3.org/2000/svg";
+class="h-6 w-6"
+fill="none"
+viewBox="0 0 24 24"
+stroke="currentColor"
+  >
+
+  
+
+  
+
+
+
+i

[GitHub] [echarts] Getchang commented on issue #15074: hover、click事件多次触发finished的问题

2021-06-02 Thread GitBox


Getchang commented on issue #15074:
URL: https://github.com/apache/echarts/issues/15074#issuecomment-853589875


   放到一个promise里面
   `
   let prom = new Promise(resolve => { 
  this.myChart.on('finished', function () {
  resolve()
   })
   })
   `
   然后
   `prom.then(() => { this.$emit('closeLoading') })`


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[echarts] branch fix-endLabel updated (8776a03 -> bb791dc)

2021-06-02 Thread ovilia
This is an automated email from the ASF dual-hosted git repository.

ovilia pushed a change to branch fix-endLabel
in repository https://gitbox.apache.org/repos/asf/echarts.git.


from 8776a03  refactor(endLabel): use state loop in show checking
 add bb791dc  refactor(endLabel): use seriesModel to get endLabel.show

No new revisions were added by this update.

Summary of changes:
 src/chart/line/LineView.ts | 10 +-
 1 file changed, 5 insertions(+), 5 deletions(-)

-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[GitHub] [echarts] pissang commented on a change in pull request #15072: fix(endLabel): endLabel should be displayed if show is true

2021-06-02 Thread GitBox


pissang commented on a change in pull request #15072:
URL: https://github.com/apache/echarts/pull/15072#discussion_r644487648



##
File path: src/chart/line/LineView.ts
##
@@ -412,6 +412,20 @@ function getIndexRange(points: ArrayLike, xOrY: 
number, dim: 'x' | 'y')
 };
 }
 
+function anyStateShowEndLabel(
+endLabelModel: Model, seriesModel: LineSeriesModel
+) {
+if (endLabelModel.get('show')) {
+return true;
+}
+for (let i = 0; i < DISPLAY_STATES.length; i++) {

Review comment:
   Should be SPECIAL_STATES




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[echarts-handbook] branch master updated: fix code higlight issues

2021-06-02 Thread shenyi
This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git


The following commit(s) were added to refs/heads/master by this push:
 new 8a7f7d9  fix code higlight issues
8a7f7d9 is described below

commit 8a7f7d9cc507db4a68cc93ddf5b83b72230cb289
Author: pissang 
AuthorDate: Thu Jun 3 12:59:02 2021 +0800

fix code higlight issues
---
 components/markdown/CodeBlock.vue | 21 +++--
 nuxt.config.js|  4 ++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/components/markdown/CodeBlock.vue 
b/components/markdown/CodeBlock.vue
index 2246d13..a8db9dc 100644
--- a/components/markdown/CodeBlock.vue
+++ b/components/markdown/CodeBlock.vue
@@ -1,10 +1,13 @@
 
   
 
+  
   
+  >
 
 
   
@@ -102,6 +105,20 @@ export default defineComponent({
   line-height: 1em;
   font-size: 13px;
 
+  pre[class*='language-'],
+  code[class*='language-'] {
+font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+  'Liberation Mono', 'Courier New', monospace;
+
+color: #c3cee3;
+background: #263238;
+white-space: pre;
+word-spacing: normal;
+word-break: normal;
+word-wrap: normal;
+text-align: left;
+  }
+
   .filename {
 position: absolute;
 right: 0;
diff --git a/nuxt.config.js b/nuxt.config.js
index 30cdb7e..c08cf2d 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -48,8 +48,8 @@ export default {
 if (attrs.fileName === 'live') {
   return `${escapeHtml(rawCode)}`
 } else {
-  return `${escapeHtml(
 rawCode
   )}`

-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[GitHub] [echarts] bigfacewo commented on issue #15037: calendar的range设置小于1000,会导致同一个实例的setOption方法无法执行。

2021-06-02 Thread GitBox


bigfacewo commented on issue #15037:
URL: https://github.com/apache/echarts/issues/15037#issuecomment-853539738


   @fuchunhui Thanks!
   In fact, my problem is not whether I need to support a time format like 999. 
In my system, for example, my initial value 2021, when the user wants to modify 
it to 2020, he needs to delete the 1 at the end first, and then it becomes 202, 
which will cause this error. When he continues to enter 0, it becomes 2020, but 
because of the above error, he cannot render the chart again, Maybe we can 
avoid this problem by use debounce, but I think this problem should be solved 
by echarts.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[GitHub] [echarts] ssthouse commented on issue #15055: echarts 饼图 负数问题

2021-06-02 Thread GitBox


ssthouse commented on issue #15055:
URL: https://github.com/apache/echarts/issues/15055#issuecomment-853505992


   @Ovilia hi, 这个issue可以让我试试不~


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[echarts] branch fix-endLabel updated (51387f5 -> 8776a03)

2021-06-02 Thread ovilia
This is an automated email from the ASF dual-hosted git repository.

ovilia pushed a change to branch fix-endLabel
in repository https://gitbox.apache.org/repos/asf/echarts.git.


from 51387f5  fix(endLabel): endLabel should be displayed if show is true 
in other states #14441
 add 8776a03  refactor(endLabel): use state loop in show checking

No new revisions were added by this update.

Summary of changes:
 src/chart/line/LineView.ts | 15 ++-
 1 file changed, 10 insertions(+), 5 deletions(-)

-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[GitHub] [echarts] zhoufanglu commented on issue #15074: hover、click事件多次触发finished的问题

2021-06-02 Thread GitBox


zhoufanglu commented on issue #15074:
URL: https://github.com/apache/echarts/issues/15074#issuecomment-853485193


   最后还是暂时使用标记的方法解决了loading的问题,我感觉这样是治标不治本。有没有新的api
   ```js
   this.myChart.on('finished', () => {
 if (this.loading) {
   //如果还是加载状态,关闭Loading
   this.$emit('closeLoading')
 }
 if (!this.isFirstFinished) {
   //只有在第一次的时候resize
   this.isFirstFinished = true
   setTimeout(() => {
 this.myChart.resize()
   })
 }
   })
   ```


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org



-
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org



[echarts-handbook] branch master updated: use live syntax

2021-06-02 Thread shenyi
This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git


The following commit(s) were added to refs/heads/master by this push:
 new 42f0239  use live syntax
42f0239 is described below

commit 42f023968211fe2159e0ae2104f87514dc0681c7
Author: pissang 
AuthorDate: Thu Jun 3 00:13:26 2021 +0800

use live syntax
---
 .../zh/application/chart-types/line/area-line.md |  4 ++--
 .../zh/application/chart-types/line/basic-line.md| 20 ++--
 .../zh/application/chart-types/line/smooth-line.md   |  4 ++--
 .../zh/application/chart-types/line/stacked-line.md  | 10 --
 .../zh/application/chart-types/line/step-line.md |  4 ++--
 contents/zh/best-practice/design/color-enhance.md|  4 ++--
 6 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/contents/zh/application/chart-types/line/area-line.md 
b/contents/zh/application/chart-types/line/area-line.md
index fa8421f..41b73b1 100644
--- a/contents/zh/application/chart-types/line/area-line.md
+++ b/contents/zh/application/chart-types/line/area-line.md
@@ -2,7 +2,7 @@
 
 区域面积折线图将折线到坐标轴的空间设置背景色,用区域面积表达数据。相比普通的折线图,区域面积折线图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用。
 
-
+```js [live]
 option = {
 xAxis: {
 data: ['A', 'B', 'C', 'D', 'E']
@@ -21,6 +21,6 @@ option = {
 }
 }]
 };
-
+```
 
 通过 [`areaStyle`](${optionPath}series-line.areaStyle) 设置折线图的填充区域样式,将其设为为 `{}` 
表示使用默认样式,即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式,可以通过设置 `areaStyle` 
下的配置项覆盖,如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。
diff --git a/contents/zh/application/chart-types/line/basic-line.md 
b/contents/zh/application/chart-types/line/basic-line.md
index 7f24b51..9d4abb5 100644
--- a/contents/zh/application/chart-types/line/basic-line.md
+++ b/contents/zh/application/chart-types/line/basic-line.md
@@ -6,7 +6,7 @@
 
 如果我们想建立一个横坐标是类目型(category)、纵坐标是数值型(value)的折线图,我们可以使用这样的方式:
 
-
+```js [live]
 option = {
 xAxis: {
 type: 'category',
@@ -20,7 +20,7 @@ option = {
 type: 'line'
 }]
 };
-
+```
 
 在这个例子中,我们通过 `xAxis` 将横坐标设为类目型,并指定了对应的值;通过 `type` 将 `yAxis` 的类型设定为数值型。在 
`series` 中,我们将系列类型设为 `line`,并且通过 `data` 指定了折线图三个点的取值。这样,就能得到一个最简单的折线图了。
 
@@ -31,7 +31,7 @@ option = {
 
 如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,应该如何实现呢?答案也很简单,只要把 `series` 的 `data` 
每个数据用一个包含两个元素的数组表示就行了。
 
-
+```js [live]
 option = {
 xAxis: {},
 yAxis: {},
@@ -40,7 +40,7 @@ option = {
 type: 'line'
 }]
 };
-
+```
 
 
 ## 折线图样式设置
@@ -49,7 +49,7 @@ option = {
 
 折线图中折线的样式可以通过 `lineStyle` 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 
[`series.lineStyle`](${optionPath}series-line.lineStyle) 
了解。这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。
 
-
+```js [live]
 option = {
 xAxis: {
 data: ['A', 'B', 'C', 'D', 'E']
@@ -67,7 +67,7 @@ option = {
 }
 }]
 };
-
+```
 
 这里设置折线宽度时,数据点描边的宽度是不会跟着改变的,而应该在数据点的配置项中另外设置。
 
@@ -80,7 +80,7 @@ option = {
 
 在系列中,这数据点的标签通过 [`series.label`](${optionPath}series-line.label) 属性指定。如果将 
`label` 下的 `show` 指定为`true`,则表示该数值默认时就显示;如果为 `false`,而 
[`series.emphasis.label.show`](${optionPath}series-line.emphasis.label.show) 为 
`true`,则表示只有在鼠标移动到该数据时,才显示数值。
 
-
+```js [live]
 option = {
 xAxis: {
 data: ['A', 'B', 'C', 'D', 'E']
@@ -98,7 +98,7 @@ option = {
 }
 }]
 };
-
+```
 
 
 ## 空数据
@@ -107,7 +107,7 @@ option = {
 
 在 ECharts 中,我们使用字符串 `'-'` 表示空数据,这对其他系列的数据也是适用的。
 
-
+```js [live]
 option = {
 xAxis: {
 data: ['A', 'B', 'C', 'D', 'E']
@@ -118,6 +118,6 @@ option = {
 type: 'line'
 }]
 };
-
+```
 
 > 注意区别这个例子中,“空”数据与取值为 0 的数据。
diff --git a/contents/zh/application/chart-types/line/smooth-line.md 
b/contents/zh/application/chart-types/line/smooth-line.md
index c29f6cc..47d70d7 100644
--- a/contents/zh/application/chart-types/line/smooth-line.md
+++ b/contents/zh/application/chart-types/line/smooth-line.md
@@ -2,7 +2,7 @@
 
 平滑曲线图也是折线图的一种变形,这种更柔和的样式也是一种不错的视觉选择。使用时,只需要将折线图系列的 `smooth` 属性设置为 `true` 即可。
 
-
+```js [live]
 option = {
 xAxis: {
 data: ['A', 'B', 'C', 'D', 'E']
@@ -14,4 +14,4 @@ option = {
 smooth: true
 }]
 };
-
+```
diff --git a/contents/zh/application/chart-types/line/stacked-line.md 
b/contents/zh/application/chart-types/line/stacked-line.md
index 843f45f..9176c91 100644
--- a/contents/zh/application/chart-types/line/stacked-line.md
+++ b/contents/zh/application/chart-types/line/stacked-line.md
@@ -2,8 +2,7 @@
 
 与[堆叠柱状图](./zh/application_chart-types_bar_stacked-bar)类似,堆叠折线图也是用系列的 `stack` 
设置哪些系列堆叠在一起。
 
-
-
+```js [live]
 option = {
 xAxis: {
 data: ['A', 'B', 'C', 'D', 'E']
@@ -19,12 +18,11 @@ option = {
 stack: 'x'
 }]
 };
-
+```
 
 但是不同的是,如果不加说明的话,我们很难判断出这是一个堆叠折线图,还是一个普通的折线图。所以,对于堆叠折线图而言,一般建议使用区域填充色以表明堆叠的情况。
 
-
-
+```js [live]
 option = {
 xAxis: {
 data: ['A', 'B', 'C', 'D', 'E']
@@ -42,4 +40,4 @@ option = {
 areaStyle: {}
 }]
 };
-
+```
diff --git a/contents/zh/application/chart-types/line/s

[echarts-handbook] branch master updated: add live syntax in the code block

2021-06-02 Thread shenyi
This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git


The following commit(s) were added to refs/heads/master by this push:
 new 6dfb515  add live syntax in the code block
6dfb515 is described below

commit 6dfb51595f7ab1ace1356dec20a5a3a94d0d9049
Author: pissang 
AuthorDate: Thu Jun 3 00:02:31 2021 +0800

add live syntax in the code block
---
 components/markdown/CodeBlock.vue | 121 ++
 components/markdown/Example.vue   |   4 +-
 components/markdown/Live.vue  |  15 ++---
 components/markdown/global.ts |   2 +
 contents/zh/meta/get-started.md   |  34 ++-
 layouts/default.vue   |  20 ---
 middleware/README.md  |   8 ---
 nuxt.config.js|  20 +++
 plugins/contributors.js   |  16 -
 types/nuxt.d.ts   |   1 +
 10 files changed, 183 insertions(+), 58 deletions(-)

diff --git a/components/markdown/CodeBlock.vue 
b/components/markdown/CodeBlock.vue
new file mode 100644
index 000..2246d13
--- /dev/null
+++ b/components/markdown/CodeBlock.vue
@@ -0,0 +1,121 @@
+
+  
+
+  
+
+
+  
+
+
+
+import Prism from 'prismjs'
+// enable syntax highlighting on diff language
+import 'prismjs/components/prism-clike'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-markdown'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-css'
+import 'prismjs/components/prism-diff'
+import 'prismjs/plugins/diff-highlight/prism-diff-highlight'
+
+import 'prism-themes/themes/prism-material-oceanic.css'
+
+import { defineComponent, ref, onMounted, computed } from 
'@vue/composition-api'
+
+const DIFF_HIGHLIGHT_SYNTAX = /^(diff)-([\w-]+)/i
+
+function escapeHtml(unsafe) {
+  return unsafe
+.replace(/&/g, '&')
+.replace(//g, '>')
+.replace(/"/g, '"')
+.replace(/'/g, ''')
+}
+export default defineComponent({
+  components: {},
+  props: {
+lang: {
+  type: String,
+  default: 'js'
+},
+lineHighlights: String,
+fileName: String
+  },
+
+  setup(props, context) {
+const rawCode = ref('')
+
+const highlightResult = computed(() => {
+  let lang = props.lang || ''
+  let grammer
+
+  const diffLanguage = lang.match(DIFF_HIGHLIGHT_SYNTAX)
+  if (diffLanguage) {
+lang = diffLanguage[2]
+grammer = Prism.languages.diff
+  }
+
+  lang = lang === 'vue' ? 'html' : lang
+
+  if (!grammer) {
+grammer = Prism.languages[lang]
+  }
+
+  const highlightLanguage = diffLanguage ? `diff-${lang}` : lang
+
+  let code = grammer
+? Prism.highlight(rawCode.value, grammer, highlightLanguage)
+: rawCode.value
+
+  if (!lang || !grammer) {
+lang = 'text'
+code = escapeHtml(code)
+  }
+
+  return {
+lang,
+code
+  }
+})
+
+// Update first time.
+onMounted(() => {
+  const defaultSlot = context.slots.default && context.slots.default()
+  rawCode.value = ((defaultSlot && defaultSlot[0].text) || '').trim()
+})
+
+return {
+  highlightResult
+}
+  }
+})
+
+
+
+.nuxt-content-highlight {
+  position: relative;
+  line-height: 1em;
+  font-size: 13px;
+
+  .filename {
+position: absolute;
+right: 0;
+top: 0;
+color: #f7fafc;
+z-index: 10;
+font-family: DM Mono, Menlo, Monaco, Consolas, 'Liberation Mono',
+  'Courier New', monospace;
+font-size: 0.875rem;
+line-height: 1.25rem;
+letter-spacing: -0.025em;
+line-height: 1;
+margin-right: 1rem;
+margin-top: 0.75rem;
+  }
+}
+
diff --git a/components/markdown/Example.vue b/components/markdown/Example.vue
index c67fbd3..fff0b70 100644
--- a/components/markdown/Example.vue
+++ b/components/markdown/Example.vue
@@ -9,11 +9,11 @@ import config from '~/configs/config'
 export default defineComponent({
   props: {
 width: {
-  type: String,
+  type: [String, Number],
   default: '100%'
 },
 height: {
-  type: String,
+  type: [String, Number],
   default: '350'
 },
 src: String
diff --git a/components/markdown/Live.vue b/components/markdown/Live.vue
index 4f126a4..59d673a 100644
--- a/components/markdown/Live.vue
+++ b/components/markdown/Live.vue
@@ -1,11 +1,7 @@
 
   
 
-  
+  
   
   live
 
@@ -29,7 +25,6 @@ import {
   ref,
   unref,
   onMounted,
-  getCurrentInstance,
   onUnmounted
 } from '@vue/composition-api'
 
@@ -52,10 +47,6 @@ export default defineComponent({
 lang: {
   type: String,
   default: 'js'
-},
-editorHeight: {
-  type: String,
-  default: 'auto'
 }
   },
 
@@ -126,10 +117,12 @@ export default defineComponent({
   /* we dont use `language

[echarts-handbook] branch master updated: chart resize and update throttle in md-live

2021-06-02 Thread shenyi
This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git


The following commit(s) were added to refs/heads/master by this push:
 new 1cd346c  chart resize and update throttle in md-live
1cd346c is described below

commit 1cd346ce0648a333df52a272d8816f9ac4d3c5c7
Author: pissang 
AuthorDate: Wed Jun 2 22:09:26 2021 +0800

chart resize and update throttle in md-live
---
 components/markdown/Live.vue  | 44 ++---
 contents/zh/best-practice/design/color-enhance.md | 58 +--
 package-lock.json | 12 +++--
 package.json  |  2 +
 4 files changed, 103 insertions(+), 13 deletions(-)

diff --git a/components/markdown/Live.vue b/components/markdown/Live.vue
index c0ce290..4f126a4 100644
--- a/components/markdown/Live.vue
+++ b/components/markdown/Live.vue
@@ -1,7 +1,11 @@
 
   
 
-  
+  
   
   live
 
@@ -17,13 +21,16 @@ import 'prismjs/components/prism-clike'
 import 'prismjs/components/prism-javascript'
 import 'prism-themes/themes/prism-material-oceanic.css'
 import { loadScriptsAsync } from '../helper/loadScripts'
+import { addListener, removeListener } from 'resize-detector'
+import debounce from 'lodash/debounce'
 import {
   defineComponent,
   watch,
   ref,
   unref,
   onMounted,
-  getCurrentInstance
+  getCurrentInstance,
+  onUnmounted
 } from '@vue/composition-api'
 
 declare const echarts: any
@@ -45,23 +52,28 @@ export default defineComponent({
 lang: {
   type: String,
   default: 'js'
+},
+editorHeight: {
+  type: String,
+  default: 'auto'
 }
   },
 
   setup(props, context) {
 const innerCode = ref('')
-const previewContainer = ref(null)
+const previewContainer = ref(null)
 
 let chartInstance
 
 function update() {
   ensureECharts().then(() => {
 if (!chartInstance) {
+  addListener(unref(previewContainer)!, resize)
   // TODO Better way to get ref?
   chartInstance = echarts.init(unref(previewContainer))
 }
 const func = new Function(unref(innerCode) + '\n return option;')
-// TODO refresh, throttle.
+// TODO refresh.
 try {
   const option = func()
   chartInstance.setOption(option, true)
@@ -69,8 +81,18 @@ export default defineComponent({
   })
 }
 
+function resize() {
+  if (chartInstance) {
+chartInstance.resize()
+  }
+}
+
+const debouncedUpdate = debounce(update, 500, {
+  trailing: true
+})
+
 watch(innerCode, () => {
-  update()
+  debouncedUpdate()
 })
 // Update first time.
 onMounted(() => {
@@ -78,11 +100,13 @@ export default defineComponent({
   innerCode.value = ((defaultSlot && defaultSlot[0].text) || '').trim()
 })
 
+onUnmounted(() => {
+  removeListener(unref(previewContainer)!, resize)
+})
+
 return {
   innerCode,
-
   previewContainer,
-
   highlighter(code) {
 return highlight(code, languages[props.lang] || languages.js)
   }
@@ -105,6 +129,11 @@ export default defineComponent({
   font-size: 13px;
   padding: 10px;
 
+  overflow-y: auto;
+  ::-webkit-scrollbar-thumb {
+background: rgba(255, 255, 255, 0.3) !important;
+  }
+
   pre {
 color: #c3cee3;
   }
@@ -123,6 +152,7 @@ export default defineComponent({
 
 .md-live-preview {
   height: 300px;
+  overflow: hidden;
   @apply rounded-b-lg;
 }
 
diff --git a/contents/zh/best-practice/design/color-enhance.md 
b/contents/zh/best-practice/design/color-enhance.md
index 2e81f7a..135d054 100644
--- a/contents/zh/best-practice/design/color-enhance.md
+++ b/contents/zh/best-practice/design/color-enhance.md
@@ -30,9 +30,61 @@
 
 
视觉效果应该尽可能容易地解释,因此请尝试找到与观众的先入为主和文化联想相匹配的配色方案。如下示例中展示了猕猴桃、香蕉、橙子、草莓四种水果的销售数据,分别选择了与水果本身一致的颜色绿色、黄色、橙色、红色。这样,我们在辨别和记忆每个柱状所对应的水果时就轻而易举了。
 
-https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW";>
-
+
+option = {
+color: ["#6E9D4E", "#EDDB4F","#F7923A", "#F14747" ],
+title: {
+text: '7月水果销量',
+x: '2%',
+y:'1%',
+textStyle: {
+color: '#fff',
+fontSize: '26'
+},
+},
+tooltip: {
+trigger: 'axis'
+},
+legend: {
+data: ['猕猴桃','香蕉', '橙子','草莓'],
+align: 'right'
+},
+grid: {
+left: '3%',
+right: '3%',
+top :'15%',
+bottom: '3%',
+containLabel: true
+},
+xAxis: [{
+type: 'category',
+data: ['第一周', '第二周', '第三周', '第四周'],
+}],
+yAxis: [{
+type: 'value',
+axisLabel: {
+formatter: '{value}'
+}
+}],
+series: [{
+name: '猕猴桃',
+type: 'bar',
+data: [60, 110, 180, 100]
+}, {
+name: '香蕉',
+type: 'bar',
+data: [90

[echarts-handbook] branch master updated: use composition api for better type

2021-06-02 Thread shenyi
This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git


The following commit(s) were added to refs/heads/master by this push:
 new fe69570  use composition api for better type
fe69570 is described below

commit fe69570b5169aba841a58de187f2908645afdc86
Author: pissang 
AuthorDate: Wed Jun 2 21:46:31 2021 +0800

use composition api for better type
---
 components/markdown/Example.vue | 15 ++---
 components/markdown/Live.vue| 74 +
 components/markdown/global.ts   |  4 +++
 package-lock.json   | 15 +
 package.json|  1 +
 5 files changed, 75 insertions(+), 34 deletions(-)

diff --git a/components/markdown/Example.vue b/components/markdown/Example.vue
index c512c39..c67fbd3 100644
--- a/components/markdown/Example.vue
+++ b/components/markdown/Example.vue
@@ -3,9 +3,10 @@
 
 
 
-import Vue, { PropType } from 'vue'
+import { computed, defineComponent, ref } from '@vue/composition-api'
 import config from '~/configs/config'
-export default Vue.extend({
+
+export default defineComponent({
   props: {
 width: {
   type: String,
@@ -17,9 +18,13 @@ export default Vue.extend({
 },
 src: String
   },
-  computed: {
-fullSrc() {
-  return config.exampleViewPath + this.src
+
+  setup(props) {
+const fullSrc = computed(() => {
+  return config.exampleViewPath + props.src
+})
+return {
+  fullSrc
 }
   }
 })
diff --git a/components/markdown/Live.vue b/components/markdown/Live.vue
index 21b6832..c0ce290 100644
--- a/components/markdown/Live.vue
+++ b/components/markdown/Live.vue
@@ -5,12 +5,11 @@
   
   
live