提交 ba6b8a64 编写于 作者: O Ovilia

update doc and example

上级 7bcb07a4
......@@ -32,9 +32,13 @@ You may download the lastest ECharts files on [ECharts official site](http://ech
## Notes
### Omitted `normal`
Since [ECharts v4.0.0]((https://github.com/ecomfe/echarts/releases/tag/4.0.0)), `normal` is no longer needed for `itemStyle` or `label`.
### Flatten `textStyle`
From [ECharts v3.7.0](https://github.com/ecomfe/echarts/releases/tag/3.7.0), `textStyle` option is flatten, so that `series.label[normal|emphasis].textStyle.xxx` is now can be written in `series.label[normal|emphasis].textStyle`. This is supported from [echarts-liquidfill](https://github.com/ecomfe/echarts-liquidfill/releases/tag/v1.0.6) v1.0.6. So if you found examples with `textStyle` in old demo, don't be too surprised.
Since [ECharts v3.7.0](https://github.com/ecomfe/echarts/releases/tag/3.7.0), `textStyle` option is flatten, so that `series.label[normal|emphasis].textStyle.xxx` is now can be written in `series.label[normal|emphasis].textStyle`. This is supported from [echarts-liquidfill](https://github.com/ecomfe/echarts-liquidfill/releases/tag/v1.0.6) v1.0.6. So if you found examples with `textStyle` in old demo, don't be too surprised.
......@@ -105,7 +109,7 @@ This creates a chart wit waves at position of 60%, 50%, 40%, and 30%.
### Color and Opacity
To set colors for liquid fill chart series, set `color` to be an array of colors. To set opacity, use `itemStyle.normal.opacity` and `itemStyle.emphasis.opacity` for normal style and hover style.
To set colors for liquid fill chart series, set `color` to be an array of colors. To set opacity, use `itemStyle.opacity` and `itemStyle.emphasis.opacity` for normal style and hover style.
```js
var option = {
......@@ -114,10 +118,10 @@ var option = {
data: [0.5, 0.4, 0.3],
color: ['red', '#0f0', 'rgb(0, 0, 255)'],
itemStyle: {
normal: {
opacity: 0.6
},
emphasis: {
},
emphasis: {
itemStyle: {
opacity: 0.9
}
}
......@@ -138,11 +142,11 @@ var option = {
data: [0.5, 0.4, {
value: 0.3,
itemStyle: {
normal: {
color: 'red',
opacity: 0.6
},
emphasis: {
color: 'red',
opacity: 0.6
},
emphasis: {
itemStyle: {
opacity: 0.9
}
}
......@@ -210,9 +214,7 @@ var option = {
value: 0.5,
direction: 'left',
itemStyle: {
normal: {
color: 'red'
}
color: 'red'
}
}, 0.4, 0.3]
}]
......@@ -322,14 +324,12 @@ var option = {
},
shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',
label: {
normal: {
position: ['38%', '40%'],
formatter: function() {
return 'ECharts\nLiquid Fill';
},
fontSize: 40,
color: '#D94854'
}
position: ['38%', '40%'],
formatter: function() {
return 'ECharts\nLiquid Fill';
},
fontSize: 40,
color: '#D94854'
}
}]
};
......@@ -379,7 +379,7 @@ setTimeout(function () {
By default, the text label of liquid fill chart displays percentage of the first data. For example, for a chart with data `[0.6, 0.5, 0.4, 0.3]`, default text is `60%`.
To change the text, you may use `label.normal.formatter`, which can be set to a string or function.
To change the text, you may use `label.formatter`, which can be set to a string or function.
If it is a string, `{a}` refers to series name, `{b}` to data name, and `{c}` to data value.
......@@ -393,10 +393,8 @@ var option = {
value: 0.6
}, 0.5, 0.4, 0.3],
label: {
normal: {
formatter: '{a}\n{b}\nValue: {c}',
fontSize: 28
}
formatter: '{a}\n{b}\nValue: {c}',
fontSize: 28
}
}]
};
......@@ -420,14 +418,12 @@ var option = {
value: 0.6
}, 0.5, 0.4, 0.3],
label: {
normal: {
formatter: function(param) {
return param.seriesName + '\n'
+ param.name + '\n'
+ 'Value:' + param.value;
},
fontSize: 28
}
formatter: function(param) {
return param.seriesName + '\n'
+ param.name + '\n'
+ 'Value:' + param.value;
},
fontSize: 28
}
}]
};
......@@ -435,7 +431,7 @@ var option = {
[Run](http://gallery.echartsjs.com/editor.html?c=xHk5831cHg)
Text position is at the center by default. `label.normal.position` can be set to be `'inside'`, `'left'`, `'right'`, `'top'`, `'bottom'`, or horizontal and vertical positions like `['10%', '20%']`, which means `'10%'` to the left (controlled by `label.normal.align`, which can be `'left'`, `'center'`, or `'right'`) and `'20%'` to the top (controlled by `label.normal.baseline`, which can be `'top'`, `'middle'`, or `'bottom'`).
Text position is at the center by default. `label.position` can be set to be `'inside'`, `'left'`, `'right'`, `'top'`, `'bottom'`, or horizontal and vertical positions like `['10%', '20%']`, which means `'10%'` to the left (controlled by `label.align`, which can be `'left'`, `'center'`, or `'right'`) and `'20%'` to the top (controlled by `label.baseline`, which can be `'top'`, `'middle'`, or `'bottom'`).
### Shadow
......@@ -448,9 +444,7 @@ var option = {
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
itemStyle: {
normal: {
shadowBlur: 0
}
shadowBlur: 0
},
outline: {
borderDistance: 0,
......@@ -568,27 +562,26 @@ Default option for liquid fill charts are:
},
itemStyle: {
normal: {
opacity: 0.95,
shadowBlur: 50,
shadowColor: 'rgba(0, 0, 0, 0.4)'
},
emphasis: {
opacity: 0.8
}
opacity: 0.95,
shadowBlur: 50,
shadowColor: 'rgba(0, 0, 0, 0.4)'
},
label: {
normal: {
show: true,
color: '#294D99',
insideColor: '#fff',
fontSize: 50,
fontWeight: 'bold',
align: 'center',
baseline: 'middle'
position: 'inside'
show: true,
color: '#294D99',
insideColor: '#fff',
fontSize: 50,
fontWeight: 'bold',
align: 'center',
baseline: 'middle'
position: 'inside'
},
emphasis: {
itemStyle: {
opacity: 0.8
}
}
}
......@@ -608,9 +601,7 @@ var option = {
data: [0.6, {
value: 0.5,
itemStyle: {
normal: {
color: 'red'
}
color: 'red'
}
}, 0.4, 0.3]
}]
......@@ -761,62 +752,62 @@ Background shadow color.
Background opacity.
### itemStyle.normal.opacity {number}
### itemStyle.opacity {number}
Wave opacity.
### itemStyle.normal.shadowBlur {number}
### itemStyle.shadowBlur {number}
Wave shadow width.
### itemStyle.normal.shadowColor {string}
### itemStyle.shadowColor {string}
Wave shadow color.
### itemStyle.emphasis.opacity {number}
### emphasis.itemStyle.opacity {number}
Wave opacity when hover.
### label.normal.show {boolean}
### label.show {boolean}
Whether to display label text.
### label.normal.color {string}
### label.color {string}
Color of text when display on background.
### label.normal.insideColor {string}
### label.insideColor {string}
Color of text when display on wave.
### label.normal.fontSize {number}
### label.fontSize {number}
Label font size.
### label.normal.fontWeight {string}
### label.fontWeight {string}
Label font weight.
### label.normal.align {string}
### label.align {string}
Text align, which should be `'left'`, `'center'`, or `'right'`.
### label.normal.baseline {string}
### label.baseline {string}
Text vertical align, which should be `'top'`, `'middle'`, or `'bottom'`.
### label.normal.position {string|string[]}
### label.position {string|string[]}
Text position is at the center by default. `label.position` can be set to be `'inside'`, `'left'`, `'right'`, `'top'`, `'bottom'`, or horizontal and vertical positions like `['10%', '20%']`, which means `'10%'` to the left and `'20%'` to the top.
......
......@@ -136,18 +136,14 @@
},
shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',
label: {
normal: {
position: ['38%', '40%'],
formatter: function () {
return 'ECharts\nLiquid Fill';
},
textStyle: {
fontSize: 40,
fontFamily: 'Lobster Two',
color: '#D94854',
insideColor: bgColor
}
}
position: ['38%', '40%'],
formatter: function () {
return 'ECharts\nLiquid Fill';
},
fontSize: 40,
fontFamily: 'Lobster Two',
color: '#D94854',
insideColor: bgColor
}
}]
}, {
......@@ -223,12 +219,10 @@
data: [1, 0.9, 0.8, 0.7],
radius: '70%',
label: {
normal: {
formatter: 'I\'m full.',
textStyle: {
fontSize: 35,
fontFamily: 'Lobster Two'
}
formatter: 'I\'m full.',
textStyle: {
fontSize: 35,
fontFamily: 'Lobster Two'
}
}
}]
......@@ -238,15 +232,11 @@
data: [0, 0, 0, 0],
radius: '70%',
label: {
normal: {
formatter: 'I\'m empty.',
textStyle: {
fontSize: 25,
fontFamily: 'Lobster Two',
baseline: 'bottom'
},
position: ['50%', '86%']
}
formatter: 'I\'m empty.',
fontSize: 25,
fontFamily: 'Lobster Two',
baseline: 'bottom',
position: ['50%', '86%']
}
}]
}, {
......@@ -280,9 +270,7 @@
},
shape: 'triangle',
label: {
normal: {
position: ['50%', '65%']
}
position: ['50%', '65%']
}
}]
}, {
......@@ -291,9 +279,7 @@
data: [0.6, 0.5, 0.4, 0.3],
radius: '90%',
itemStyle: {
normal: {
shadowBlur: 0
}
shadowBlur: 0
},
backgroundStyle: {
borderWidth: 2,
......@@ -303,10 +289,8 @@
show: false
},
label: {
normal: {
shadowBlur: 0,
position: ['50%', '45%']
}
shadowBlur: 0,
position: ['50%', '45%']
},
shape: 'pin',
center: ['50%', '40%']
......@@ -345,11 +329,7 @@
option: {
series: [{
label: {
normal: {
textStyle: {
fontSize: 26
}
}
fontSize: 26
}
}]
}
......
{
"name": "echarts-liquidfill",
"version": "1.1.1",
"version": "2.0.0",
"description": "ECharts liquid fill extension",
"main": "index.js",
"author": {
......@@ -10,8 +10,8 @@
},
"license": "BSD",
"dependencies": {
"echarts": ">=3.8.2",
"zrender": ">=3.7.2"
"echarts": "^4.0.2",
"zrender": "^4.0.1"
},
"repository": {
"type": "git",
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册