提交 3411723c 编写于 作者: O Ovilia

Merge branch 'master' of github.com:ecomfe/echarts-liquidfill

......@@ -268,7 +268,11 @@ var option = {
### Shape
Shape of water fill chart. It can be one of the default symbols: `'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`. Or, an SVG path starting with `'path://'`.
Shape of water fill chart. It can be:
- one of the default symbols: `'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`;
- `'container'`: a shape that fully fills the container.
- an SVG path starting with `'path://'`.
```js
var options = [{
......@@ -284,6 +288,23 @@ var options = [{
[Run](http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe)
```
option = {
series: [{
type: 'liquidFill',
data: [0.5, 0.4, 0.3, 0.2],
shape: 'container',
outline: {
show: false
}
}]
};
```
![Fill the container](http://g.recordit.co/iuMJckv5lB.gif)
[Run](http://gallery.echartsjs.com/editor.html?c=xrko4E9zKb&v=1)
```js
var option = {
series: [{
......
......@@ -14816,16 +14816,50 @@ return /******/ (function(modules) { // webpackBootstrap
if (showOutline) {
outlineDistance = seriesModel.get('outline.borderDistance');
outlineBorderWidth = parsePercent(seriesModel.get('outline.itemStyle.borderWidth'), size);
outlineBorderWidth = parsePercent(
seriesModel.get('outline.itemStyle.borderWidth'), size
);
}
var cx = parsePercent(center[0], width);
var cy = parsePercent(center[1], height);
var outterRadius = parsePercent(radius, size) / 2;
var innerRadius = outterRadius - outlineBorderWidth / 2;
var paddingRadius = parsePercent(outlineDistance, size);
var wavePath = null;
var outterRadius;
var innerRadius;
var paddingRadius;
var isFillContainer = false;
var symbol = seriesModel.get('shape');
if (symbol === 'container') {
// a shape that fully fills the container
isFillContainer = true;
outterRadius = [
width / 2,
height / 2
];
innerRadius = [
outterRadius[0] - outlineBorderWidth / 2,
outterRadius[1] - outlineBorderWidth / 2
];
paddingRadius = [
parsePercent(outlineDistance, width),
parsePercent(outlineDistance, height)
];
radius = [
innerRadius[0] - paddingRadius[0],
innerRadius[1] - paddingRadius[1]
];
}
else {
outterRadius = parsePercent(radius, size) / 2;
innerRadius = outterRadius - outlineBorderWidth / 2;
paddingRadius = parsePercent(outlineDistance, size);
radius = innerRadius - paddingRadius;
}
if (showOutline) {
var outline = getOutline();
......@@ -14833,9 +14867,10 @@ return /******/ (function(modules) { // webpackBootstrap
group.add(getOutline());
}
radius = innerRadius - paddingRadius;
var left = cx - radius;
var top = cy - radius;
var left = isFillContainer ? 0 : cx - radius;
var top = isFillContainer ? 0 : cy - radius;
var wavePath = null;
group.add(getBackground());
......@@ -14847,7 +14882,7 @@ return /******/ (function(modules) { // webpackBootstrap
var wave = getWave(idx, false);
var waterLevel = wave.shape.waterLevel;
wave.shape.waterLevel = radius;
wave.shape.waterLevel = isFillContainer ? radius[1] : radius;
echarts.graphic.initProps(wave, {
shape: {
waterLevel: waterLevel
......@@ -14898,37 +14933,48 @@ return /******/ (function(modules) { // webpackBootstrap
/**
* Get path for outline, background and clipping
*
* @param {number} r outter radius of shape
* @param {boolean|undefined} isForClipping if the shape is used
* for clipping
*/
function getPath(r, isForClipping) {
var symbol = seriesModel.get('shape');
if (symbol) {
// customed symbol path
if (symbol.indexOf('path://') === 0) {
var path = echarts.graphic.makePath(symbol.slice(7), {});
var bouding = path.getBoundingRect();
var width = bouding.width;
var height = bouding.height;
if (width > height) {
height = r * 2 / width * height;
width = r * 2;
var w = bouding.width;
var h = bouding.height;
if (w > h) {
h = r * 2 / w * h;
w = r * 2;
}
else {
width = r * 2 / height * width;
height = r * 2;
w = r * 2 / h * w;
h = r * 2;
}
var left = isForClipping ? 0 : cx - width / 2;
var top = isForClipping ? 0 : cy - height / 2;
var left = isForClipping ? 0 : cx - w / 2;
var top = isForClipping ? 0 : cy - h / 2;
path = echarts.graphic.makePath(
symbol.slice(7),
{},
new echarts.graphic.BoundingRect(left, top, width, height)
new echarts.graphic.BoundingRect(left, top, w, h)
);
if (isForClipping) {
path.position = [-width / 2, -height / 2];
path.position = [-w / 2, -h / 2];
}
return path;
}
else if (isFillContainer) {
// fully fill the container
var x = isForClipping ? -r[0] : cx - r[0];
var y = isForClipping ? -r[1] : cy - r[1];
return symbolUtil.createSymbol(
'rect', x, y, r[0] * 2, r[1] * 2
);
}
else {
var x = isForClipping ? -r : cx - r;
var y = isForClipping ? -r : cy - r;
......@@ -14992,26 +15038,29 @@ return /******/ (function(modules) { // webpackBootstrap
* wave shape
*/
function getWave(idx, isInverse, oldWave) {
var radiusX = isFillContainer ? radius[0] : radius;
var radiusY = isFillContainer ? radius[1] : radius;
var itemModel = data.getItemModel(idx);
var itemStyleModel = itemModel.getModel('itemStyle');
var phase = itemModel.get('phase');
var amplitude = parsePercent(itemModel.get('amplitude'),
radius * 2);
radiusY * 2);
var waveLength = parsePercent(itemModel.get('waveLength'),
radius * 2);
radiusX * 2);
var value = data.get('value', idx);
var waterLevel = radius - value * radius * 2;
var waterLevel = radiusY - value * radiusY * 2;
phase = oldWave ? oldWave.shape.phase
: (phase === 'auto' ? idx * Math.PI / 4 : phase);
var normalStyle = itemStyleModel.getModel('normal').getItemStyle();
normalStyle.fill = data.getItemVisual(idx, 'color');
var x = radius * 2;
var x = radiusX * 2;
var wave = new LiquidLayout({
shape: {
waveLength: waveLength,
radius: radius,
radius: radiusX,
cx: x,
cy: 0,
waterLevel: waterLevel,
......@@ -15124,8 +15173,8 @@ return /******/ (function(modules) { // webpackBootstrap
shape: {
x: left,
y: top,
width: radius * 2,
height: radius * 2
width: (isFillContainer ? radius[0] : radius) * 2,
height: (isFillContainer ? radius[1] : radius) * 2
},
style: {
fill: 'transparent',
......@@ -15560,9 +15609,15 @@ return /******/ (function(modules) { // webpackBootstrap
},
buildPath: function (ctx, shape) {
var curves = Math.ceil(2 * shape.radius / shape.waveLength * 4) * 2;
var controls = [[0, 0]];
var positions = [];
/**
* We define a sine wave having 4 waves, and make sure at least 8 curves
* is drawn. Otherwise, it may cause blank area for some waves when
* wave length is large enough.
*/
var curves = Math.max(
Math.ceil(2 * shape.radius / shape.waveLength * 4) * 2,
8
);
// map phase to [-Math.PI * 2, 0]
while (shape.phase < -Math.PI * 2) {
......@@ -15594,7 +15649,6 @@ return /******/ (function(modules) { // webpackBootstrap
* | |
* +------+
*/
var waveLeft = 0;
var waveRight = 0;
for (var c = 0; c < curves; ++c) {
var stage = c % 4;
......
此差异已折叠。
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:700i" rel="stylesheet">
<script src='../dist/echarts-3.7.0.js'></script>
<script src='../dist/echarts-liquidfill.js'></script>
</head>
<body>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
background: #F1F7FF;
}
#main {
padding: 20px;
}
h1 {
margin: 20px;
font-size: 20px;
font-weight: bold;
text-align: center;
color: #D94854;
}
.chart {
width: 80%;
margin: 20px auto;
height: 300px;
border: 1px solid #D94854;
}
p {
text-align: center;
}
</style>
<h1>ECharts LiquidFill Example</h1>
<p>This is an example showing liquidFill chart that fills the container.</p>
<div id='main'>
<div class="chart"></div>
<div class="chart"></div>
</div>
<script>
var bgColor = '#E3F7FF';
var containers = document.getElementsByClassName('chart');
var options = [{
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
outline: {
show: false
},
shape: 'container'
}]
}, {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
amplitude: '10%',
waveLength: '200%',
shape: 'container'
}]
}];
var charts = [];
for (var i = 0; i < options.length; ++i) {
var chart = echarts.init(containers[i]);
chart.setOption(options[i]);
charts.push(chart);
}
window.onresize = function () {
for (var i = 0; i < charts.length; ++i) {
charts[i].resize();
}
};
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement('script');
hm.src = '//hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
{
"name": "echarts-liquidfill",
"version": "1.0.8",
"version": "1.1.0",
"description": "ECharts liquid fill extension",
"main": "index.js",
"author": {
......
......@@ -19,9 +19,15 @@ module.exports = echarts.graphic.extendShape({
},
buildPath: function (ctx, shape) {
var curves = Math.ceil(2 * shape.radius / shape.waveLength * 4) * 2;
var controls = [[0, 0]];
var positions = [];
/**
* We define a sine wave having 4 waves, and make sure at least 8 curves
* is drawn. Otherwise, it may cause blank area for some waves when
* wave length is large enough.
*/
var curves = Math.max(
Math.ceil(2 * shape.radius / shape.waveLength * 4) * 2,
8
);
// map phase to [-Math.PI * 2, 0]
while (shape.phase < -Math.PI * 2) {
......@@ -53,7 +59,6 @@ module.exports = echarts.graphic.extendShape({
* | |
* +------+
*/
var waveLeft = 0;
var waveRight = 0;
for (var c = 0; c < curves; ++c) {
var stage = c % 4;
......
......@@ -34,16 +34,50 @@ echarts.extendChartView({
if (showOutline) {
outlineDistance = seriesModel.get('outline.borderDistance');
outlineBorderWidth = parsePercent(seriesModel.get('outline.itemStyle.borderWidth'), size);
outlineBorderWidth = parsePercent(
seriesModel.get('outline.itemStyle.borderWidth'), size
);
}
var cx = parsePercent(center[0], width);
var cy = parsePercent(center[1], height);
var outterRadius = parsePercent(radius, size) / 2;
var innerRadius = outterRadius - outlineBorderWidth / 2;
var paddingRadius = parsePercent(outlineDistance, size);
var wavePath = null;
var outterRadius;
var innerRadius;
var paddingRadius;
var isFillContainer = false;
var symbol = seriesModel.get('shape');
if (symbol === 'container') {
// a shape that fully fills the container
isFillContainer = true;
outterRadius = [
width / 2,
height / 2
];
innerRadius = [
outterRadius[0] - outlineBorderWidth / 2,
outterRadius[1] - outlineBorderWidth / 2
];
paddingRadius = [
parsePercent(outlineDistance, width),
parsePercent(outlineDistance, height)
];
radius = [
innerRadius[0] - paddingRadius[0],
innerRadius[1] - paddingRadius[1]
];
}
else {
outterRadius = parsePercent(radius, size) / 2;
innerRadius = outterRadius - outlineBorderWidth / 2;
paddingRadius = parsePercent(outlineDistance, size);
radius = innerRadius - paddingRadius;
}
if (showOutline) {
var outline = getOutline();
......@@ -51,9 +85,10 @@ echarts.extendChartView({
group.add(getOutline());
}
radius = innerRadius - paddingRadius;
var left = cx - radius;
var top = cy - radius;
var left = isFillContainer ? 0 : cx - radius;
var top = isFillContainer ? 0 : cy - radius;
var wavePath = null;
group.add(getBackground());
......@@ -65,7 +100,7 @@ echarts.extendChartView({
var wave = getWave(idx, false);
var waterLevel = wave.shape.waterLevel;
wave.shape.waterLevel = radius;
wave.shape.waterLevel = isFillContainer ? radius[1] : radius;
echarts.graphic.initProps(wave, {
shape: {
waterLevel: waterLevel
......@@ -116,37 +151,48 @@ echarts.extendChartView({
/**
* Get path for outline, background and clipping
*
* @param {number} r outter radius of shape
* @param {boolean|undefined} isForClipping if the shape is used
* for clipping
*/
function getPath(r, isForClipping) {
var symbol = seriesModel.get('shape');
if (symbol) {
// customed symbol path
if (symbol.indexOf('path://') === 0) {
var path = echarts.graphic.makePath(symbol.slice(7), {});
var bouding = path.getBoundingRect();
var width = bouding.width;
var height = bouding.height;
if (width > height) {
height = r * 2 / width * height;
width = r * 2;
var w = bouding.width;
var h = bouding.height;
if (w > h) {
h = r * 2 / w * h;
w = r * 2;
}
else {
width = r * 2 / height * width;
height = r * 2;
w = r * 2 / h * w;
h = r * 2;
}
var left = isForClipping ? 0 : cx - width / 2;
var top = isForClipping ? 0 : cy - height / 2;
var left = isForClipping ? 0 : cx - w / 2;
var top = isForClipping ? 0 : cy - h / 2;
path = echarts.graphic.makePath(
symbol.slice(7),
{},
new echarts.graphic.BoundingRect(left, top, width, height)
new echarts.graphic.BoundingRect(left, top, w, h)
);
if (isForClipping) {
path.position = [-width / 2, -height / 2];
path.position = [-w / 2, -h / 2];
}
return path;
}
else if (isFillContainer) {
// fully fill the container
var x = isForClipping ? -r[0] : cx - r[0];
var y = isForClipping ? -r[1] : cy - r[1];
return symbolUtil.createSymbol(
'rect', x, y, r[0] * 2, r[1] * 2
);
}
else {
var x = isForClipping ? -r : cx - r;
var y = isForClipping ? -r : cy - r;
......@@ -210,26 +256,29 @@ echarts.extendChartView({
* wave shape
*/
function getWave(idx, isInverse, oldWave) {
var radiusX = isFillContainer ? radius[0] : radius;
var radiusY = isFillContainer ? radius[1] : radius;
var itemModel = data.getItemModel(idx);
var itemStyleModel = itemModel.getModel('itemStyle');
var phase = itemModel.get('phase');
var amplitude = parsePercent(itemModel.get('amplitude'),
radius * 2);
radiusY * 2);
var waveLength = parsePercent(itemModel.get('waveLength'),
radius * 2);
radiusX * 2);
var value = data.get('value', idx);
var waterLevel = radius - value * radius * 2;
var waterLevel = radiusY - value * radiusY * 2;
phase = oldWave ? oldWave.shape.phase
: (phase === 'auto' ? idx * Math.PI / 4 : phase);
var normalStyle = itemStyleModel.getModel('normal').getItemStyle();
normalStyle.fill = data.getItemVisual(idx, 'color');
var x = radius * 2;
var x = radiusX * 2;
var wave = new LiquidLayout({
shape: {
waveLength: waveLength,
radius: radius,
radius: radiusX,
cx: x,
cy: 0,
waterLevel: waterLevel,
......@@ -342,8 +391,8 @@ echarts.extendChartView({
shape: {
x: left,
y: top,
width: radius * 2,
height: radius * 2
width: (isFillContainer ? radius[0] : radius) * 2,
height: (isFillContainer ? radius[1] : radius) * 2
},
style: {
fill: 'transparent',
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册