You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/10/20 14:05:36 UTC
[incubator-echarts-examples] branch next updated: add decal
configuration in preview
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-examples.git
The following commit(s) were added to refs/heads/next by this push:
new e4af08f add decal configuration in preview
e4af08f is described below
commit e4af08f630d929368d5428193ca030101f16afac
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Oct 20 22:05:16 2020 +0800
add decal configuration in preview
---
public/data/map-bin.js | 1 +
src/common/i18n.js | 10 ++++-
src/common/store.js | 1 +
src/dep/showDebugDirtyRect.js | 2 +-
src/editor/Preview.vue | 85 ++++++++++++++++++++++++++++++-------------
src/editor/sandbox.js | 4 +-
6 files changed, 73 insertions(+), 30 deletions(-)
diff --git a/public/data/map-bin.js b/public/data/map-bin.js
index 5c1648b..e526ef5 100644
--- a/public/data/map-bin.js
+++ b/public/data/map-bin.js
@@ -1,6 +1,7 @@
/*
title: Binning on Map
category: map
+tags: bmap
titleCN: Binning on Map
*/
diff --git a/src/common/i18n.js b/src/common/i18n.js
index 1443958..c1f0bc0 100644
--- a/src/common/i18n.js
+++ b/src/common/i18n.js
@@ -6,9 +6,13 @@ export default {
chartOK: 'Chart has been generated successfully, ',
darkMode: 'Dark Mode',
+ enableDecal: 'Decal Pattern',
// lightMode: 'Light Mode',
- useDirtyRect: 'Use Dirty Rect',
+
+ renderCfgTitle: 'Render',
renderer: 'Renderer',
+ useDirtyRect: 'Use Dirty Rect',
+
download: 'Download',
edit: 'Edit',
@@ -64,9 +68,11 @@ export default {
chartOK: '图表已生成, ',
darkMode: '深色模式',
- useDirtyRect: '开启脏矩形优化',
+ enableDecal: '贴花图案',
// lightMode: '浅色模式',
+ renderCfgTitle: '渲染设置',
+ useDirtyRect: '开启脏矩形优化',
renderer: '渲染模式',
download: '下载示例',
diff --git a/src/common/store.js b/src/common/store.js
index 784a4fe..5152bce 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -8,6 +8,7 @@ export const store = {
locale: '',
darkMode: URL_PARAMS.theme === 'dark',
+ enableDecal: 'decal' in URL_PARAMS,
renderer: URL_PARAMS.renderer || 'canvas',
typeCheck: URL_PARAMS.editor === 'monaco',
diff --git a/src/dep/showDebugDirtyRect.js b/src/dep/showDebugDirtyRect.js
index ff06d35..fcd6e64 100644
--- a/src/dep/showDebugDirtyRect.js
+++ b/src/dep/showDebugDirtyRect.js
@@ -30,7 +30,7 @@ var DebugRect = (function () {
this.dom.style.opacity = '1';
this._hideTimeout = setTimeout(function () {
_this.hide();
- }, 2000);
+ }, 500);
};
return DebugRect;
}());
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index e33c0e9..5290e63 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -14,19 +14,40 @@
:active-text="$t('editor.darkMode')"
:inactive-text="''">
</el-switch>
-
- <label class="tool-label">{{ $t('editor.renderer') }}</label>
- <el-radio-group v-model="shared.renderer" size="mini">
- <el-radio-button label="svg"></el-radio-button>
- <el-radio-button label="canvas"></el-radio-button>
- </el-radio-group>
-
<el-switch
- v-if="shared.renderer==='canvas'"
- v-model="shared.useDirtyRect"
- :active-text="$t('editor.useDirtyRect')"
+ class="enable-decal"
+ v-model="shared.enableDecal"
+ :active-text="$t('editor.enableDecal')"
:inactive-text="''">
</el-switch>
+
+ <el-popover
+ placement="bottom"
+ width="450"
+ trigger="click"
+ style="margin-top:3px;"
+ >
+ <div class="render-config-container">
+ <el-row :gutter="2" type="flex" align="middle">
+ <el-col :span="12">
+ <label class="tool-label">{{ $t('editor.renderer') }}</label>
+ <el-radio-group v-model="shared.renderer" size="mini" style="text-transform: uppercase">
+ <el-radio-button label="svg"></el-radio-button>
+ <el-radio-button label="canvas"></el-radio-button>
+ </el-radio-group>
+ </el-col>
+ <el-col :span="12">
+ <el-switch
+ v-if="shared.renderer==='canvas'"
+ v-model="shared.useDirtyRect"
+ :active-text="$t('editor.useDirtyRect')"
+ :inactive-text="''">
+ </el-switch>
+ </el-col>
+ </el-row>
+ </div>
+ <span class="render-config-trigger" slot="reference"><i class="el-icon-setting el-icon--left"></i>{{$t('editor.renderCfgTitle')}}</span>
+ </el-popover>
</div>
<button v-if="inEditor" class="download btn btn-sm" @click="downloadExample">{{ $t('editor.download') }}</button>
<a :href="editLink" target="_blank" v-else class="edit btn btn-sm">{{ $t('editor.edit') }}</a>
@@ -47,6 +68,15 @@ import {download} from './downloadExample';
const example = CHART_LIST.find(item => URL_PARAMS.c === item.id);
+function addDecalIfNecessary(option) {
+ if (store.enableDecal) {
+ option.aria = option.aria || {};
+ option.aria.decal = option.aria.decal || {};
+ option.aria.decal.show = true;
+ option.aria.show = option.aria.enabled = true;
+ }
+}
+
export function ensureECharts() {
if (typeof echarts === 'undefined') {
@@ -71,7 +101,9 @@ export function ensureECharts() {
'https://api.map.baidu.com/getscript?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&services=&t=20200327103013',
SCRIPT_URLS.echartsDir + '/dist/extension/bmap.js'
] : []
- ]);
+ ]).then(() => {
+ echarts.registerPreprocessor(addDecalIfNecessary)
+ });
}
return Promise.resolve();
}
@@ -128,6 +160,7 @@ function run() {
}
}
+
export default {
props: ['inEditor'],
@@ -189,6 +222,9 @@ export default {
'shared.darkMode'() {
this.refreshAll();
},
+ 'shared.enableDecal'() {
+ this.refreshAll();
+ },
'shared.useDirtyRect'() {
this.refreshAll();
}
@@ -253,6 +289,14 @@ export default {
}
}
+.render-config-container {
+ .el-radio-group {
+ label {
+ margin-bottom: 0;
+ }
+ }
+}
+
#tool-panel {
position: absolute;
top: 0;
@@ -261,25 +305,14 @@ export default {
padding-top: 5px;
padding-left: 15px;
- .el-switch__label * {
- font-size: 12px;
- text-transform: uppercase;
- }
- .el-radio-group {
- text-transform: uppercase;
- }
-
- .el-switch__label.is-active {
- color: #181432;
- }
-
- .el-radio-button--mini .el-radio-button__inner {
- padding: 5px 8px;
+ .render-config-trigger {
+ margin-left: 10px;
+ cursor: pointer;
+ font-weight: 500;
}
label {
margin-bottom: 0;
- font-size: 10px;
}
.left-panel {
diff --git a/src/editor/sandbox.js b/src/editor/sandbox.js
index accf9dc..bed79e5 100644
--- a/src/editor/sandbox.js
+++ b/src/editor/sandbox.js
@@ -81,7 +81,9 @@ export function createSandbox(optionUpdated) {
});
if (store.useDirtyRect && store.renderer === 'canvas') {
try {
- showDebugDirtyRect(chartInstance.getZr());
+ showDebugDirtyRect(chartInstance.getZr(), {
+ autoHideDelay: 500
+ });
}
catch (e) {
console.error(e);
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org