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 2021/06/03 07:47:44 UTC
[echarts-handbook] branch master updated: add more layout in live
component
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 14917f2 add more layout in live component
14917f2 is described below
commit 14917f2be6a2f94e0dc6cc035f93f33de9708352
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Jun 3 15:47:34 2021 +0800
add more layout in live component
---
components/markdown/Alert.vue | 1 -
components/markdown/CodeBlockCopyClipboard.vue | 9 +--
components/markdown/Live.vue | 76 +++++++++++++++++-----
.../zh/application/chart-types/pie/basic-pie.md | 14 ++--
contents/zh/application/chart-types/pie/ring.md | 6 +-
contents/zh/application/chart-types/pie/rose.md | 3 +-
.../chart-types/scatter/basic-scatter.md | 14 ++--
contents/zh/meta/get-started.md | 68 +++++++++++++++++++
nuxt.config.js | 23 ++++++-
9 files changed, 162 insertions(+), 52 deletions(-)
diff --git a/components/markdown/Alert.vue b/components/markdown/Alert.vue
index f94e172..025dc4a 100644
--- a/components/markdown/Alert.vue
+++ b/components/markdown/Alert.vue
@@ -8,7 +8,6 @@
<script lang="ts">
import Vue, { PropType } from 'vue'
-import config from '~/configs/config'
export default Vue.extend({
props: {
type: {
diff --git a/components/markdown/CodeBlockCopyClipboard.vue b/components/markdown/CodeBlockCopyClipboard.vue
index cef120f..d854685 100644
--- a/components/markdown/CodeBlockCopyClipboard.vue
+++ b/components/markdown/CodeBlockCopyClipboard.vue
@@ -42,12 +42,7 @@
</template>
<script lang="ts">
-import {
- defineComponent,
- onMounted,
- onUnmounted,
- ref
-} from '@vue/composition-api'
+import { defineComponent, onMounted, ref } from '@vue/composition-api'
import Clipboard from 'clipboard'
export default defineComponent({
@@ -95,7 +90,7 @@ export default defineComponent({
@apply text-blue-gray-400;
- @apply mr-4 mb-3;
+ @apply mr-7 mb-3;
@apply rounded-lg border-blue-gray-400 border;
@apply p-2;
@apply cursor-pointer;
diff --git a/components/markdown/Live.vue b/components/markdown/Live.vue
index 34a4d11..7d37ece 100644
--- a/components/markdown/Live.vue
+++ b/components/markdown/Live.vue
@@ -1,8 +1,10 @@
<template>
- <div class="md-live" v-if="innerCode">
+ <div :class="`md-live layout-${layout}`" v-if="innerCode">
<div class="md-live-editor">
- <prism-editor v-model="innerCode" :highlight="highlighter">
- </prism-editor>
+ <div class="md-live-editor-container">
+ <prism-editor v-model="innerCode" :highlight="highlighter">
+ </prism-editor>
+ </div>
<div class="md-live-tag">live</div>
<code-block-copy-clipboard
:source="innerCode"
@@ -53,6 +55,14 @@ export default defineComponent({
lang: {
type: String,
default: 'js'
+ },
+
+ layout: {
+ type: String,
+ default: 'tb',
+ validator(value: string) {
+ return ['lr', 'tb', 'rl', 'bt'].includes(value)
+ }
}
},
@@ -69,12 +79,14 @@ export default defineComponent({
// TODO Better way to get ref?
chartInstance = echarts.init(unref(previewContainer))
}
- const func = new Function(unref(innerCode) + '\n return option;')
// TODO refresh.
try {
+ const func = new Function(unref(innerCode) + '\n return option;')
const option = func()
chartInstance.setOption(option, true)
- } catch (e) {}
+ } catch (e) {
+ console.error(e)
+ }
})
}
@@ -114,25 +126,57 @@ export default defineComponent({
<style lang="postcss">
.md-live {
+ @apply overflow-hidden;
@apply shadow-lg rounded-lg mt-10 mb-20;
+ @apply flex;
+
+ &.layout-lr {
+ @apply flex-row;
+ }
+ &.layout-rl {
+ @apply flex-row-reverse;
+ }
+ &.layout-tb {
+ @apply flex-col;
+ }
+ &.layout-bt {
+ @apply flex-col-reverse;
+ }
+ &.layout-lr,
+ &.layout-rl {
+ @apply items-stretch;
+
+ .md-live-editor-container {
+ height: 100%;
+ }
+ .md-live-editor {
+ @apply flex-1;
+ }
+ .md-live-preview {
+ @apply flex-1;
+ }
+ }
}
+
/* required class */
.md-live-editor {
- @apply rounded-t-lg;
position: relative;
- /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
- background: #263238;
-
- max-height: 400px;
- overflow-y: auto;
-
- font-size: 13px;
- padding: 10px;
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3) !important;
}
+ .md-live-editor-container {
+ /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
+ background: #263238;
+
+ max-height: 500px;
+ overflow-y: auto;
+
+ font-size: 13px;
+ padding: 10px;
+ }
+
pre {
color: #c3cee3;
}
@@ -142,8 +186,7 @@ export default defineComponent({
right: 0;
top: 0;
text-transform: uppercase;
- margin-right: 1rem;
- margin-top: 0.75rem;
+ @apply mr-7 mt-3;
color: #f7fafc;
z-index: 10;
}
@@ -162,7 +205,6 @@ export default defineComponent({
.md-live-preview {
height: 300px;
overflow: hidden;
- @apply rounded-b-lg;
}
.prism-editor-wrapper .prism-editor__editor,
diff --git a/contents/zh/application/chart-types/pie/basic-pie.md b/contents/zh/application/chart-types/pie/basic-pie.md
index 1bf29cb..ba1de77 100644
--- a/contents/zh/application/chart-types/pie/basic-pie.md
+++ b/contents/zh/application/chart-types/pie/basic-pie.md
@@ -6,8 +6,7 @@
饼图的配置和折线图、柱状图略有不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。
-<!-- embed -->
-```js
+```js [live]
option = {
series: [{
type: 'pie',
@@ -34,8 +33,7 @@ option = {
饼图的半径可以通过 [`series.radius`](${optionPath}series-pie.radius) 设置，可以是诸如 `'60%'` 这样相对的百分比字符串，或是 `200` 这样的绝对像素数值。当它是百分比字符串时，它是相对于容器宽高中较小的一条边的。也就是说，如果宽度大于高度，则百分比是相对于高度的，反之则反；当它是数值型时，它表示绝对的像素大小。
-<!-- embed -->
-```js
+```js [live]
option = {
series: [{
type: 'pie',
@@ -58,8 +56,7 @@ option = {
在默认情况下，如果数据值和为 0，会显示平均分割的扇形。比如，如果有 4 个数据项，并且每个数据项都是 0，则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形，可以将 [`series.stillShowZeroSum`](${optionPath}series-pie.stillShowZeroSum) 设为 `false`。
-<!-- embed -->
-```js
+```js [live]
option = {
series: [{
type: 'pie',
@@ -80,15 +77,14 @@ option = {
如果希望扇形对应的标签也不显示，可以将 [`series.label.show`](${optionPath}series-pie.label.show) 设为 `false`。
-<!-- embed -->
-```js
+```js [live]
option = {
series: [{
type: 'pie',
stillShowZeroSum: false,
label: {
show: false
- }
+ },
data: [{
value: 0,
name: '直接访问'
diff --git a/contents/zh/application/chart-types/pie/ring.md b/contents/zh/application/chart-types/pie/ring.md
index 3be7dfd..6f7fa02 100644
--- a/contents/zh/application/chart-types/pie/ring.md
+++ b/contents/zh/application/chart-types/pie/ring.md
@@ -8,8 +8,7 @@
从这个角度上来说，可以认为饼图是一个内半径为 0 的环形图，也就是说，饼图是环形图的特例。
-<!-- embed -->
-```js
+```js [live]
option = {
title: {
text: '环形图的例子',
@@ -40,8 +39,7 @@ option = {
上面的例子展现了在环形图中间显示固定文字的例子，下面我们要介绍，如何在环形图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是，利用系列的 `label`（默认用扇形颜色显示数据的 `name`），显示在环形图中间。在默认情况下不显示系列的 `label`，在高亮时显示。具体的代码如下：
-<!-- embed -->
-```js
+```js [live]
option = {
legend: {
orient: 'vertical',
diff --git a/contents/zh/application/chart-types/pie/rose.md b/contents/zh/application/chart-types/pie/rose.md
index 908af91..765cc03 100644
--- a/contents/zh/application/chart-types/pie/rose.md
+++ b/contents/zh/application/chart-types/pie/rose.md
@@ -4,8 +4,7 @@
ECharts 可以通过将饼图的 [`series.roseType`](${optionPath}series-pie.roseType) 值设为 `'area'` 实现南丁格尔图，其他配置项和饼图是相同的。
-<!-- embed -->
-```js
+```js [live]
option = {
series: [{
type: 'pie',
diff --git a/contents/zh/application/chart-types/scatter/basic-scatter.md b/contents/zh/application/chart-types/scatter/basic-scatter.md
index 5145bad..e7a8232 100644
--- a/contents/zh/application/chart-types/scatter/basic-scatter.md
+++ b/contents/zh/application/chart-types/scatter/basic-scatter.md
@@ -6,8 +6,7 @@
下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置：
-<!-- embed -->
-```js
+```js [live]
option = {
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
@@ -25,8 +24,7 @@ option = {
在上文的例子中，散点图的横坐标都是离散的类目轴，而纵坐标都是连续的数值轴。而对于散点图而言，另一种常见的场景是，两个坐标轴均为连续的数值轴，也就是笛卡尔坐标系。这时的系列形式略有不同，数据的横坐标和纵坐标一同写在 `data` 中，而非坐标轴中。
-<!-- embed -->
-```js
+```js [live]
option = {
xAxis: {},
yAxis: {},
@@ -60,7 +58,6 @@ ECharts 内置形状包括：圆形、矩形、圆角矩形、三角形、菱形
首先，我们需要一个爱心的 SVG 文件，可以使用矢量编辑软件绘制，或者从网上下载到相关资源。其内容如下：
-<!-- embed -->
```xml
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 51.997 51.997" style="enable-background:new 0 0 51.997 51.997;" xml:space="preserve">
@@ -70,8 +67,7 @@ ECharts 内置形状包括：圆形、矩形、圆角矩形、三角形、菱形
在 ECharts 的 `symbol` 配置项中，我们使用 `d` 的值作为路径。
-<!-- embed -->
-```js
+```js [live]
option = {
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
@@ -80,6 +76,7 @@ option = {
series: [{
type: 'scatter',
data:[220, 182, 191, 234, 290, 330, 310],
+ symbolSize: 20,
symbol: 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'
}]
};
@@ -101,8 +98,7 @@ option = {
在下面的例子中，我们将散点图点的大小设置为与其数据值成正比。
-<!-- embed -->
-```js
+```js [live]
option = {
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
diff --git a/contents/zh/meta/get-started.md b/contents/zh/meta/get-started.md
index d38445d..faaa020 100644
--- a/contents/zh/meta/get-started.md
+++ b/contents/zh/meta/get-started.md
@@ -62,6 +62,74 @@ option = {
};
```
+### 更多预览布局
+#### 左右
+
+```markdown
+```js [live-lr]
+option = {
+ ...
+};
+\```
+```
+
+```js [live-lr]
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+#### 右左
+
+```markdown
+```js [live-rl]
+option = {
+ ...
+};
+\```
+```
+
+```js [live-rl]
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+
+#### 下上
+
+```markdown
+```js [live-bt]
+option = {
+ ...
+};
+\```
+```
+
+```js [live-bt]
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
### 高亮代码行以及添加文件名
diff --git a/nuxt.config.js b/nuxt.config.js
index 2d3ac92..f177697 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -16,7 +16,22 @@ export default {
router: {
mode: 'history',
- base: config.routerBase
+ base: config.routerBase,
+ scrollBehavior(to) {
+ if (to.hash) {
+ const id = to.hash.substr(1)
+ const el =
+ document.getElementById(decodeURIComponent(id)) ||
+ document.getElementById(id)
+
+ if (el) {
+ el.scrollIntoView &&
+ el.scrollIntoView({
+ behavior: 'smooth'
+ })
+ }
+ }
+ }
},
/*
@@ -49,8 +64,10 @@ export default {
if (attrs.lineHighlights === 'null') {
attrs.lineHighlights = ''
}
- if (attrs.fileName === 'live') {
- return `<md-live lang="${lang}">${escapeHtml(rawCode)}</md-live>`
+ const liveMatch = /^live(-(lr|tb|bt|rl))?$/.exec(attrs.fileName || '')
+ if (liveMatch) {
+ return `<md-live lang="${lang}" layout="${liveMatch[2] ||
+ 'tb'}">${escapeHtml(rawCode)}</md-live>`
} else {
return `<md-code-block lang="${lang}" line-highlights="${attrs.lineHighlights ||
''}" file-name="${attrs.fileName || ''}" >${escapeHtml(
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org