[GitHub] [echarts] echarts-bot[bot] commented on issue #15075: series-candlestick-markPoint-symbolOffset no effect
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
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的问题
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
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都不正确
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的问题
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的问题
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都不正确
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
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的问题
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)
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
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
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方法无法执行。
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 饼图 负数问题
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)
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的问题
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
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
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
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
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