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 <bm2736...@gmail.com>
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 @@
<template>
<div class="md-live" v-if="innerCode">
<div class="md-live-editor">
- <prism-editor v-model="innerCode" :highlight="highlighter">
+ <prism-editor
+ :style="{ height: editorHeight }"
+ v-model="innerCode"
+ :highlight="highlighter"
+ >
</prism-editor>
<div class="md-live-tag">live</div>
</div>
@@ -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<HTMLElement | null>(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 @@
视觉效果应该尽可能容易地解释，因此请尝试找到与观众的先入为主和文化联想相匹配的配色方案。如下示例中展示了猕猴桃、香蕉、橙子、草莓四种水果的销售数据，分别选择了与水果本身一致的颜色绿色、黄色、橙色、红色。这样，我们在辨别和记忆每个柱状所对应的水果时就轻而易举了。
-<iframe max-width="830" width="100%" height="400"
-src="https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW";>
-</iframe>
+<md-live editor-height="400px">
+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, 130, 170, 130]
+ }, {
+ name: '橙子',
+ type: 'bar',
+ data: [120, 160, 140, 160 ]
+ }, {
+ name: '草莓',
+ type: 'bar',
+ data: [110, 190, 90, 100]
+ }]
+};
+</md-live>
## 图表颜色要吻合常识
diff --git a/package-lock.json b/package-lock.json
index 34b5975..f238052 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12205,9 +12205,9 @@
}
},
"lodash": {
- "version": "4.17.15",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz";,
- "integrity":
"sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz";,
+ "integrity":
"sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
@@ -18030,6 +18030,12 @@
"integrity": "sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=",
"dev": true
},
+ "resize-detector": {
+ "version": "0.3.0",
+ "resolved":
"https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz";,
+ "integrity":
"sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==",
+ "dev": true
+ },
"resolve": {
"version": "1.15.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz";,
diff --git a/package.json b/package.json
index 04b5e5f..514ca57 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"@vue/composition-api": "^1.0.0-rc.10",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0",
+ "lodash": "^4.17.21",
"markdown-it-anchor": "^6.0.0",
"markdown-it-highlightjs": "^3.1.0",
"markdown-it-table-of-contents": "^0.5.2",
@@ -42,6 +43,7 @@
"postcss": "^8.3.0",
"prism-themes": "^1.7.0",
"raw-loader": "^4.0.0",
+ "resize-detector": "^0.3.0",
"sass-loader": "^8.0.2",
"webpack": "^4.42.1"
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
