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 217016b update style and docs
217016b is described below
commit 217016b81d1b34c6c38fd4231390cb48f8b7c8c8
Author: pissang <bm2736...@gmail.com>
AuthorDate: Wed Jun 2 18:24:58 2021 +0800
update style and docs
---
components/markdown/Alert.vue | 3 ++
.../chart-specificatio/bar/basic-bar.md | 16 ++++-----
.../chart-specificatio/bar/bi-directional-bar.md | 14 ++++----
.../chart-specificatio/line/basic-line.md | 18 +++++-----
.../chart-specificatio/pie/basic-pie.md | 16 ++++-----
.../chart-specificatio/scatter/scatter.md | 18 +++++-----
contents/en/best-practice/design/color-enhance.md | 34 +++++++++---------
contents/en/concepts/axis.md | 20 +++++------
contents/en/concepts/legend.md | 28 +++++++--------
contents/zh/application/aria.md | 0
.../chart-types/scatter/basic-scatter.md | 2 +-
contents/zh/best-practice/aria.md | 2 +-
.../chart-specificatio/bar/basic-bar.md | 16 ++++-----
.../chart-specificatio/bar/bi-directional-bar.md | 4 +--
.../chart-specificatio/line/basic-line.md | 11 +++---
.../chart-specificatio/pie/basic-pie.md | 16 +++------
.../chart-specificatio/scatter/scatter.md | 8 ++---
contents/zh/best-practice/design/color-enhance.md | 24 +++++--------
contents/zh/concepts/axis.md | 3 +-
contents/zh/concepts/data-transform.md | 4 +--
contents/zh/concepts/legend.md | 11 ++----
contents/zh/meta/get-started.md | 42 +++++++++++++++++++---
layouts/default.vue | 18 +++++++---
tailwind.config.js | 6 +++-
24 files changed, 180 insertions(+), 154 deletions(-)
diff --git a/components/markdown/Alert.vue b/components/markdown/Alert.vue
index ecb9f06..e49cf87 100644
--- a/components/markdown/Alert.vue
+++ b/components/markdown/Alert.vue
@@ -23,6 +23,9 @@ export default Vue.extend({
</script>
<style lang="postcss" scoped>
+.alert {
+ @apply rounded-lg;
+}
/* Info */
.alert-info {
@apply bg-blue-100 border-blue-400;
diff --git a/contents/en/best-practice/chart-specificatio/bar/basic-bar.md
b/contents/en/best-practice/chart-specificatio/bar/basic-bar.md
index 250cd7a..846c37d 100644
--- a/contents/en/best-practice/chart-specificatio/bar/basic-bar.md
+++ b/contents/en/best-practice/chart-specificatio/bar/basic-bar.md
@@ -2,13 +2,13 @@
Bar Chart is a chart that presents the comparisons among discrete data. The
length of the bars is proportional related to the categorical data.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f";>
</iframe>
While the label of the series is long, or there are more than 10 categories in
one chart, a horizontal column chart can not show all labels, or labels can
only be shown tilted. It affects the appliance. Therefore, we use a vertical
bar chart to get a better display effect.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz";>
</iframe>
@@ -16,7 +16,7 @@
src="https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz";>
1. Avoid using too many colors. One bar chart represents one set of metrics in
general so that we suggest to use the same color or at least different shades
of the same color. You can use a contrasting color to highlight meaningful data
points.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef";>
</iframe>
@@ -24,18 +24,18 @@
src="https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef";>
3. Data on Y-axis should be started from 0, to reflect the value
appropriately. If the y-axis is incomplete, it will mislead the user to make
wrong judgments. For instance, the chart on the left side shows that the income
in 2017 is 4 times higher than in 2014. But the chart on the right side shows
the truth that the income in 2017 only increased by 25% compared with 2014.
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/bar/bar03.jpg">
+<img max-width="830" width="100%" height="100%"
+src="/images/design/bar/bar03.jpg">
</img>
4. When sorting multiple data, if it is not related to some specific value
like date, it is better to comply with a certain logic and guide the user to
check the data in an intuitive way. In short, logical sorting can lead the user
to read data better to a certain extent.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xHJhWhGm4M";>
</iframe>
We don't recommend using a 3D bar chart because the data transmission is not
accurate. Users even have to guess which is the top of the bar.
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/bar/bar04.jpg">
+<img max-width="830" width="100%" height="100%"
+src="/images/design/bar/bar04.jpg">
</img>
diff --git
a/contents/en/best-practice/chart-specificatio/bar/bi-directional-bar.md
b/contents/en/best-practice/chart-specificatio/bar/bi-directional-bar.md
index f7a74aa..6a81d90 100644
--- a/contents/en/best-practice/chart-specificatio/bar/bi-directional-bar.md
+++ b/contents/en/best-practice/chart-specificatio/bar/bi-directional-bar.md
@@ -1,13 +1,13 @@
Bi-directional bar charts are mostly used to show values that included in two
opposite meaning categories. One axis shows the name of categories being
compared, while the other axis represents the scale value. As an example, Using
a bi-directional bar chart to analyze the personal income (positive number) and
outcome (negative number) in a week, you can easily find the value and
fluctuation of income and outcome in a single series.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f";>
</iframe>
The bi-directional bar can be classified into the vertical chart (above) and
horizontal chart(below, also called positive negative bar chart). For example,
you can use a positive negative bar chart if there are positive and negative
comments in a customer satisfaction survey data analysis. All data align in the
middle, the positive comments attribute on the right side while the negative
comments on the left side.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z";>
</iframe>
@@ -16,14 +16,14 @@ The bi-directional bar can be classified into the vertical
chart (above) and ho
1. The data on both sides in the bi-directional bar chart are comparative.
-2. Don't define negative data on the right side of the bi-directional bar
chart, to prevent misunderstanding caused by the violation of common sense.
+2. Don't define negative data on the right side of the bi-directional bar
chart, to prevent misunderstanding caused by the violation of common sense.
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/bar/bi-directional-bar01.jpg">
+<img max-width="830" width="100%" height="100%"
+src="/images/design/bar/bi-directional-bar01.jpg">
</img>
3. A bi-directional bar chart always used to display data with the opposite
meaning, so that you need to avoid misunderstanding caused by the use of data
that does not have a positive or negative meaning. As the chart below, there is
no antagonism between the data of male and female, so that it is a better
choice to use a basic bar chart rather than a bi-directional bar chart.
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/bar/bi-directional-bar02.jpg">
+<img max-width="830" width="100%" height="100%"
+src="/images/design/bar/bi-directional-bar02.jpg">
</img>
diff --git a/contents/en/best-practice/chart-specificatio/line/basic-line.md
b/contents/en/best-practice/chart-specificatio/line/basic-line.md
index f9544b5..f7f2cbe 100644
--- a/contents/en/best-practice/chart-specificatio/line/basic-line.md
+++ b/contents/en/best-practice/chart-specificatio/line/basic-line.md
@@ -1,14 +1,14 @@
-# Basic Line Chart.
+# Basic Line Chart.
The line chart is basically used to show the phase trend over time. The line
chart is pretty useful to display a continuous 2D dataset like the fluctuation
in the number of website visitors or sales prices.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xB1kG1rLEG&v=1";>
</iframe>
Except for displaying the trend of developing things, the line chart can be
used to compare several different datasets. As shown below, we use a line chart
to compare the sales of three different commodities and analyze which one is
the best.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xSkBiMSU4M&v=1";>>
</iframe>
@@ -20,17 +20,17 @@ A line chart is drawn by connecting data points with lines.
For the beauty of sp
2. Do not draw more than 4 lines in a chart. As shown below, lines are
entangled together without obvious contrast that makes the whole chart
confusing and difficult to read.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xBJzdEItVz&v=1";>
</iframe>
-3. Don't use decorates to separate charts. The legend is helpful, but
sometimes distracting users:
+3. Don't use decorates to separate charts. The legend is helpful, but
sometimes distracting users:
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xS1Tbdr8EG&v=1";>
</iframe>
-4. When displaying the data of the line chart, avoid deliberately distorting
the trend. The meaningful volatility analysis chart should make the height of
the item be two-thirds of the height of the y-axis.
+4. When displaying the data of the line chart, avoid deliberately distorting
the trend. The meaningful volatility analysis chart should make the height of
the item be two-thirds of the height of the y-axis.
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/line/line01.jpg"></img>
+<img max-width="830" width="100%" height="100%"
+src="/images/design/line/line01.jpg"></img>
diff --git a/contents/en/best-practice/chart-specificatio/pie/basic-pie.md
b/contents/en/best-practice/chart-specificatio/pie/basic-pie.md
index 5321d8c..e892ea9 100644
--- a/contents/en/best-practice/chart-specificatio/pie/basic-pie.md
+++ b/contents/en/best-practice/chart-specificatio/pie/basic-pie.md
@@ -1,6 +1,6 @@
# Pie Chart
-The pie chart is mainly used to display the proportion of different categories
compared with the total. The arc length of each sector in the figure means the
proportion of the category. The sum of all categories is 100%.
+The pie chart is mainly used to display the proportion of different categories
compared with the total. The arc length of each sector in the figure means the
proportion of the category. The sum of all categories is 100%.
<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1";>
@@ -15,26 +15,26 @@ Even the pie chart can display the distribution radio of
the data, and widely us
2. It is hard to compare the data in the pie chart with too many pieces. We
suggest to controlling the number of categories under five. While there are too
many categories, we might merge some unimportant data together, and name as
"other". If all categories cannot be omitted, you should try a bar chart or
stacked bar chart as an alternative.
<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/pie/pie02.jpg">
+src="/images/design/pie/pie02.jpg">
</img>
3. The pie chart is not appropriate for the comparison of precise data. The
following graph (left below) shows that every sector has almost the same
proportion. In this case, you should try a bar chart or rose chart (right
below) to achieve a better effect.
<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/pie/pie03.jpg">
+src="/images/design/pie/pie03.jpg">
</img>
4. Visual habits of most people are observing from top to bottom in clockwise.
Therefore we recommend you put the largest sector in the first place in the
clockwise direction to stress the importance.
-There are two advices for the rest of the data. Arrange sectors from big to
small in clockwise or anti-clockwise follows the largest one:
+There are two advices for the rest of the data. Arrange sectors from big to
small in clockwise or anti-clockwise follows the largest one:
<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/pie/pie01.jpg">
+src="/images/design/pie/pie01.jpg">
</img>
-Order the sectors according to the size not only consistent with the visual
habits but also easier for data's identify and comparison. Base on this
principle, you can put the part that needs to emphasize (don't need to be the
largest part) at the prominent position.
+Order the sectors according to the size not only consistent with the visual
habits but also easier for data's identify and comparison. Base on this
principle, you can put the part that needs to emphasize (don't need to be the
largest part) at the prominent position.
-5. You can add some decorations like color, motion, style, position to stress
some data in a chart. Please be moderate or it will distract the user.
+5. You can add some decorations like color, motion, style, position to stress
some data in a chart. Please be moderate or it will distract the user.
<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1";>
@@ -43,5 +43,5 @@ Order the sectors according to the size not only consistent
with the visual habi
6. 3D pie chart distorted the ratio between each sector, which will cause
mistakes and confusion in understanding. Therefore,a 3D pie chart is not
recommended.
<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/pie/pie04.jpg">
+src="/images/design/pie/pie04.jpg">
</img>
diff --git a/contents/en/best-practice/chart-specificatio/scatter/scatter.md
b/contents/en/best-practice/chart-specificatio/scatter/scatter.md
index 4ac200a..9e0181e 100644
--- a/contents/en/best-practice/chart-specificatio/scatter/scatter.md
+++ b/contents/en/best-practice/chart-specificatio/scatter/scatter.md
@@ -1,12 +1,12 @@
# Scatter Chart
-The scatter chart shows the relation between the two variables. Data is
embodied as a collection of points, which is appropriate to compare a large
number of data without considering the time. The scatter chart can identify the
relevant and relation of two variables thus find some trend. The scatter chart
is also workable to find outliers or to understand data distribution. The chart
above shows the distribution of the height and weight of students in a class.
+The scatter chart shows the relation between the two variables. Data is
embodied as a collection of points, which is appropriate to compare a large
number of data without considering the time. The scatter chart can identify the
relevant and relation of two variables thus find some trend. The scatter chart
is also workable to find outliers or to understand data distribution. The chart
above shows the distribution of the height and weight of students in a class.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xSkCyUwKNG&v=1";>
</iframe>
-The scatter chart can reflect the correlation(relation between variables) of a
different type. It can be positively correlated, negatively correlated and
uncorrelated.
+The scatter chart can reflect the correlation(relation between variables) of a
different type. It can be positively correlated, negatively correlated and
uncorrelated.
+ Positively Correlated: When one value increases, the other value increases.
@@ -15,11 +15,11 @@ The scatter chart can reflect the correlation(relation
between variables) of a d
+ Uncorrelated: Two values have no obvious relation and have no influence on
each other.
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/scatter/scatter5.jpg">
+<img max-width="830" width="100%" height="100%"
+src="/images/design/scatter/scatter5.jpg">
</img>
-To be mentioned, the scatter chart can effectively illustrate the correlation
between the two variables. However, it cannot strongly prove there exist
causality. For example, AD serving and Visits are positively correlated, but we
cannot prove that more AD serving must lead to more Visits. However, we have
enough reason to increase the AD serving and observe the outcome after we find
out the positive correlation between them.
+To be mentioned, the scatter chart can effectively illustrate the correlation
between the two variables. However, it cannot strongly prove there exist
causality. For example, AD serving and Visits are positively correlated, but we
cannot prove that more AD serving must lead to more Visits. However, we have
enough reason to increase the AD serving and observe the outcome after we find
out the positive correlation between them.
## Suggestion for Using Scatter Chart
@@ -27,10 +27,10 @@ To be mentioned, the scatter chart can effectively
illustrate the correlation be
2. If the package included a different series, you can use different colors
for each series. As an example, add the legend to mark male as blue, female as
red. You can not only distinguish the height and weight of different genders
but also add an auxiliary line for the average of each series to improve the
understanding of the distribution. In this case, females have more amount
higher than the average value than lower.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xBy9E2oufM";>
</iframe>
-The trend line is useful when observing the relationship between two
variables. The shape of the trend line can explain the relation type of two
variables as well as make a prediction. It is better to include only two trend
lines to avoid interference with the reading.
+The trend line is useful when observing the relationship between two
variables. The shape of the trend line can explain the relation type of two
variables as well as make a prediction. It is better to include only two trend
lines to avoid interference with the reading.
-3. The scatter points can present a good appearance only with adequate and
relevant data. It is meaningless to draw a chart with very little and unrelated
values.
\ No newline at end of file
+3. The scatter points can present a good appearance only with adequate and
relevant data. It is meaningless to draw a chart with very little and unrelated
values.
\ No newline at end of file
diff --git a/contents/en/best-practice/design/color-enhance.md
b/contents/en/best-practice/design/color-enhance.md
index 3cf922a..e002b59 100644
--- a/contents/en/best-practice/design/color-enhance.md
+++ b/contents/en/best-practice/design/color-enhance.md
@@ -4,62 +4,62 @@ In all the visual pathways in the data visualization, color
is the first-way vis
## Sympathetic Response of Color
-Color perception is a complicated result of the interaction between
physiological and psychological effects. To prove that humans can perceive
colors by warm and cool, Hiroshi Ohchi, a Japanese graphic designer has done an
experiment to paint the wall of two workplaces in gray-cyan and red-orange.
With the same objective ambient temperature and labor intensity, staffs in the
gray-cyan workplace are easier to feel cool. Further research found that except
for the feeling of warm and cool b [...]
+Color perception is a complicated result of the interaction between
physiological and psychological effects. To prove that humans can perceive
colors by warm and cool, Hiroshi Ohchi, a Japanese graphic designer has done an
experiment to paint the wall of two workplaces in gray-cyan and red-orange.
With the same objective ambient temperature and labor intensity, staffs in the
gray-cyan workplace are easier to feel cool. Further research found that except
for the feeling of warm and cool b [...]
In the field of visualization, if we choose the color that coincides with the
characteristic of data and the sympathetic response of emotions.
Here is an example of the selling percentage of a certain dessert shop.
-<img max-width="830" width="50%" height="100%"
-src="${rootPath}/images/design/color/color01.png">
+<img max-width="830" width="50%" height="100%"
+src="/images/design/color/color01.png">
</img>
We provided two charts with the same style but different color schemes. The
right side one obviously performs better for the dessert data displaying.
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/color/color02.png">
+<img max-width="830" width="100%" height="100%"
+src="/images/design/color/color02.png">
</img>
-Compared with blue and purple, color likes orange, yellow, pink and green are
preferred choices to inspire the appetite, happiness and warmness which matched
the motion of eating sweets. In the other hand, most of the customer group for
desserts is woman and children. Lively and cute chart colors in the left chart
might be the better choice compared with the calm and rational colors of the
chart.
+Compared with blue and purple, color likes orange, yellow, pink and green are
preferred choices to inspire the appetite, happiness and warmness which matched
the motion of eating sweets. In the other hand, most of the customer group for
desserts is woman and children. Lively and cute chart colors in the left chart
might be the better choice compared with the calm and rational colors of the
chart.
##Semantic Response of Color
-Different colors can help us to identify and classify different ideas because
we are familiar with combining things and concepts with colors. We
subconsciously think of white when we referring to "clouds", pink when we
referring to "love". Those colors that are naturally consistent with semantics
are called "semantic-resonant color".
+Different colors can help us to identify and classify different ideas because
we are familiar with combining things and concepts with colors. We
subconsciously think of white when we referring to "clouds", pink when we
referring to "love". Those colors that are naturally consistent with semantics
are called "semantic-resonant color".
The researchers noticed that matching the semantic-resonant color for words
contained specific color can increase the speed of the cognitive process and
vice versa. This funny phenomenon is called the "Stroop Effect". In a
comparative test (as shown below), the text "YELLOW" in the first line is
easier to be positioned compared with the text "YELLOW" in the second line. In
the second line, the text "PURPLE" have the font color of yellow, which makes
it being noticed earlier sometimes. Th [...]
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/color/color03.png">
+<img max-width="830" width="100%" height="100%"
+src="/images/design/color/color03.png">
</img>
Using semantic-resonant color effectively, we use the same color as the
meaning of the data to improve the cognition efficiency of the visualization.
For instance, you might use blue to display the data of "OCEAN", yellow to
display the data of "DESERT".
The visual effects should be explained as easily as possible. Try to find out
the color scheme that matches the preconceived and cultural association of the
user. The following chart shows the sales info of kiwifruit, banana, orange and
strawberry and chose the same color as the fruit itself. Therefore, we can
easily identify and remember the fruit corresponding to each column.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW";>
</iframe>
## Common Sense Consistency of Color
-In terms of visualization, the color used is directly related to factors such
as data type, display environment, target client, and social background. You
cannot separate color as an individual factor to design. Please restrain your
free creative passion before selecting the color scheme and check if it is a
special type of data. For example, colors like green and red in a stock chart
have their customary meaning. Therefore, the consistency between the choice of
color and common knowledg [...]
+In terms of visualization, the color used is directly related to factors such
as data type, display environment, target client, and social background. You
cannot separate color as an individual factor to design. Please restrain your
free creative passion before selecting the color scheme and check if it is a
special type of data. For example, colors like green and red in a stock chart
have their customary meaning. Therefore, the consistency between the choice of
color and common knowledg [...]
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xp1oqJoQqG";>
</iframe>
-Here is another example of the outdoor temperature, the red and blue bars make
the chart easy to distinguish without explanation.
+Here is another example of the outdoor temperature, the red and blue bars make
the chart easy to distinguish without explanation.
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xIVoX5gZcT&v=1";>
</iframe>
## Divide Data by Colors
-We usually use the line chart to analyze the trend. We can actively configure
an interval when sometimes we need to clearly know whether a specific data is
in some domain. If you set 25%-75% as our planned sales, try to set different
colors for each interval in this domain to efficiently identify the interval
for each value: whether it is not reaching the goal, reaching the goal, or
exceeding the goal.
+We usually use the line chart to analyze the trend. We can actively configure
an interval when sometimes we need to clearly know whether a specific data is
in some domain. If you set 25%-75% as our planned sales, try to set different
colors for each interval in this domain to efficiently identify the interval
for each value: whether it is not reaching the goal, reaching the goal, or
exceeding the goal.
Therefore, color can be used as an effective tool to improve the readability
of the chart.
-<img max-width="830" width="80%" height="100%"
-src="${rootPath}/images/design/color/color04.png">
+<img max-width="830" width="80%" height="100%"
+src="/images/design/color/color04.png">
</img>
\ No newline at end of file
diff --git a/contents/en/concepts/axis.md b/contents/en/concepts/axis.md
index f0dc40c..f708eaf 100644
--- a/contents/en/concepts/axis.md
+++ b/contents/en/concepts/axis.md
@@ -1,14 +1,14 @@
# Axis
-The x/y-axis in the Cartesian coordinate system.
+The x/y-axis in the Cartesian coordinate system.
## x-axis, y-axis
1. Both x-axis and y-axis included axis line, tick, label and title. Some
chart will use the grid to assist the data viewing and calculating.
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/axis/charts_axis_img02.jpg">
+<img max-width="830" width="100%" height="100%"
+src="/images/design/axis/charts_axis_img02.jpg">
</img>
-2. A normal 2D coordinate system has x-axis and y-axis. X-axis located at the
bottom while y-axis at the left side in common. The Config is shown below:
+2. A normal 2D coordinate system has x-axis and y-axis. X-axis located at the
bottom while y-axis at the left side in common. The Config is shown below:
```js
option = {
@@ -23,7 +23,7 @@ src="${rootPath}/images/design/axis/charts_axis_img02.jpg">
```
3. The x-axis is usually used to declare the number of categories which was
also called the aspects of observing the data: "Sales Time", "Sales Location"
and "product name", etc.. The y-axis usually used to indicate the numerical
value of categories. These data are used to examine the quantitative value of a
certain type of data or some indicator you need to analyze, such as "Sales
Quantity" and "Sales Price".
-
+
```js
option = {
xAxis: {
@@ -85,7 +85,7 @@ src="${rootPath}/images/design/axis/charts_axis_img02.jpg">
```
## Axis Line
-ECharts provide the config of [axisLine](${optionPath}xAxis.axisLine). You can
change the setting according to the demand, such as the arrow on two sides and
the style of axes.
+ECharts provide the config of [axisLine](${optionPath}xAxis.axisLine). You can
change the setting according to the demand, such as the arrow on two sides and
the style of axes.
```js
option = {
@@ -141,7 +141,7 @@ option = {
```
## Label
-ECharts provide the config [axisLabel](${optionPath}xAxis.axisLabel). You can
change the setting according to the demand, such as the text alignment and the
customized label content.
+ECharts provide the config [axisLabel](${optionPath}xAxis.axisLabel). You can
change the setting according to the demand, such as the text alignment and the
customized label content.
```js
option = {
@@ -165,12 +165,12 @@ option = {
```
## Example
-The y-axis on the left side represents the monthly average temperature in
Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The
x-axis represents the time. It reflects the trend and relation between the
average temperature and precipitation.
+The y-axis on the left side represents the monthly average temperature in
Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The
x-axis represents the time. It reflects the trend and relation between the
average temperature and precipitation.
<!-- src need to be replaced -->
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xrJYBh__4z";>
</iframe>
-These are the concise intro of the usage of axis config. Check more details
at: [Official Website](${optionPath}xAxis).
\ No newline at end of file
+These are the concise intro of the usage of axis config. Check more details
at: [Official Website](${optionPath}xAxis).
\ No newline at end of file
diff --git a/contents/en/concepts/legend.md b/contents/en/concepts/legend.md
index ec7cbbf..f221d92 100644
--- a/contents/en/concepts/legend.md
+++ b/contents/en/concepts/legend.md
@@ -2,13 +2,13 @@
Legends are used to annotate the content in the chart using different colors,
shapes and texts to indicate different categories. By clicking the legends, the
user can show or hide the corresponding categories. Legend does not include the
main info but is the key to understand the chart.
## Layout
-1. Legend is always placed at the upper right corner of the chart. All legends
in the same page need to be consistent, align horizontally or vertically by
considering the layout of the overall chart space. When the chart have little
vertical space or the content area is crowded, it is also a good choice to put
legent on the bottom of the chart. Here are some layouts of the legend:
+1. Legend is always placed at the upper right corner of the chart. All legends
in the same page need to be consistent, align horizontally or vertically by
considering the layout of the overall chart space. When the chart have little
vertical space or the content area is crowded, it is also a good choice to put
legent on the bottom of the chart. Here are some layouts of the legend:
- <img max-width="830" width="80%" height="80%"
- src="${rootPath}/images/design/legend/charts_sign_img01.png">
+ <img max-width="830" width="80%" height="80%"
+ src="/images/design/legend/charts_sign_img01.png">
</img>
- <img max-width="830" width="80%" height="80%"
- src="${rootPath}/images/design/legend/charts_sign_img02.png">
+ <img max-width="830" width="80%" height="80%"
+ src="/images/design/legend/charts_sign_img02.png">
</img>
```js
@@ -23,7 +23,7 @@ Legends are used to annotate the content in the chart using
different colors, sh
};
```
-2. Use scrollable control if there are many legends.
+2. Use scrollable control if there are many legends.
```js
option = {
@@ -41,7 +41,7 @@ Legends are used to annotate the content in the chart using
different colors, sh
```
## Style
-1. For dark color background, use a light color for the background layer and
text while changing the background to translucent.
+1. For dark color background, use a light color for the background layer and
text while changing the background to translucent.
```js
option = {
@@ -60,8 +60,8 @@ Legends are used to annotate the content in the chart using
different colors, sh
2. The color of legend has many ways to design. For different charts, the
legend style can be different.
- <img max-width="830" width="80%" height="80%"
- src="${rootPath}/images/design/legend/charts_sign_img04.png">
+ <img max-width="830" width="80%" height="80%"
+ src="/images/design/legend/charts_sign_img04.png">
</img>
```js
@@ -76,7 +76,7 @@ Legends are used to annotate the content in the chart using
different colors, sh
```
## Interactive
-Depend on the environmental demand, the legend can support interactive
operation. Click the legend to show or hide corresponding categories:
+Depend on the environmental demand, the legend can support interactive
operation. Click the legend to show or hide corresponding categories:
```js
option = {
@@ -95,8 +95,8 @@ option = {
## Tips
-1. The legend should be used according to the situation. Some dual-axis charts
include multiple chart types. Different kinds of legend stypes should be
distinguished.
-
+1. The legend should be used according to the situation. Some dual-axis charts
include multiple chart types. Different kinds of legend stypes should be
distinguished.
+
```js
option = {
legend: {
@@ -138,8 +138,8 @@ option = {
## Example
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/preview.html?c=xkyleg0ydW&v=2";>
</iframe>
-This document briefly introduced the common config about the legend. For more
configuration item, please check our [website](${optionPath}legend).
\ No newline at end of file
+This document briefly introduced the common config about the legend. For more
configuration item, please check our [website](${optionPath}legend).
\ No newline at end of file
diff --git a/contents/zh/application/aria.md b/contents/zh/application/aria.md
deleted file mode 100644
index e69de29..0000000
diff --git a/contents/zh/application/chart-types/scatter/basic-scatter.md
b/contents/zh/application/chart-types/scatter/basic-scatter.md
index f32155a..5145bad 100644
--- a/contents/zh/application/chart-types/scatter/basic-scatter.md
+++ b/contents/zh/application/chart-types/scatter/basic-scatter.md
@@ -93,7 +93,7 @@ option = {
除此之外，它还可以是一个回调函数，其参数格式为：
-```
+```ts
(value: Array|number, params: Object) => number|Array
```
diff --git a/contents/zh/best-practice/aria.md
b/contents/zh/best-practice/aria.md
index 8147c56..fbcf036 100644
--- a/contents/zh/best-practice/aria.md
+++ b/contents/zh/best-practice/aria.md
@@ -31,7 +31,7 @@ option = {
};
```
-<iframe width="700" height="300"
src="${exampleViewPath}doc-example/aria-pie&reset=1&edit=1"></iframe>
+<md-example src="doc-example/aria-pie&reset=1&edit=1"></md-example>
生成的图表 DOM 上，会有一个 `aria-label` 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：
diff --git a/contents/zh/best-practice/chart-specificatio/bar/basic-bar.md
b/contents/zh/best-practice/chart-specificatio/bar/basic-bar.md
index a72454f..4c08fd9 100644
--- a/contents/zh/best-practice/chart-specificatio/bar/basic-bar.md
+++ b/contents/zh/best-practice/chart-specificatio/bar/basic-bar.md
@@ -2,14 +2,14 @@
柱状图是最常见的图表类型，通过使用水平或垂直方向柱子的高度来显示不同类别的数值，其中柱状图的一个轴显示比较的类别，而另一个轴代表对应的数值。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f";>
</iframe>
纵向柱状图的柱是垂直方向的，横向柱状图的柱是水平方向的，又称条形图。条形图与横向柱状图表达数据的形式是一样的，不过，当图表的数据标签很长或者有超过10个项目进行比较时，横向柱状图会无法完全显示完标签，或者只能倾斜展示，影响美观。因此当数据标签过长时，选择用条形图可以获得更好的展示效果。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz";>
</iframe>
@@ -17,7 +17,7 @@
src="https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz";>
1、避免使用太多颜色，一般情况一个柱状图（条形图）表示一组相同的度量，所以建议使用相同的颜色或同一颜色的不同色调。如果需要强调某个数据时，可以使用对比色或者变化色调来突出显示有意义的数据点。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef";>
</iframe>
@@ -26,20 +26,20 @@
src="https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef";>
3、Y轴数据应该从 0 基线开始，以恰当地反映数值。如果展示的是被截断的数据，那很可能会误导观众做出错误的判断。例如左侧图表显示出的数据结果是 2017
年收入是 2014 年收入的五倍，而实际上如右侧图表完整显示的数据表明 2017 年收入相对于 2014 年其实只提升了 25%。
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/bar/bar03.jpg">
+<img max-width="830" width="100%" height="100%"
+src="/images/design/bar/bar03.jpg">
</img>
4、对多个数据系列排序时，如果不涉及到日期等特定数据，最好能符合一定的逻辑用直观的方式引导用户更好地查看数据。可以通过升序或降序排布，例如按照数量从多到少来对数据进行排序，也可以按照字母顺序等来排布。总之，按照逻辑排序可以一定程度上引导人们更好地阅读数据。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xHJhWhGm4M";>
</iframe>
5、一般情况下不建议使用三维柱状图，与三维饼图一样，对于数据传达不太精准，甚至还不得不猜测哪个才是数据的顶端。
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/bar/bar04.jpg">
+<img max-width="830" width="100%" height="100%"
+src="/images/design/bar/bar04.jpg">
</img>
diff --git
a/contents/zh/best-practice/chart-specificatio/bar/bi-directional-bar.md
b/contents/zh/best-practice/chart-specificatio/bar/bi-directional-bar.md
index 5b32991..4c48d43 100644
--- a/contents/zh/best-practice/chart-specificatio/bar/bi-directional-bar.md
+++ b/contents/zh/best-practice/chart-specificatio/bar/bi-directional-bar.md
@@ -23,12 +23,12 @@
src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f";>
2、永远不要在0基线的右边画负值的水平条行图或在 0 基线的上边画负值的柱子，以免和常识违背造成误解。
<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/bar/bi-directional-bar01.jpg">
+src="/images/design/bar/bi-directional-bar01.jpg">
</img>
3、双向柱状图多用于展示含相反含义的数据，因此要避免不具有正负含义的数据使用而造成的误解。
如下图人口统计图表中使用双向柱状图，一侧绘制男性的数据，另一侧绘制女性的数据，只是单纯的两类不同数据的对比，并不存在负数。那么，此时将两个数据序列绘制成一个分组柱状图是更合适的。
<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/bar/bi-directional-bar02.jpg">
+src="/images/design/bar/bi-directional-bar02.jpg">
</img>
diff --git a/contents/zh/best-practice/chart-specificatio/line/basic-line.md
b/contents/zh/best-practice/chart-specificatio/line/basic-line.md
index 0ede183..ad08c04 100644
--- a/contents/zh/best-practice/chart-specificatio/line/basic-line.md
+++ b/contents/zh/best-practice/chart-specificatio/line/basic-line.md
@@ -2,13 +2,13 @@
折线图主要用来展示数据相随着时间推移的趋势或变化。折线图非常适合用于展示一个连续的二维数据，如某网站访问人数或商品销量价格的波动。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xB1kG1rLEG&v=1";>
</iframe>
折线图除了展示某个事情发展的趋势，还可以用来比较多个不同的数据序列。如下图，可以通过对比同时间段的三种商品的销量，分析哪一种商品的销量最好。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xSkBiMSU4M&v=1";>>
</iframe>
@@ -20,17 +20,16 @@
src="https://gallery.echartsjs.com/view-lite.html?cid=xB1kG1rLEG&v=1";>
2、建议不要绘制4条以上的折线，如下图错误的示例，线都折叠在一起并且又没有明显的对比，整张图表就会混乱并难以阅读。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xBJzdEItVz&v=1";>
</iframe>
3、不建议使用过多的装饰来区分图表，图例虽然可以帮助区分不同数据系列，但如下图使用过多种类的图例有时会让用户分心。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xS1Tbdr8EG&v=1";>
</iframe>
4、展示折线图的数据时，要避免刻意的歪曲趋势。如下图，左图过于扁平化掩盖了想传达的信息，右图过于夸大趋势。要根据展示数据波动的参考单位，做有意义的波动分析。正确的数据高度是线约占Y轴高度的
2/3。
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/line/line01.jpg"></img>
+<img max-width="830" width="100%" height="100%"
src="images/design/line/line01.jpg"></img>
diff --git a/contents/zh/best-practice/chart-specificatio/pie/basic-pie.md
b/contents/zh/best-practice/chart-specificatio/pie/basic-pie.md
index 3d9100c..a2e0c31 100644
--- a/contents/zh/best-practice/chart-specificatio/pie/basic-pie.md
+++ b/contents/zh/best-practice/chart-specificatio/pie/basic-pie.md
@@ -15,24 +15,18 @@
src="https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1";>
2、我们很难比较一个分块过多的饼图的数据，建议尽量将饼图分块数量控制在五个以内。当数据类别较多时，可以把较小或不重要的数据合并成第五个分块，并命名为"其它"。如果各类别都必须全部展示，此时选择柱状图或堆积柱状图或许更合适。
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/pie/pie02.jpg">
-</img>
+<img max-width="830" width="100%" height="100%"
src="images/design/pie/pie02.jpg" />
3、饼图不适合被用于精确数据的比较，因此当各类别数据占比较接近时（如下左图），我们很难对比出每个类别占比的大小。此时建议选用柱状图或南丁格尔玫瑰图（如下右图）来获取更好的展示效果。
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/pie/pie03.jpg">
-</img>
+<img max-width="830" width="100%" height="100%"
src="images/design/pie/pie03.jpg" />
4、大多数人视觉习惯是按照顺时针和自上而下的顺序去观察。因此在绘制饼图时，建议从 12
点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块，有效的强调其重要性。
其余的数据分块有两种建议，一种是按照数据大小依次顺时针排列，另一种是在 12
点钟的左边绘制第二大的分块，其余的分块按照逆时针排列，最小的分块放在底部。如下图所示。
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/pie/pie01.jpg">
-</img>
+<img max-width="830" width="100%" height="100%"
src="images/design/pie/pie01.jpg" />
按照数据大小区别顺序，不仅符合用户的视觉习惯，也更易于数据的识别和比较。当然基于这个原理，我们也可以把需要强调的最重要的部分（不一定是最大的部分）放在最突出重要的位置。
@@ -46,6 +40,4 @@ src="${rootPath}/images/design/pie/pie01.jpg">
6、三维的饼图歪曲了各分块相对于整体的比例关系，会造成错误及理解上的困扰。因此不建议使用 3D 饼图。
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/pie/pie04.jpg">
-</img>
+<img max-width="830" width="100%" height="100%"
src="images/design/pie/pie04.jpg" />
diff --git a/contents/zh/best-practice/chart-specificatio/scatter/scatter.md
b/contents/zh/best-practice/chart-specificatio/scatter/scatter.md
index 99dcba3..ea5ce07 100644
--- a/contents/zh/best-practice/chart-specificatio/scatter/scatter.md
+++ b/contents/zh/best-practice/chart-specificatio/scatter/scatter.md
@@ -2,7 +2,7 @@
散点图在直角坐标系显示数据的两个变量（X和Y轴）之间的关系，数据显示为点的集合，适合用于在不考虑时间的情况下比较大量的数据点。散点图通常用来识别两个变量之间的相关性或用来观察他们的关系，从而发现某种趋势，对于查找异常值或理解数据分布也很有效。如下图某个班级学生身高和体重的分布状况。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xSkCyUwKNG&v=1";>
</iframe>
@@ -15,8 +15,8 @@
src="https://gallery.echartsjs.com/view-lite.html?cid=xSkCyUwKNG&v=1";>
+ 不相关：数据没有明显的方向性，一个变量变化对另一个没有影响。
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/scatter/scatter5.jpg">
+<img max-width="830" width="100%" height="100%"
+src="/images/design/scatter/scatter5.jpg">
</img>
@@ -28,7 +28,7 @@ src="${rootPath}/images/design/scatter/scatter5.jpg">
2、如果数据包含不同系列，可以给不同系列使用不同的颜色，例如蓝色代表男性，红色代表女性，并增加图例标注出蓝色代表的含义。可以区分了解男女不同性别身高和体重的分布状况。还可以分别添加每个系列平均值的辅助线，可以更好的理解数据的分布情况，如图中女生体重高于平均值的比低于平均值的少。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xBy9E2oufM";>
</iframe>
diff --git a/contents/zh/best-practice/design/color-enhance.md
b/contents/zh/best-practice/design/color-enhance.md
index b26d7de..2e81f7a 100644
--- a/contents/zh/best-practice/design/color-enhance.md
+++ b/contents/zh/best-practice/design/color-enhance.md
@@ -10,33 +10,27 @@
例如某个甜品店各类甜品的销售占比，数据如下：
-<img max-width="830" width="50%" height="100%"
-src="${rootPath}/images/design/color/color01.png">
-</img>
+<img max-width="830" width="50%" height="100%"
src="images/design/color/color01.png" />
针对这份数据，下面两个相同样式的图表，我们采用了两种不同配色方案，对比来看很明显，右图的配色更适合用来展示甜品数据。
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/color/color02.png">
-</img>
+<img max-width="830" width="100%" height="100%"
src="images/design/color/color02.png" />
因为相较于蓝色、紫色而言，橙色、黄色、粉色、绿色都是有利于提升食欲的颜色，而且更容易使人们产生温暖、幸福的情感，而这种情感与吃甜品时人们产生的感觉是一致的。另一方面，甜品本身的面向用户大多数是儿童和女性，针对这部分用户，比较明快、可爱的图表颜色也是更好的选择。而左侧的图表的配色更适合用于展示某种商务、男性群体的数据，因为左图的配色更容易使人产生理性和冷静的情感。
## 颜色的语义共鸣
-
+
不同的颜色可以帮助我们识别和区分不同的类别。我们已经习惯将颜色和各种事物或概念绑定在一起。当提到某些事物时我们经常会迅速的在心中匹配其对应的颜色，例如提到“云朵”会想到白色，“爱情”会想到粉红色。这些自然的、与语义一致的颜色被称为"语义共鸣色"。
研究表明，对于有固定颜色的词，匹配其具有语义共鸣的颜色，能有效的加速认知过程，反之则会阻碍认知，这种有趣的现象称为"斯特鲁普效应"。我们可以做个的对比试验，分别在上图两行文字中找到“黄”字。这个过程中，第一行的“黄”可以被快速定位到，因为对应使用了黄色。而在第二行寻找的时候，可能有人最早定位到的会是“紫”字，因为此处“紫”字使用了黄色，这就阻碍了我们寻找的速度和准确性。
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/color/color03.png">
-</img>
+<img max-width="830" width="100%" height="100%"
src="images/design/color/color03.png" />
有效地利用语义共鸣色，即采用与数据本身意义一致的颜色，也可以提高可视化的认知效率。例如可以使用蓝色的来显示"海洋"的数据、使用黄色来显示“沙漠”的数据。
视觉效果应该尽可能容易地解释，因此请尝试找到与观众的先入为主和文化联想相匹配的配色方案。如下示例中展示了猕猴桃、香蕉、橙子、草莓四种水果的销售数据，分别选择了与水果本身一致的颜色绿色、黄色、橙色、红色。这样，我们在辨别和记忆每个柱状所对应的水果时就轻而易举了。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW";>
</iframe>
@@ -44,13 +38,13 @@
src="https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW";>
在数据可视化的过程中，颜色的使用与图表的数据、展示环境、受众人群、社会背景等因素直接相关，我们不可以把颜色作为独立的因素去设计。在开始选择可视化作品的颜色时，请先克制住自由创作的热情，查看一下这是否是一份特殊的数据，再去选择对的颜色。例如一个股票数据的图表中，红色和绿色都有独特的含义。所以可视化图表颜色的选择吻合认知的常识，可以帮助我们更好地理解和区分数据。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xp1oqJoQqG";>
</iframe>
再例如查看天气温度。蓝色和红色易于理解，无需任何解释，并且易于区分。
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xIVoX5gZcT&v=1";>
</iframe>
@@ -61,6 +55,4 @@
src="https://gallery.echartsjs.com/view-lite.html?cid=xIVoX5gZcT&v=1";>
所以，颜色可以被用来作为提高图表的可阅读性和有效工具。
-<img max-width="830" width="80%" height="100%"
-src="${rootPath}/images/design/color/color04.png">
-</img>
\ No newline at end of file
+<img max-width="830" width="80%" height="100%"
src="images/design/color/color04.png" />
\ No newline at end of file
diff --git a/contents/zh/concepts/axis.md b/contents/zh/concepts/axis.md
index b64cc58..7299ed3 100644
--- a/contents/zh/concepts/axis.md
+++ b/contents/zh/concepts/axis.md
@@ -6,8 +6,7 @@
x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据
-<img max-width="830" width="100%" height="100%"
-src="${rootPath}/images/design/axis/charts_axis_img02.jpg">
+<img max-width="830" width="100%" height="100%"
src="images/design/axis/charts_axis_img02.jpg">
</img>
普通的二维数据坐标系都有 x 轴和 y 轴，通常情况下，x 轴显示在图表的底部，y 轴显示在左侧，一般配置如下：
diff --git a/contents/zh/concepts/data-transform.md
b/contents/zh/concepts/data-transform.md
index c7f0e8f..80e3801 100644
--- a/contents/zh/concepts/data-transform.md
+++ b/contents/zh/concepts/data-transform.md
@@ -143,9 +143,7 @@ option: {
}
```
-<md-alert>
-注意：理论上，任何 transform 都可能有多个输入或多个输出。但是，如果一个 transform 被链式声明，它只能获取前一个 transform
的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）。
-</md-alert>
+> 注意：理论上，任何 transform 都可能有多个输入或多个输出。但是，如果一个 transform 被链式声明，它只能获取前一个 transform
的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）。
#### 一个 transform 输出多个 data
diff --git a/contents/zh/concepts/legend.md b/contents/zh/concepts/legend.md
index 69f915e..bbef0dd 100644
--- a/contents/zh/concepts/legend.md
+++ b/contents/zh/concepts/legend.md
@@ -4,12 +4,8 @@
## 布局
图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式：
-<img max-width="830" width="80%" height="80%"
-src="${rootPath}/images/design/legend/charts_sign_img01.png">
-</img>
-<img max-width="830" width="80%" height="80%"
-src="${rootPath}/images/design/legend/charts_sign_img02.png">
-</img>
+<img max-width="830" width="80%" height="80%"
src="images/design/legend/charts_sign_img01.png" />
+<img max-width="830" width="80%" height="80%"
src="images/design/legend/charts_sign_img02.png" />
```js
option = {
@@ -61,8 +57,7 @@ option = {
图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。
-<img max-width="830" width="80%" height="80%"
-src="${rootPath}/images/design/legend/charts_sign_img04.png">
+<img max-width="830" width="80%" height="80%"
src="images/design/legend/charts_sign_img04.png">
</img>
```js
diff --git a/contents/zh/meta/get-started.md b/contents/zh/meta/get-started.md
index ede96df..95d27a3 100644
--- a/contents/zh/meta/get-started.md
+++ b/contents/zh/meta/get-started.md
@@ -1,4 +1,4 @@
-# 项目结构说明
+# 文档编写说明
## 新增一个 markdown 文件
@@ -71,8 +71,6 @@ option = {
<img src="images/demo.png" style="width: 50px" />
```
-对于多个页面可以共享的样式，修改相关的 `.vue` 文件。
-
## 添加示例 iframe
@@ -80,4 +78,40 @@ option = {
<md-example src="doc-example/tutorial-async" width="100%"
height="300"></md-example>
```
-<md-example src="doc-example/tutorial-async" width="100%"
height="300"></md-example>
\ No newline at end of file
+<md-example src="doc-example/tutorial-async" width="100%"
height="300"></md-example>
+
+
+## 更多组件使用
+
+文档支持使用全局注册的`markdown`组件，除了刚才介绍的`md-example`组件，还有下面几种组件
+
+
+### md-alert
+
+```markdown
+<md-alert type="info">
+This is an info alert.
+</md-alert>
+<md-alert type="success">
+This is an success alert.
+</md-alert>
+<md-alert type="warning">
+This is an warning alert.
+</md-alert>
+<md-alert type="warning">
+This is an danger alert.
+</md-alert>
+```
+
+<md-alert type="info">
+This is an info alert.
+</md-alert>
+<md-alert type="success">
+This is an success alert.
+</md-alert>
+<md-alert type="warning">
+This is an warning alert.
+</md-alert>
+<md-alert type="danger">
+This is an danger alert.
+</md-alert>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 9df1742..02ea4d5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -126,8 +126,8 @@ export default {
blockquote {
margin: 15px 0;
padding: 20px 15px;
- border-left: 4px solid #ccc;
- background-color: #f3f3f3;
+
+ @apply bg-blue-100 border-blue-400 rounded-lg;
:first-child {
margin-top: 0;
@@ -148,10 +148,12 @@ export default {
code {
background: none;
+ font-size: 13px;
}
}
code {
+ font-size: 14px;
}
.nuxt-content-highlight {
@@ -201,13 +203,21 @@ export default {
p {
margin: 20px 0;
}
+
+ img {
+ @apply shadow-lg rounded-lg;
+ }
+
+ a {
+ @apply text-light-blue-500;
+ }
}
.post-inner .table-of-contents {
position: fixed;
left: 77%;
width: 21%;
- top: 80px;
+ top: 50px;
background-color: transparent;
padding: 10px;
height: auto;
@@ -244,7 +254,7 @@ export default {
}
a {
- color: #888;
+ @apply text-blue-gray-500;
transition: 0.5s;
&:hover {
diff --git a/tailwind.config.js b/tailwind.config.js
index 22b3822..0705d75 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,11 @@ module.exports = {
extend: {
colors: {
orange: colors.orange,
- 'blue-gray': colors.blueGray
+ 'blue-gray': colors.blueGray,
+ emerald: colors.emerald,
+ lime: colors.lime,
+ teal: colors.teal,
+ 'light-blue': colors.lightBlue
}
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
