未验证 提交 4023cfa8 编写于 作者: O Ovilia 提交者: GitHub

feat(bar): bar background #11405 (#11951)

上级 02115782
......@@ -57,6 +57,20 @@ export default BaseBarSeries.extend({
// If use caps on two sides of bars
// Only available on tangential polar bar
roundCap: false
roundCap: false,
showBackground: false,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)',
borderColor: null,
borderWidth: 0,
borderType: 'solid',
borderRadius: 0,
shadowBlur: 0,
shadowColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
}
}
});
......@@ -25,6 +25,7 @@ import {setLabel} from './helper';
import Model from '../../model/Model';
import barItemStyle from './barItemStyle';
import Path from 'zrender/src/graphic/Path';
import Group from 'zrender/src/container/Group';
import {throttle} from '../../util/throttle';
import {createClipPath} from '../helper/createClipPathFromCoordSys';
import Sausage from '../../util/shape/sausage';
......@@ -127,15 +128,27 @@ export default echarts.extendChartView({
var roundCap = seriesModel.get('roundCap', true);
var drawBackground = seriesModel.get('showBackground', true);
var backgroundModel = seriesModel.getModel('backgroundStyle');
var bgEls = [];
var oldBgEls = this._backgroundEls || [];
data.diff(oldData)
.add(function (dataIndex) {
var itemModel = data.getItemModel(dataIndex);
var layout = getLayout[coord.type](data, dataIndex, itemModel);
if (drawBackground) {
var bgEl = createBackgroundEl(coord, isHorizontalOrRadial, layout);
bgEl.useStyle(backgroundModel.getBarItemStyle());
bgEls[dataIndex] = bgEl;
}
if (!data.hasValue(dataIndex)) {
return;
}
var itemModel = data.getItemModel(dataIndex);
var layout = getLayout[coord.type](data, dataIndex, itemModel);
if (needsClip) {
// Clip will modify the layout params.
// And return a boolean to determine if the shape are fully clipped.
......@@ -158,16 +171,24 @@ export default echarts.extendChartView({
);
})
.update(function (newIndex, oldIndex) {
var el = oldData.getItemGraphicEl(oldIndex);
var itemModel = data.getItemModel(newIndex);
var layout = getLayout[coord.type](data, newIndex, itemModel);
if (drawBackground) {
var bgEl = oldBgEls[oldIndex];
bgEl.useStyle(backgroundModel.getBarItemStyle());
bgEls[newIndex] = bgEl;
var shape = createBackgroundShape(isHorizontalOrRadial, layout, coord);
graphic.updateProps(bgEl, { shape: shape }, animationModel, newIndex);
}
var el = oldData.getItemGraphicEl(oldIndex);
if (!data.hasValue(newIndex)) {
group.remove(el);
return;
}
var itemModel = data.getItemModel(newIndex);
var layout = getLayout[coord.type](data, newIndex, itemModel);
if (needsClip) {
var isClipped = clip[coord.type](coordSysClipArea, layout);
if (isClipped) {
......@@ -205,6 +226,15 @@ export default echarts.extendChartView({
})
.execute();
var bgGroup = this._backgroundGroup || (this._backgroundGroup = new Group());
bgGroup.removeAll();
for (var i = 0; i < bgEls.length; ++i) {
bgGroup.add(bgEls[i]);
}
group.add(bgGroup);
this._backgroundEls = bgEls;
this._data = data;
},
......@@ -225,6 +255,7 @@ export default echarts.extendChartView({
},
_incrementalRenderLarge: function (params, seriesModel) {
this._removeBackground();
createLarge(seriesModel, this.group, true);
},
......@@ -238,6 +269,9 @@ export default echarts.extendChartView({
var group = this.group;
var data = this._data;
if (ecModel && ecModel.get('animation') && data && !this._isLargeDraw) {
this._removeBackground();
this._backgroundEls = [];
data.eachItemGraphicEl(function (el) {
if (el.type === 'sector') {
removeSector(el.dataIndex, ecModel, el);
......@@ -251,6 +285,11 @@ export default echarts.extendChartView({
group.removeAll();
}
this._data = null;
},
_removeBackground: function () {
this.group.remove(this._backgroundGroup);
this._backgroundGroup = null;
}
});
......@@ -308,7 +347,12 @@ var elementCreator = {
dataIndex, layout, isHorizontal,
animationModel, isUpdate
) {
var rect = new graphic.Rect({shape: zrUtil.extend({}, layout)});
var rect = new graphic.Rect({
shape: zrUtil.extend({}, layout),
z2: 1
});
rect.name = 'item';
// Animation
if (animationModel) {
......@@ -338,9 +382,12 @@ var elementCreator = {
var ShapeClass = (!isRadial && roundCap) ? Sausage : graphic.Sector;
var sector = new ShapeClass({
shape: zrUtil.defaults({clockwise: clockwise}, layout)
shape: zrUtil.defaults({clockwise: clockwise}, layout),
z2: 1
});
sector.name = 'item';
// Animation
if (animationModel) {
var sectorShape = sector.shape;
......@@ -460,7 +507,10 @@ function updateStyle(
// In case width or height are too small.
function getLineWidth(itemModel, rawLayout) {
var lineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
return Math.min(lineWidth, Math.abs(rawLayout.width), Math.abs(rawLayout.height));
// width or height may be NaN for empty data
var width = isNaN(rawLayout.width) ? Number.MAX_VALUE : Math.abs(rawLayout.width);
var height = isNaN(rawLayout.height) ? Number.MAX_VALUE : Math.abs(rawLayout.height);
return Math.min(lineWidth, width, height);
}
......@@ -492,13 +542,38 @@ function createLarge(seriesModel, group, incremental) {
var baseDimIdx = data.getLayout('valueAxisHorizontal') ? 1 : 0;
startPoint[1 - baseDimIdx] = data.getLayout('valueAxisStart');
var largeDataIndices = data.getLayout('largeDataIndices');
var barWidth = data.getLayout('barWidth');
var backgroundModel = seriesModel.getModel('backgroundStyle');
var drawBackground = seriesModel.get('showBackground', true);
if (drawBackground) {
var points = data.getLayout('largeBackgroundPoints');
var backgroundStartPoint = [];
backgroundStartPoint[1 - baseDimIdx] = data.getLayout('backgroundStart');
var bgEl = new LargePath({
shape: {points: points},
incremental: !!incremental,
__startPoint: backgroundStartPoint,
__baseDimIdx: baseDimIdx,
__largeDataIndices: largeDataIndices,
__barWidth: barWidth,
silent: true,
z2: 0
});
setLargeBackgroundStyle(bgEl, backgroundModel, data);
group.add(bgEl);
}
var el = new LargePath({
shape: {points: data.getLayout('largePoints')},
incremental: !!incremental,
__startPoint: startPoint,
__baseDimIdx: baseDimIdx,
__largeDataIndices: data.getLayout('largeDataIndices'),
__barWidth: data.getLayout('barWidth')
__largeDataIndices: largeDataIndices,
__barWidth: barWidth
});
group.add(el);
setLargeStyle(el, seriesModel, data);
......@@ -563,3 +638,51 @@ function setLargeStyle(el, seriesModel, data) {
el.style.lineWidth = data.getLayout('barWidth');
}
function setLargeBackgroundStyle(el, backgroundModel, data) {
var borderColor = backgroundModel.get('borderColor') || backgroundModel.get('color');
var itemStyle = backgroundModel.getItemStyle(['color', 'borderColor']);
el.useStyle(itemStyle);
el.style.fill = null;
el.style.stroke = borderColor;
el.style.lineWidth = data.getLayout('barWidth');
}
function createBackgroundShape(isHorizontalOrRadial, layout, coord) {
var coordLayout;
var isPolar = coord.type === 'polar';
if (isPolar) {
coordLayout = coord.getArea();
}
else {
coordLayout = coord.grid.getRect();
}
if (isPolar) {
return {
cx: coordLayout.cx,
cy: coordLayout.cy,
r0: isHorizontalOrRadial ? coordLayout.r0 : layout.r0,
r: isHorizontalOrRadial ? coordLayout.r : layout.r,
startAngle: isHorizontalOrRadial ? layout.startAngle : 0,
endAngle: isHorizontalOrRadial ? layout.endAngle : Math.PI * 2
};
}
else {
return {
x: isHorizontalOrRadial ? layout.x : coordLayout.x,
y: isHorizontalOrRadial ? coordLayout.y : layout.y,
width: isHorizontalOrRadial ? layout.width : coordLayout.width,
height: isHorizontalOrRadial ? coordLayout.height : layout.height
};
}
}
function createBackgroundEl(coord, isHorizontalOrRadial, layout) {
var ElementClz = coord.type === 'polar' ? graphic.Sector : graphic.Rect;
return new ElementClz({
shape: createBackgroundShape(isHorizontalOrRadial, layout, coord),
silent: true,
z2: 0
});
}
......@@ -420,11 +420,6 @@ export function layout(seriesType, ecModel) {
var value = data.get(valueDim, idx);
var baseValue = data.get(baseDim, idx);
// If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
if (isNaN(value) || isNaN(baseValue)) {
continue;
}
var sign = value >= 0 ? 'p' : 'n';
var baseCoord = valueAxisStart;
......@@ -498,6 +493,7 @@ export var largeLayout = {
var data = seriesModel.getData();
var cartesian = seriesModel.coordinateSystem;
var coordLayout = cartesian.grid.getRect();
var baseAxis = cartesian.getBaseAxis();
var valueAxis = cartesian.getOtherAxis(baseAxis);
var valueDim = data.mapDimension(valueAxis.dim);
......@@ -517,6 +513,7 @@ export var largeLayout = {
function progress(params, data) {
var count = params.count;
var largePoints = new LargeArr(count * 2);
var largeBackgroundPoints = new LargeArr(count * 2);
var largeDataIndices = new LargeArr(count);
var dataIndex;
var coord = [];
......@@ -530,7 +527,9 @@ export var largeLayout = {
coord = cartesian.dataToPoint(valuePair, null, coord);
// Data index might not be in order, depends on `progressiveChunkMode`.
largeBackgroundPoints[pointsOffset] = valueAxisHorizontal ? coordLayout.x + coordLayout.width : coord[0];
largePoints[pointsOffset++] = coord[0];
largeBackgroundPoints[pointsOffset] = valueAxisHorizontal ? coord[1] : coordLayout.y + coordLayout.height;
largePoints[pointsOffset++] = coord[1];
largeDataIndices[idxOffset++] = dataIndex;
}
......@@ -538,8 +537,10 @@ export var largeLayout = {
data.setLayout({
largePoints: largePoints,
largeDataIndices: largeDataIndices,
largeBackgroundPoints: largeBackgroundPoints,
barWidth: barWidth,
valueAxisStart: getValueAxisStart(baseAxis, valueAxis, false),
backgroundStart: valueAxisHorizontal ? coordLayout.x : coordLayout.y,
valueAxisHorizontal: valueAxisHorizontal
});
}
......
......@@ -88,10 +88,6 @@ function barLayoutPolar(seriesType, ecModel, api) {
var value = data.get(valueDim, idx);
var baseValue = data.get(baseDim, idx);
if (isNaN(value)) {
continue;
}
var sign = value >= 0 ? 'p' : 'n';
var baseCoord = valueAxisStart;
......
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<script src="lib/testHelper.js"></script>
<link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
}
#main {
background: #fff;
}
</style>
<div id="main0"></div>
<div id="main1"></div>
<div id="main2"></div>
<div id="main3"></div>
<div id="main4"></div>
<div id="main5"></div>
<div id="main6"></div>
<script>
require([
'echarts'
], function (echarts) {
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push('类目' + i);
data1.push((Math.random() * 5).toFixed(2));
data2.push(Math.random().toFixed(2));
data3.push((Math.random() + 0.5).toFixed(2));
data4.push((Math.random() + 0.3).toFixed(2));
}
var data = [["4.70","4.69","2.48","0.77","3.08","4.57","2.68","3.35","0.37","1.86","2.68","0.64","1.82","1.88","0.31","0.45","4.48","3.08","1.58","2.98","1.87","0.96","3.43","2.58","0.41","2.69","0.59","3.47","4.33","1.75","0.51","1.01","1.60","3.62","2.29","2.40","1.52","2.30","0.18","3.99","0.26","2.92","2.94","0.54","2.98","3.71","2.24","0.32","1.98","2.56","1.81","4.67","2.49","1.73","1.79","2.79","3.39","1.83","3.24","3.76","1.23","1.69","3.55","2.66","1.83","3.69","2.70","0.75","0.71","1.44","3.23","1.49","1.50","3.61","4.41","1.26","2.93","2.84","4.11","0.80","2.67","2.59","2.71","4.85","1.28","1.21","4.32","4.04","1.15","4.38","4.41","4.94","4.13","0.86","1.97","3.58","3.02","1.29","1.47","3.75"],["0.78","0.90","0.54","0.75","0.68","0.68","0.84","0.87","0.78","0.79","0.77","0.34","0.81","0.80","0.28","0.87","0.98","0.92","0.66","0.87","0.88","0.56","0.34","0.67","0.60","0.00","0.22","0.87","0.81","0.69","0.41","0.02","0.18","0.55","0.48","0.90","0.62","0.17","0.37","0.35","0.31","0.78","0.34","0.56","0.22","0.87","0.55","0.94","0.58","0.66","0.33","0.73","0.78","0.44","0.79","0.12","0.81","0.77","0.33","0.30","0.86","0.87","0.09","0.91","0.90","0.34","0.76","0.93","0.55","0.41","0.63","0.96","0.80","0.41","0.53","0.53","0.66","0.24","0.24","0.99","0.92","0.85","0.44","0.92","0.28","0.61","0.20","0.74","0.52","0.91","0.42","0.08","0.00","0.57","0.81","0.39","0.41","0.72","0.02","0.20"],["1.17","0.65","0.98","1.08","1.02","1.41","1.01","1.17","0.63","0.94","0.78","1.43","0.67","1.09","1.29","0.60","0.50","1.38","0.76","0.94","0.79","1.44","0.55","1.48","1.13","0.63","1.07","0.57","1.43","0.81","0.87","0.70","1.04","1.43","1.00","0.50","0.54","0.57","0.97","0.58","1.19","0.73","0.76","0.75","1.39","0.93","0.60","1.28","1.14","1.18","0.60","0.59","1.46","0.64","1.44","0.59","1.49","0.84","0.71","1.44","1.11","1.18","1.40","0.64","1.15","1.07","1.35","0.86","1.13","1.41","1.03","0.57","1.44","0.93","1.47","1.16","1.40","1.14","0.97","0.78","1.49","0.59","0.99","1.35","0.88","1.02","1.16","1.07","0.81","0.87","1.34","0.98","1.17","1.46","0.71","1.13","0.80","1.24","0.76","0.68"],["1.04","0.54","0.55","1.05","1.20","1.13","0.53","0.63","0.82","0.52","0.86","0.33","0.64","1.14","0.47","0.72","0.97","1.18","1.02","0.53","1.14","1.24","1.13","0.60","0.47","0.94","0.64","0.43","0.71","0.33","0.46","0.82","0.80","0.97","0.43","1.29","0.65","0.92","0.63","0.58","0.31","1.09","0.35","0.43","1.19","0.47","0.59","0.52","0.79","0.69","0.54","0.39","0.33","1.26","0.40","0.76","0.80","0.96","0.82","1.26","0.70","0.50","0.67","1.27","1.24","0.49","0.94","0.97","0.90","1.03","1.28","0.46","0.57","1.23","0.40","0.71","1.08","0.51","1.03","0.38","0.81","0.44","1.02","0.79","1.08","1.01","0.66","0.80","0.65","0.97","0.56","0.33","0.61","0.92","0.40","0.77","1.05","1.21","0.34","0.84"]];
var option = {
legend: {
data: ['bar', 'bar2', 'bar3', 'bar4'],
align: 'left'
},
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['line', 'bar', 'stack', 'tiled']
},
dataZoom: {
yAxisIndex: false
},
dataView: {},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {},
dataZoom: [{
startValue: 48,
endValue: 99,
type: 'inside'
}, {
startValue: 48,
endValue: 99,
type: 'slider'
}],
xAxis: {
data: xAxisData,
silent: false,
splitLine: {
show: false
},
splitArea: {
show: false
}
},
yAxis: {
splitArea: {
show: false
}
},
series: [{
name: 'bar',
type: 'bar',
stack: 'one',
data: data[0],
showBackground: true
}, {
show: false,
name: 'bar2',
type: 'bar',
stack: 'one',
data: data[1]
}, {
name: 'bar3',
type: 'bar',
stack: 'two',
data: data[2]
}, {
name: 'bar4',
type: 'bar',
stack: 'two',
data: data[3],
silent: true
}],
animationDelay: function (idx) {
return idx * 5;
},
animationDelayUpdate: function (idx) {
return idx * 5;
}
}
var chart = testHelper.create(echarts, 'main0', {
option: option,
});
chart.on('click', function (params) {
console.log(params);
});
});
</script>
<script>
require([
'echarts'/*, 'map/js/china' */
], function (echarts) {
var option = {
xAxis: [{
type: 'category'
}, {
gridIndex: 1
}],
yAxis: [{
}, {
type: 'category',
gridIndex: 1
}],
grid: [{
containLabel: true,
left: 10,
right: '55%'
}, {
containLabel: true,
left: '55%',
right: 10
}],
tooltip: {},
series: [{
type: 'bar',
large: true,
largeThreshold: 2,
data: [
['mm', 33],
['yy', -44],
['tt', 55],
['rr', 66]
],
showBackground: true,
backgroundStyle: {
color: 'rgba(0, 0, 255, 0.2)'
}
}, {
type: 'bar',
large: true,
largeThreshold: 2,
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 1,
y: 0
},
data: [
['mm', 33],
['yy', -44],
['tt', 55],
['rr', 66]
],
showBackground: true,
backgroundStyle: {
color: 'rgba(0, 0, 255, 0.2)'
}
}]
};
var chart = testHelper.create(echarts, 'main1', {
option: option,
title: [
'large mode'
]
});
});
</script>
<script>
require([
'echarts'/*, 'map/js/china' */
], function (echarts) {
var option = {
xAxis: [{
type: 'category'
}, {
gridIndex: 1
}],
yAxis: [{
}, {
type: 'category',
gridIndex: 1
}],
grid: [{
containLabel: true,
left: 10,
right: '55%'
}, {
containLabel: true,
left: '55%',
right: 10
}],
tooltip: {},
series: [{
type: 'bar',
data: [
['mm', 33],
['yy', -44],
['tt', 55],
['rr', 66]
],
showBackground: true,
backgroundStyle: {
color: 'rgba(0, 0, 255, 0.2)'
}
}, {
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 1,
y: 0
},
data: [
['mm', 33],
['yy', -44],
['tt', 55],
['rr', 66]
],
showBackground: true,
backgroundStyle: {
color: 'rgba(0, 0, 255, 0.2)'
}
}]
};
var chart = testHelper.create(echarts, 'main2', {
option: option,
title: [
'normal bars'
]
});
});
</script>
<script>
require([
'echarts'
// 'echarts/chart/bar',
// 'echarts/component/polar',
// 'zrender/vml/vml'
], function (echarts) {
var chart = echarts.init(document.getElementById('main3'));
var option = {
angleAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
z: 10
},
tooltip: {
},
radiusAxis: {
},
polar: {
center: ['50%', '50%']
},
series: [{
type: 'bar',
data: [1, 2, '-', 3, 0, 5, 7],
coordinateSystem: 'polar',
barMaxWidth: '50%',
barMinHeight: 10,
showBackground: true
}]
};
var chart = testHelper.create(echarts, 'main3', {
option: option,
title: [
'polar bars'
]
});
});
</script>
<script>
require([
'echarts'
// 'echarts/chart/bar',
// 'echarts/component/polar',
// 'zrender/vml/vml'
], function (echarts) {
var chart = echarts.init(document.getElementById('main4'));
var option = {
angleAxis: {
triggerEvent: true
},
radiusAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
z: 10,
triggerEvent: true
},
polar: {
},
tooltip: {},
series: [{
type: 'bar',
data: [1, '-', 4, 3, '-', 5, 7],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: '#00f'
}
},
barWidth: '50%',
showBackground: true
}]
};
var chart = testHelper.create(echarts, 'main4', {
option: option,
title: [
'polar bars'
]
});
});
</script>
<script>
require([
'echarts',
// 'echarts/chart/bar',
// 'echarts/component/legend',
// 'echarts/component/polar',
// 'zrender/vml/vml'
], function (echarts) {
var chart = echarts.init(document.getElementById('main5'));
var option = {
angleAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四'],
z: 10
},
radiusAxis: {
},
polar: {
},
series: [{
type: 'bar',
data: [1, 2, 3, 4],
coordinateSystem: 'polar',
name: 'A',
showBackground: true
}, {
type: 'bar',
data: [2, 4, 6, 8],
coordinateSystem: 'polar',
name: 'B'
}, {
type: 'bar',
data: [1, 2, 3, 4],
coordinateSystem: 'polar',
name: 'C'
}],
legend: {
show: true,
data: ['A', 'B', 'C']
}
};
var chart = testHelper.create(echarts, 'main5', {
option: option,
title: [
'polar bars'
]
});
});
</script>
<script>
require([
'echarts'
// 'echarts/chart/bar',
// 'echarts/component/legend',
// 'echarts/component/polar',
// 'echarts/component/grid',
// 'zrender/vml/vml'
], function (echarts) {
var chart = echarts.init(document.getElementById('main6'));
var option = {
angleAxis: {
// clockwise: false
},
radiusAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四'],
z: 10
},
polar: {
},
series: [{
type: 'bar',
data: [1, 2, 3, 4],
coordinateSystem: 'polar',
name: 'A',
showBackground: true
}, {
type: 'bar',
data: [2, 4, 6, 8],
coordinateSystem: 'polar',
name: 'B'
}, {
type: 'bar',
data: [1, 2, 3, 4],
coordinateSystem: 'polar',
name: 'C'
}],
legend: {
show: true,
data: ['A', 'B', 'C']
}
};
var chart = testHelper.create(echarts, 'main6', {
option: option,
title: [
'polar bars'
]
});
});
</script>
</body>
</html>
\ No newline at end of file
......@@ -63,7 +63,7 @@ under the License.
},
series: [{
type: 'bar',
data: [1, 2, 4, 3, 0, 5, 7],
data: [1, 2, '-', 3, 0, 5, 7],
coordinateSystem: 'polar',
barMaxWidth: '50%',
barMinHeight: 10
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册