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/07/21 15:33:20 UTC
[echarts-handbook] branch master updated: en: add dataset, style
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 ef9656b en: add dataset, style
ef9656b is described below
commit ef9656b7e26ac1073a1da739e197fef83838f469
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jul 21 23:32:31 2021 +0800
en: add dataset, style
---
contents/en/concepts/dataset.md | 630 +++++++++++++++++-----------------
contents/{zh => en}/concepts/style.md | 159 +++++----
contents/zh/concepts/dataset.md | 105 +++---
contents/zh/concepts/style.md | 87 +++--
4 files changed, 528 insertions(+), 453 deletions(-)
diff --git a/contents/en/concepts/dataset.md b/contents/en/concepts/dataset.md
index e2d8a9c..6548766 100644
--- a/contents/en/concepts/dataset.md
+++ b/contents/en/concepts/dataset.md
@@ -1,32 +1,36 @@
# Dataset
-`dataset` is a component dedicated to managing data. Although you can set the data in `series.data` for every series, we recommend you use the `dataset` to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.
+`dataset` is a component dedicated to manage data. Although you can set the data in `series.data` for every series, we recommend you use the `dataset` to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.
## Define `data` under `series`
If data is defined under `series`, for example:
-```js
+```js [live]
option = {
- xAxis: {
- type: 'category',
- data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
+ xAxis: {
+ type: 'category',
+ data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ name: '2015',
+ data: [89.3, 92.1, 94.4, 85.4]
},
- yAxis: {},
- series: [{
- type: 'bar',
- name: '2015',
- data: [89.3, 92.1, 94.4, 85.4]
- }, {
- type: 'bar',
- name: '2016',
- data: [95.8, 89.4, 91.2, 76.9]
- }, {
- type: 'bar',
- name: '2017',
- data: [97.7, 83.1, 92.5, 78.1]
- }]
-}
+ {
+ type: 'bar',
+ name: '2016',
+ data: [95.8, 89.4, 91.2, 76.9]
+ },
+ {
+ type: 'bar',
+ name: '2017',
+ data: [97.7, 83.1, 92.5, 78.1]
+ }
+ ]
+};
```
Define `data` under `series` is suitable for customization for some special data structures such as "tree", "graph" and large data.
@@ -35,142 +39,122 @@ However, it is not conducive to the data sharing for multiple series as well as
## Define `data` in `dataset`
Here are the advantages if you define `data` in `dataset`:
-+ Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.
-+ Divide data from other configurations. The data often change but others not. It is
-Easy to manage separately.
-+ Data can be reused by several series or component, you don't need to create copies of a large amount of data for every series.
-+ Support more common data format, such as a 2D array, array of classes, etc., to avoid users from converting for data format to a certain extent.
+
+- Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.
+- Divide data from other configurations. The data often change but others not. It is
+ Easy to manage separately.
+- Data can be reused by several series or component, you don't need to create copies of a large amount of data for every series.
+- Support more common data format, such as a 2D array, array of classes, etc., to avoid users from converting for data format to a certain extent.
Here is a simple `dataset` example:
-```js
+```js [live]
option = {
- legend: {},
- tooltip: {},
- dataset: {
- // Provide a set of data.
- source: [
- ['product', '2015', '2016', '2017'],
- ['Matcha Latte', 43.3, 85.8, 93.7],
- ['Milk Tea', 83.1, 73.4, 55.1],
- ['Cheese Cocoa', 86.4, 65.2, 82.5],
- ['Walnut Brownie', 72.4, 53.9, 39.1]
- ]
- },
- // Declare an x-axis (category axis).
- // The category map the first row in the dataset by default.
- xAxis: {type: 'category'},
- // Declare a y-axis (value axis).
- yAxis: {},
- // Declare several 'bar' series,
- // every series will auto-map to each rows by default.
- series: [
- {type: 'bar'},
- {type: 'bar'},
- {type: 'bar'}
+ legend: {},
+ tooltip: {},
+ dataset: {
+ // Provide a set of data.
+ source: [
+ ['product', '2015', '2016', '2017'],
+ ['Matcha Latte', 43.3, 85.8, 93.7],
+ ['Milk Tea', 83.1, 73.4, 55.1],
+ ['Cheese Cocoa', 86.4, 65.2, 82.5],
+ ['Walnut Brownie', 72.4, 53.9, 39.1]
]
-}
+ },
+ // Declare an x-axis (category axis).
+ // The category map the first row in the dataset by default.
+ xAxis: { type: 'category' },
+ // Declare a y-axis (value axis).
+ yAxis: {},
+ // Declare several 'bar' series,
+ // every series will auto-map to each rows by default.
+ series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+};
```
-The effect is as follows:
-
-<iframe width="600" height="300" src="${exampleViewPath}dataset-simple0&edit=1&reset=1"></iframe>
-
Or try to use the "array of classes" format:
-```js
+```js [live]
option = {
- legend: {},
- tooltip: {},
- dataset: {
- // Define the dimension of array. In cartesian coordinate system,
- // if the type of x-axis is category, map the first dimension to
- // x-axis by default, the second dimension to y-axis.
- // You can also specify 'series.encode' to complete the map
- // without specify dimensions. Please see below.
-
- dimensions: ['product', '2015', '2016', '2017'],
- source: [
- {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
- {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
- {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
- {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
- ]
- },
- xAxis: {type: 'category'},
- yAxis: {},
- series: [
- {type: 'bar'},
- {type: 'bar'},
- {type: 'bar'}
+ legend: {},
+ tooltip: {},
+ dataset: {
+ // Define the dimension of array. In cartesian coordinate system,
+ // if the type of x-axis is category, map the first dimension to
+ // x-axis by default, the second dimension to y-axis.
+ // You can also specify 'series.encode' to complete the map
+ // without specify dimensions. Please see below.
+
+ dimensions: ['product', '2015', '2016', '2017'],
+ source: [
+ { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
+ { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
+ { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
+ { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
]
+ },
+ xAxis: { type: 'category' },
+ yAxis: {},
+ series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
```
-
## Map from Data to Chart
The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.
In short, you can set these configs of mapping:
-+ Specify 'column' or 'row' of `dataset` to map the `series`. You can use [series.seriesLayoutBy](${optionPath}#series.seriesLayoutBy) to configure it. The default is to map according to the column.
-+ Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to `axis`, `tooltip`, `label` and `visualMap`. To configure the mapping, please use [series.encode](${optionPath}#series.encode) and [visualMap](${optionPath}#visualMap). The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in `dataset.source`; three-column chart mapping with each row in `dataset.source` one by one.
-
+- Specify 'column' or 'row' of `dataset` to map the `series`. You can use [series.seriesLayoutBy](${optionPath}#series.seriesLayoutBy) to configure it. The default is to map according to the column.
+- Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to `axis`, `tooltip`, `label` and `visualMap`. To configure the mapping, please use [series.encode](${optionPath}#series.encode) and [visualMap](${optionPath}#visualMap). The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in `dataset.source`; three-column chart mapping with each row in `dataset.source` one by one.
The details of the configuration are shown below:
-
## Map Row or Column of `dataset` to `series`
After having the dataset, you can configure flexibly: how the data map to the axis and graph series.
You can use `seriesLayoutBy` to change the understanding of row and column of the chart. `seriesLayoutBy` can be:
-+ 'column': Default, the series are placed above the column of `dataset`.
-+ 'row': The series is placed above the row of `dataset`.
+- 'column': Default, the series are placed above the column of `dataset`.
+- 'row': The series is placed above the row of `dataset`.
Check this case:
-```js
+```js [live]
option = {
- legend: {},
- tooltip: {},
- dataset: {
- source: [
- ['product', '2012', '2013', '2014', '2015'],
- ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
- ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
- ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
- ]
- },
- xAxis: [
- {type: 'category', gridIndex: 0},
- {type: 'category', gridIndex: 1}
- ],
- yAxis: [
- {gridIndex: 0},
- {gridIndex: 1}
- ],
- grid: [
- {bottom: '55%'},
- {top: '55%'}
- ],
- series: [
- // These series will show in the first coordinate, each series map a row in dataset.
- {type: 'bar', seriesLayoutBy: 'row'},
- {type: 'bar', seriesLayoutBy: 'row'},
- {type: 'bar', seriesLayoutBy: 'row'},
- // These series will show in the second coordinate, each series map a column in dataset.
- {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
- {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
- {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
- {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
+ legend: {},
+ tooltip: {},
+ dataset: {
+ source: [
+ ['product', '2012', '2013', '2014', '2015'],
+ ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
+ ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
+ ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]
-}
+ },
+ xAxis: [
+ { type: 'category', gridIndex: 0 },
+ { type: 'category', gridIndex: 1 }
+ ],
+ yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
+ grid: [{ bottom: '55%' }, { top: '55%' }],
+ series: [
+ // These series will show in the first coordinate, each series map a row in dataset.
+ { type: 'bar', seriesLayoutBy: 'row' },
+ { type: 'bar', seriesLayoutBy: 'row' },
+ { type: 'bar', seriesLayoutBy: 'row' },
+ // These series will show in the second coordinate, each series map a column in dataset.
+ { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
+ { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
+ { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
+ { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
+ ]
+};
```
-The effect of configuration is shown in [this case](${exampleEditorPath}dataset-series-layout-by&edit=1&reset=1).
+The effect of configuration is shown in [this case](${exampleEditorPath}dataset-series-layout-by).
## Dimension
@@ -182,249 +166,256 @@ Try to use single `dataset.dimensions` or some `series.dimensions` to define the
```js
var option1 = {
- dataset: {
- dimensions: [
- {name: 'score'},
- // can be abbreviated as 'string', to indicate dimension name 。
- 'amount',
- // Specify dimensions in 'type'.
- {name: 'product', type: 'ordinal'}
- ],
- source: [...]
- },
- ...
+ dataset: {
+ dimensions: [
+ { name: 'score' },
+ // can be abbreviated as 'string', to indicate dimension name 。
+ 'amount',
+ // Specify dimensions in 'type'.
+ { name: 'product', type: 'ordinal' }
+ ],
+ source: []
+ }
+ // ...
};
var option2 = {
- dataset: {
- source: [...]
- },
- series: {
- type: 'line',
- // series.dimensions will cover the config in dataset.dimension
- dimensions: [
- null, // use null if you do not want dimension name.
- 'amount',
- {name: 'product', type: 'ordinal'}
- ]
- },
- ...
+ dataset: {
+ source: []
+ },
+ series: {
+ type: 'line',
+ // series.dimensions will cover the config in dataset.dimension
+ dimensions: [
+ null, // use null if you do not want dimension name.
+ 'amount',
+ { name: 'product', type: 'ordinal' }
+ ]
+ }
+ // ...
};
```
In most cases, you don't need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually.
Dimension type can be the following values:
-+ `'number'`: Default, normal data.
-+ `'ordinal'`: String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.
-+ `'time'`: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as `'time'`. For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'`. If the dimension is used as time axis ([axis.type](${optionPath}#xAxis.type) = `'time'`), the dimension type will also be `'time'`. See [data](${optionPath}#series.data) for more time type support.
-+ `'float'`: Use `TypedArray` to optimize the performance in `'float'` dimension.
-+ `'int'`: Use `TypedArray` to optimize the performance in `'int'` dimension.
+- `'number'`: Default, normal data.
+- `'ordinal'`: String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.
+- `'time'`: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as `'time'`. For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'`. If the dimension is used as time axis ([axis.type](${optionPath}#xAxis.type) =`'time'`), the dimension type will also be`'time'`. See [data](${optionPath}#series.data) for more time type support.
+- `'float'`: Use `TypedArray` to optimize the performance in `'float'` dimension.
+- `'int'`: Use `TypedArray` to optimize the performance in `'int'` dimension.
## Map from Data to Charts (series.encode)
After understand the concept of dimension, you can use [series.encode](${optionPath}#series.encode) to make a mapping:
-```js
+```js [live]
var option = {
- dataset: {
- source: [
- ['score', 'amount', 'product'],
- [89.3, 58212, 'Matcha Latte'],
- [57.1, 78254, 'Milk Tea'],
- [74.4, 41032, 'Cheese Cocoa'],
- [50.1, 12755, 'Cheese Brownie'],
- [89.7, 20145, 'Matcha Cocoa'],
- [68.1, 79146, 'Tea'],
- [19.6, 91852, 'Orange Juice'],
- [10.6, 101852, 'Lemon Juice'],
- [32.7, 20112, 'Walnut Brownie']
- ]
- },
- xAxis: {},
- yAxis: {type: 'category'},
- series: [
- {
- type: 'bar',
- encode: {
- // Map "amount" column to x-axis.
- x: 'amount',
- // Map "product" row to y-axis.
- y: 'product'
- }
- }
+ dataset: {
+ source: [
+ ['score', 'amount', 'product'],
+ [89.3, 58212, 'Matcha Latte'],
+ [57.1, 78254, 'Milk Tea'],
+ [74.4, 41032, 'Cheese Cocoa'],
+ [50.1, 12755, 'Cheese Brownie'],
+ [89.7, 20145, 'Matcha Cocoa'],
+ [68.1, 79146, 'Tea'],
+ [19.6, 91852, 'Orange Juice'],
+ [10.6, 101852, 'Lemon Juice'],
+ [32.7, 20112, 'Walnut Brownie']
]
+ },
+ xAxis: {},
+ yAxis: { type: 'category' },
+ series: [
+ {
+ type: 'bar',
+ encode: {
+ // Map "amount" column to x-axis.
+ x: 'amount',
+ // Map "product" row to y-axis.
+ y: 'product'
+ }
+ }
+ ]
};
```
-[Here](${exampleEditorPath}dataset-encode-simple0&edit=1&reset=1) shows the effect of this example.
-
The basic structure of `series.encode` declaration:
-+ To the left of the colon: Specific name of axis or label.
-+ To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).
+
+- To the left of the colon: Specific name of axis or label.
+- To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).
Generally, the following info is not necessary to be defined. Fill in as needed.
Attribute suggested by `series.encode`
-
```js
// Supported in every coordinate and series:
encode: {
- // Display the value of dimension named "product" and "score" in tooltip.
- tooltip: ['product', 'score']
- // Connect dimension name of "Dimension 1" and "Dimension 3" as the series name. (Avoid to repeat longer names in series.name)
- seriesName: [1, 3],
- // Means to use the value in "Dimension 2" as the id. It makes the new and old data correspond by id
+ // Display the value of dimension named "product" and "score" in tooltip.
+ tooltip: ['product', 'score']
+ // Connect dimension name of "Dimension 1" and "Dimension 3" as the series name. (Avoid to repeat longer names in series.name)
+ seriesName: [1, 3],
+ // Means to use the value in "Dimension 2" as the id. It makes the new and old data correspond by id
// when using setOption to update data, so that it can show animation properly.
- itemId: 2,
- // The itemName will show in the legend of Pie Charts.
- itemName: 3
+ itemId: 2,
+ // The itemName will show in the legend of Pie Charts.
+ itemName: 3
}
// Grid/cartesian coordinate unique configs:
encode: {
- // Map "Dimension 1", "Dimension 5" and "dimension named 'score'" to x-axis:
- x: [1, 5, 'score'],
- // Map "Dimension 0" to y-axis:
- y: 0
+ // Map "Dimension 1", "Dimension 5" and "dimension named 'score'" to x-axis:
+ x: [1, 5, 'score'],
+ // Map "Dimension 0" to y-axis:
+ y: 0
}
// singleAxis unique configs:
encode: {
- single: 3
+ single: 3
}
// Polar coordinate unique configs:
encode: {
- radius: 3,
- angle: 2
+ radius: 3,
+ angle: 2
}
// Geo-coordinate unique configs:
encode: {
- lng: 3,
- lat: 2
+ lng: 3,
+ lat: 2
}
// For some charts without coordinate like pie chart, funnel chart:
encode: {
- value: 3
+ value: 3
}
```
-This is a richer [example](${exampleEditorPath}dataset-encode1&edit=1&reset=1) of `series.encode`.
-
-
+This is a richer [example](${exampleEditorPath}dataset-encode1) of `series.encode`.
## Default series.encode
It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if `series.encode` is not specified. The default rule is:
-+ In coordinate system (eg. Cartesian, Polar):
- + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series.
- + If both axes is not the category, then map every two columns in one series to two axes.
-+ Without axis (such as Pie Chart):
- + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).
-While the default rule cannot fulfill the requirements, you can configure `encode` by yourself, which is not complicate. Here is an [example](${exampleEditorPath}dataset-default&edit=1&reset=1).
+- In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes.
+- Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).
+While the default rule cannot fulfill the requirements, you can configure `encode` by yourself, which is not complicate. Here is an [example](${exampleEditorPath}dataset-default).
## Some Normal Settings of series.encode
Q: How to set the 3rd column as x-axis, 5th column as y-axis?
A:
+
```js
-series: {
+option = {
+ series: {
// dimensionIndex count from 0, so the 3rd line is dimensions[2].
- encode: {x: 2, y: 4},
- ...
-}
+ encode: { x: 2, y: 4 }
+ // ...
+ }
+};
```
Q: How to set the 3rd row as x-axis, 5th row as y-axis?
A:
+
```js
-series: {
- encode: {x: 2, y: 4},
- seriesLayoutBy: 'row',
- ...
-}
+option = {
+ series: {
+ encode: { x: 2, y: 4 },
+ seriesLayoutBy: 'row'
+ // ...
+ }
+};
```
Q: How to set the 2nd column as a label?
A:
We now support to trace value from specific dimension for [label.formatter](${optionPath}#series.label.formatter):
+
```js
series: {
- label: {
- // `'{@score}'` means the value in the dimension named "score".
- // `'{@[4]}'` means the value in dimension 4.
- formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd'
- }
+ label: {
+ // `'{@score}'` means the value in the dimension named "score".
+ // `'{@[4]}'` means the value in dimension 4.
+ formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';
+ }
}
```
Q: How to show the 2nd and 3rd column in the tooltip?
A:
+
```js
-series: {
+option = {
+ series: {
encode: {
- tooltip: [1, 2]
- ...
- },
- ...
-}
+ tooltip: [1, 2]
+ // ...
+ }
+ // ...
+ }
+};
```
Q: How to define the dimension name if is not included in the dataset?
A:
+
```js
-dataset: {
+var option = {
+ dataset: {
dimensions: ['score', 'amount'],
source: [
- [89.3, 3371],
- [92.1, 8123],
- [94.4, 1954],
- [85.4, 829]
+ [89.3, 3371],
+ [92.1, 8123],
+ [94.4, 1954],
+ [85.4, 829]
]
-}
+ }
+};
```
Q: How to map the 3rd column to the size of the scatter chart?
A:
-```js
+
+```js [live]
var option = {
- dataset: {
- source: [
- [12, 323, 11.2],
- [23, 167, 8.3],
- [81, 284, 12],
- [91, 413, 4.1],
- [13, 287, 13.5]
- ]
- },
- visualMap: {
- show: false,
- dimension: 2, // means the 3rd column
- min: 2, // lower bound
- max: 15, // higher bound
- inRange: {
- // Size of the bubble.
- symbolSize: [5, 60]
- }
- },
- xAxis: {},
- yAxis: {},
- series: {
- type: 'scatter'
+ dataset: {
+ source: [
+ [12, 323, 11.2],
+ [23, 167, 8.3],
+ [81, 284, 12],
+ [91, 413, 4.1],
+ [13, 287, 13.5]
+ ]
+ },
+ visualMap: {
+ show: false,
+ dimension: 2, // means the 3rd column
+ min: 2, // lower bound
+ max: 15, // higher bound
+ inRange: {
+ // Size of the bubble.
+ symbolSize: [5, 60]
}
+ },
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'scatter'
+ }
};
```
@@ -432,100 +423,107 @@ Q: I specified a mapping in encode, why it is not worked?
A: Check your spelling, such as misspell the dimension name `'Life Expectancy'` to `'Life Expectency'` in encode.
-
## Visual Channel Mapping
-We can map visual channel by using [visualMap](${optionPath}#visualMap). Check details in the [visualMap](${optionPath}#visualMap) document. Here is an [example](${exampleEditorPath}dataset-encode0&edit=1&reset=1).
-
+We can map visual channel by using [visualMap](${optionPath}#visualMap). Check details in the [visualMap](${optionPath}#visualMap) document. Here is an [example](${exampleEditorPath}dataset-encode0).
## Formats of Charts
-In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to `dataset.source` and avoid some steps of data processing.
+In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to `dataset.source` and avoid some steps of data processing.
> You can switch .csv file to JSON using tools like [dsv](https://github.com/d3/d3-dsv) or [PapaParse](https://github.com/mholt/PapaParse).
-
As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array.
Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don't support [seriesLayoutBy](${optionPath}#series.seriesLayoutBy) in this format right now.
```js
-dataset: [{
+dataset: [
+ {
// column by column key-value array is a normal format
source: [
- {product: 'Matcha Latte', count: 823, score: 95.8},
- {product: 'Milk Tea', count: 235, score: 81.4},
- {product: 'Cheese Cocoa', count: 1042, score: 91.2},
- {product: 'Walnut Brownie', count: 988, score: 76.9}
+ { product: 'Matcha Latte', count: 823, score: 95.8 },
+ { product: 'Milk Tea', count: 235, score: 81.4 },
+ { product: 'Cheese Cocoa', count: 1042, score: 91.2 },
+ { product: 'Walnut Brownie', count: 988, score: 76.9 }
]
-}, {
+ },
+ {
// row by row key-value
source: {
- 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
- 'count': [823, 235, 1042, 988],
- 'score': [95.8, 81.4, 91.2, 76.9]
+ product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
+ count: [823, 235, 1042, 988],
+ score: [95.8, 81.4, 91.2, 76.9]
}
-}]
+ }
+];
```
-
## How to Reference Several Datasets
ECharts support to define several datasets at the same moment. Series can assign the one to reference by [series.datasetIndex](${optionPath}#series.datasetIndex). For example:
```js
var option = {
- dataset: [{
- // 1st Dataset
- source: [...],
- }, {
- // 2nd Dataset
- source: [...]
- }, {
- // 3rd Dataset。
- source: [...]
- }],
- series: [{
- // Use 2nd dataset
- datasetIndex: 2
- }, {
- // Use 1st dataset
- datasetIndex: 1
- }]
-}
+ dataset: [
+ {
+ // 1st Dataset
+ source: []
+ },
+ {
+ // 2nd Dataset
+ source: []
+ },
+ {
+ // 3rd Dataset。
+ source: []
+ }
+ ],
+ series: [
+ {
+ // Use 2nd dataset
+ datasetIndex: 2
+ },
+ {
+ // Use 1st dataset
+ datasetIndex: 1
+ }
+ ]
+};
```
-
-
-
## series.data in ECharts 3
ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the [series.data](${optionPath}#series.data), then use [series.data](${optionPath}#series.data) but not `dataset`.
```js
-{
- xAxis: {
- type: 'category'
- data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ name: '2015',
+ data: [89.3, 92.1, 94.4, 85.4]
},
- yAxis: {},
- series: [{
- type: 'bar',
- name: '2015',
- data: [89.3, 92.1, 94.4, 85.4]
- }, {
- type: 'bar',
- name: '2016',
- data: [95.8, 89.4, 91.2, 76.9]
- }, {
- type: 'bar',
- name: '2017',
- data: [97.7, 83.1, 92.5, 78.1]
- }]
-}
+ {
+ type: 'bar',
+ name: '2016',
+ data: [95.8, 89.4, 91.2, 76.9]
+ },
+ {
+ type: 'bar',
+ name: '2017',
+ data: [97.7, 83.1, 92.5, 78.1]
+ }
+ ]
+};
```
-In fact, [series.data](${optionPath}#series.data) is an important setting method which will always exist. Some special non-table format chart like [treemap](${optionPath}#series-treemap), [graph](${optionPath}#series-graph) and [lines](${optionPath}#series-lines) still cannot be edit in dataset, you still need to use [series.data](${optionPath}#series.data). In another way, for render huge amount of data (over a million), you need to use [appendData](api.html#echartsInstance.appendData) [...]
+In fact, [series.data](${optionPath}#series.data) is an important setting method which will always exist. Some special non-table format chart like [treemap](${optionPath}#series-treemap), [graph](${optionPath}#series-graph) and [lines](${optionPath}#series-lines) still cannot be edit in dataset, you still need to use [series.data](${optionPath}#series.data). In another way, for render huge amount of data (over a million), you need to use [appendData](${mainSitePath}api.html#echartsInstan [...]
## Others
@@ -533,4 +531,4 @@ The following charts now support dataset:
`line`, `bar`, `pie`, `scatter`, `effectScatter`, `parallel`, `candlestick`, `map`, `funnel`, `custom`.
ECharts will support more charts in the future.
-In the end, here is an [example](${exampleEditorPath}dataset-link&edit=1&reset=1) of several charts shared one `dataset` with linkage interaction.
\ No newline at end of file
+In the end, here is an [example](${exampleEditorPath}dataset-link) of several charts shared one `dataset` with linkage interaction.
diff --git a/contents/zh/concepts/style.md b/contents/en/concepts/style.md
similarity index 51%
copy from contents/zh/concepts/style.md
copy to contents/en/concepts/style.md
index f086e56..4eb3358 100644
--- a/contents/zh/concepts/style.md
+++ b/contents/en/concepts/style.md
@@ -1,83 +1,118 @@
-# ECharts 中的样式简介
+# Overview of Style Customization
-本文主要是大略概述，用哪些方法，可以在 Apache ECharts<sup>TM</sup> 中设置样式，改变图形元素或者文字的颜色、明暗、大小等。
+This article provides an overview of the different approaches about Apache ECharts<sup>TM</sup> style customization. For example, how to config the color, size, shadow of the graphic elements and labels.
-> 之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。
+> The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.
-本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。
+These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.
-- 颜色主题（Theme）
-- 调色盘
-- 直接样式设置（itemStyle、lineStyle、areaStyle、label、...）
-- 视觉映射（visualMap）
+- Theme
+- Color Palette
+- Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)
+- Visual encoding (visualMap component)
-## 颜色主题（Theme）
+## Theme
-最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 [示例集合](${websitePath}/examples) 中，可以选择 “Theme”，直接看到采用主题的效果。
+Setting a theme is the simplest way to change the color style. For example, in [Examples page](${websitePath}/examples/en/index.html), we can switch to dark mode and see the result of a different theme.
-ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 `'light'` 和 `'dark'`。可以这么来使用它们：
-
-```js
-var chart = echarts.init(dom, 'light');
-```
-
-或者
+In our project, we can switch to dark theme like:
```js
var chart = echarts.init(dom, 'dark');
```
-其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 [主题编辑器](https://echarts.apache.org/theme-builder.html) 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：
+Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the [theme builder](https://echarts.apache.org/en/theme-builder.html). Theme can also be created or edited in it. The downloaded theme can be used as follows:
-如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：
+If a theme is downloaded as a JSON file, we should register it by ourselves, for example:
```js
-// 假设主题名称是 "vintage"
+var xhr = new XMLHttpRequest();
+// Assume the theme name is "vintage".
$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {
echarts.registerTheme('vintage', JSON.parse(themeJSON));
var chart = echarts.init(dom, 'vintage');
});
```
-如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：
+If a theme is downloaded as a JS file, it will auto register itself:
```js
-// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）
+// Import the `vintage.js` file in HTML, then:
var chart = echarts.init(dom, 'vintage');
// ...
```
-## 调色盘
+## Color Palette
-调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。
-可以设置全局的调色盘，也可以设置系列自己专属的调色盘。
+Color palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.
```js
option = {
- // 全局调色盘。
- color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
-
- series: [{
- type: 'bar',
- // 此系列自己的调色盘。
- color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
- ...
- }, {
- type: 'pie',
- // 此系列自己的调色盘。
- color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
- ...
- }]
-}
+ // Global palette:
+ color: [
+ '#c23531',
+ '#2f4554',
+ '#61a0a8',
+ '#d48265',
+ '#91c7ae',
+ '#749f83',
+ '#ca8622',
+ '#bda29a',
+ '#6e7074',
+ '#546570',
+ '#c4ccd3'
+ ],
+
+ series: [
+ {
+ type: 'bar',
+ // A palette only work for the series:
+ color: [
+ '#dd6b66',
+ '#759aa0',
+ '#e69d87',
+ '#8dc1a9',
+ '#ea7e53',
+ '#eedd78',
+ '#73a373',
+ '#73b9bc',
+ '#7289ab',
+ '#91ca8c',
+ '#f49f42'
+ ]
+ // ...
+ },
+ {
+ type: 'pie',
+ // A palette only work for the series:
+ color: [
+ '#37A2DA',
+ '#32C5E9',
+ '#67E0E3',
+ '#9FE6B8',
+ '#FFDB5C',
+ '#ff9f7f',
+ '#fb7293',
+ '#E062AE',
+ '#E690D1',
+ '#e7bcf3',
+ '#9d96f5',
+ '#8378EA',
+ '#96BFFF'
+ ]
+ // ...
+ }
+ ]
+};
```
-## 直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...
+## Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)
-直接的样式设置是比较常用设置方式。纵观 ECharts 的 [option](${optionPath}) 中，很多地方可以设置 [itemStyle](${optionPath}#series-bar.itemStyle)、[lineStyle](${optionPath}#series-line.lineStyle)、[areaStyle](${optionPath}#series-line.areaStyle)、[label](${optionPath}#series-bar.label) 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
+It is a common way to set style explicitly. Throughout ECharts [option](${optionPath}), style related options can be set in various place, including [itemStyle](${optionPath}series.itemStyle), [lineStyle](${optionPath}series-line.lineStyle), [areaStyle](${optionPath}series-line.areaStyle), [label](${optionPath}series.label), etc.
-一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，`itemStyle`、`label` 等可能出现在不同的地方。
+Generally speaking, all of the built-in components and series follow the naming convention like `itemStyle`, `lineStyle`, `areaStyle`, `label` etc, although they may occur in different place according to different series or components.
-在下面例子中我们给气泡图设置了阴影，渐变色等复杂的样式，你可以修改代码中的样式看修改后的效果：
+In the following code we add shadow, gradient to bubble chart.
```js [live]
var data = [
@@ -243,35 +278,35 @@ option = {
};
```
-## 高亮的样式：emphasis
+## Style of Emphasis State
-在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 [emphasis](${optionPath}#series-bar.emphasis) 属性来定制。[emphsis](${optionPath}#series-bar.emphasis) 中的结构，和普通样式的结构相同，例如：
+When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by [emphasis](${optionPath}series-bar.emphasis) property. The options in [emphasis](${optionPath}series-bar.emphasis) is the same as the ones for normal state, for example:
```js
option = {
series: {
type: 'scatter',
- // 普通样式。
+ // Styles for normal state.
itemStyle: {
- // 点的颜色。
+ // Color of the point.
color: 'red'
},
label: {
show: true,
- // 标签的文字。
+ // Text of labels.
formatter: 'This is a normal label.'
},
- // 高亮样式。
+ // Styles for emphasis state.
emphasis: {
itemStyle: {
- // 高亮时点的颜色。
+ // Color in emphasis state.
color: 'blue'
},
label: {
show: true,
- // 高亮时标签的文字。
+ // Text in emphasis.
formatter: 'This is a emphasis label.'
}
}
@@ -279,7 +314,7 @@ option = {
};
```
-注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：
+Notice: Before ECharts4, the emphasis style should be written like this:
```js
option = {
@@ -287,29 +322,25 @@ option = {
type: 'scatter',
itemStyle: {
- // 普通样式。
+ // Styles for normal state.
normal: {
- // 点的颜色。
color: 'red'
},
- // 高亮样式。
+ // Styles for emphasis state.
emphasis: {
- // 高亮时点的颜色。
color: 'blue'
}
},
label: {
- // 普通样式。
+ // Styles for normal state.
normal: {
show: true,
- // 标签的文字。
formatter: 'This is a normal label.'
},
- // 高亮样式。
+ // Styles for emphasis state.
emphasis: {
show: true,
- // 高亮时标签的文字。
formatter: 'This is a emphasis label.'
}
}
@@ -317,8 +348,8 @@ option = {
};
```
-这种写法 **仍然被兼容**，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 `normal` 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。
+The option format is still **compatible**, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.
-## 通过 visualMap 组件设定样式
+## Visual Encoding by visualMap Component
-[visualMap 组件](${optionPath}#visualMap) 能指定数据到颜色、图形尺寸的映射规则，详见 [数据的视觉映射](${lang}/concepts/visual-map)。
+[visualMap component](${optionPath}visualMap) supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in [Visual Map of Data](~Visual%20Map%20of%20Data).
diff --git a/contents/zh/concepts/dataset.md b/contents/zh/concepts/dataset.md
index c741c67..c218fbf 100644
--- a/contents/zh/concepts/dataset.md
+++ b/contents/zh/concepts/dataset.md
@@ -161,16 +161,16 @@ option = {
var option1 = {
dataset: {
dimensions: [
- {name: 'score'},
+ { name: 'score' },
// 可以简写为 string ，表示 dimension name 。
'amount',
// 可以在 type 中指定维度类型。
- {name: 'product', type: 'ordinal'}
+ { name: 'product', type: 'ordinal' }
],
source: [
//...
]
- },
+ }
// ...
};
@@ -186,9 +186,9 @@ var option2 = {
dimensions: [
null, // 可以设置为 null 表示不想设置维度名
'amount',
- {name: 'product', type: 'ordinal'}
+ { name: 'product', type: 'ordinal' }
]
- },
+ }
// ...
};
```
@@ -207,7 +207,7 @@ var option2 = {
了解了维度的概念后，我们就可以使用 [series.encode](${optionPath}#series.encode) 来做映射。总体是这样的感觉：
-```js
+```js [live]
var option = {
dataset: {
source: [
@@ -239,8 +239,6 @@ var option = {
};
```
-[这个例子](${exampleEditorPath}dataset-encode-simple0&edit=1&reset=1) 里是上面设置的效果。
-
`series.encode` 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称，如 `'x'`, `'y'`, `'tooltip'` 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。
下面是 `series.encode` 支持的属性：
@@ -353,13 +351,15 @@ series: {
答：
```js
-series: {
- encode: {
- tooltip: [1, 2]
+option = {
+ series: {
+ encode: {
+ tooltip: [1, 2]
+ // ...
+ }
// ...
}
- // ...
-}
+};
```
问：数据里没有维度名，那么怎么给出维度名？
@@ -377,14 +377,14 @@ var option = {
[85.4, 829]
]
}
-}
+};
```
问：如何把第三列映射为气泡图的点的大小？
答：
-```js
+```js [live]
var option = {
dataset: {
source: [
@@ -459,24 +459,31 @@ dataset: [
```js
var option = {
- dataset: [{
- // 序号为 0 的 dataset。
- source: []
- }, {
- // 序号为 1 的 dataset。
- source: []
- }, {
- // 序号为 2 的 dataset。
- source: []
- }],
- series: [{
- // 使用序号为 2 的 dataset。
- datasetIndex: 2
- }, {
- // 使用序号为 1 的 dataset。
- datasetIndex: 1
- }]
-}
+ dataset: [
+ {
+ // 序号为 0 的 dataset。
+ source: []
+ },
+ {
+ // 序号为 1 的 dataset。
+ source: []
+ },
+ {
+ // 序号为 2 的 dataset。
+ source: []
+ }
+ ],
+ series: [
+ {
+ // 使用序号为 2 的 dataset。
+ datasetIndex: 2
+ },
+ {
+ // 使用序号为 1 的 dataset。
+ datasetIndex: 1
+ }
+ ]
+};
```
## ECharts 3 的数据设置方式（series.data）仍正常使用
@@ -490,20 +497,24 @@ option = {
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {},
- series: [{
- type: 'bar',
- name: '2015',
- data: [89.3, 92.1, 94.4, 85.4]
- }, {
- type: 'bar',
- name: '2016',
- data: [95.8, 89.4, 91.2, 76.9]
- }, {
- type: 'bar',
- name: '2017',
- data: [97.7, 83.1, 92.5, 78.1]
- }]
-}
+ series: [
+ {
+ type: 'bar',
+ name: '2015',
+ data: [89.3, 92.1, 94.4, 85.4]
+ },
+ {
+ type: 'bar',
+ name: '2016',
+ data: [95.8, 89.4, 91.2, 76.9]
+ },
+ {
+ type: 'bar',
+ name: '2017',
+ data: [97.7, 83.1, 92.5, 78.1]
+ }
+ ]
+};
```
其实，[series.data](${optionPath}#series.data) 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 [treemap](${optionPath}#series-treemap)、[graph](${optionPath}#series-graph)、[lines](${optionPath}#series-lines) 等，现在仍不支持在 dataset 中设置，仍然需要使用 [series.data](${optionPath}#series.data)。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 [appendData](api.html#echartsInstance.appendData) 进行增量加载，这种情况不支持使用 `dataset`。
diff --git a/contents/zh/concepts/style.md b/contents/zh/concepts/style.md
index f086e56..0463637 100644
--- a/contents/zh/concepts/style.md
+++ b/contents/zh/concepts/style.md
@@ -13,15 +13,9 @@
## 颜色主题（Theme）
-最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 [示例集合](${websitePath}/examples) 中，可以选择 “Theme”，直接看到采用主题的效果。
+最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 [示例集合](${websitePath}/examples) 中，可以通过切换深色模式，直接看到采用主题的效果。
-ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 `'light'` 和 `'dark'`。可以这么来使用它们：
-
-```js
-var chart = echarts.init(dom, 'light');
-```
-
-或者
+ECharts5 除了一贯的默认主题外，还内置了`'dark'`主题。可以如下切换成深色模式：
```js
var chart = echarts.init(dom, 'dark');
@@ -54,26 +48,67 @@ var chart = echarts.init(dom, 'vintage');
```js
option = {
- // 全局调色盘。
- color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
-
- series: [{
- type: 'bar',
- // 此系列自己的调色盘。
- color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
- ...
- }, {
- type: 'pie',
- // 此系列自己的调色盘。
- color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
- ...
- }]
-}
+ // 全局调色盘。
+ color: [
+ '#c23531',
+ '#2f4554',
+ '#61a0a8',
+ '#d48265',
+ '#91c7ae',
+ '#749f83',
+ '#ca8622',
+ '#bda29a',
+ '#6e7074',
+ '#546570',
+ '#c4ccd3'
+ ],
+
+ series: [
+ {
+ type: 'bar',
+ // 此系列自己的调色盘。
+ color: [
+ '#dd6b66',
+ '#759aa0',
+ '#e69d87',
+ '#8dc1a9',
+ '#ea7e53',
+ '#eedd78',
+ '#73a373',
+ '#73b9bc',
+ '#7289ab',
+ '#91ca8c',
+ '#f49f42'
+ ]
+ // ...
+ },
+ {
+ type: 'pie',
+ // 此系列自己的调色盘。
+ color: [
+ '#37A2DA',
+ '#32C5E9',
+ '#67E0E3',
+ '#9FE6B8',
+ '#FFDB5C',
+ '#ff9f7f',
+ '#fb7293',
+ '#E062AE',
+ '#E690D1',
+ '#e7bcf3',
+ '#9d96f5',
+ '#8378EA',
+ '#96BFFF'
+ ]
+ // ...
+ }
+ ]
+};
```
## 直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...
-直接的样式设置是比较常用设置方式。纵观 ECharts 的 [option](${optionPath}) 中，很多地方可以设置 [itemStyle](${optionPath}#series-bar.itemStyle)、[lineStyle](${optionPath}#series-line.lineStyle)、[areaStyle](${optionPath}#series-line.areaStyle)、[label](${optionPath}#series-bar.label) 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
+直接的样式设置是比较常用设置方式。纵观 ECharts 的 [option](${optionPath}) 中，很多地方可以设置 [itemStyle](${optionPath}series-bar.itemStyle)、[lineStyle](${optionPath}series-line.lineStyle)、[areaStyle](${optionPath}series-line.areaStyle)、[label](${optionPath}series-bar.label) 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，`itemStyle`、`label` 等可能出现在不同的地方。
@@ -245,7 +280,7 @@ option = {
## 高亮的样式：emphasis
-在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 [emphasis](${optionPath}#series-bar.emphasis) 属性来定制。[emphsis](${optionPath}#series-bar.emphasis) 中的结构，和普通样式的结构相同，例如：
+在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 [emphasis](${optionPath}series-bar.emphasis) 属性来定制。[emphsis](${optionPath}series-bar.emphasis) 中的结构，和普通样式的结构相同，例如：
```js
option = {
@@ -321,4 +356,4 @@ option = {
## 通过 visualMap 组件设定样式
-[visualMap 组件](${optionPath}#visualMap) 能指定数据到颜色、图形尺寸的映射规则，详见 [数据的视觉映射](${lang}/concepts/visual-map)。
+[visualMap 组件](${optionPath}visualMap) 能指定数据到颜色、图形尺寸的映射规则，详见 [数据的视觉映射](${lang}/concepts/visual-map)。
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org