Skip to content

I
incubator-echarts

missman / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 f5e167fd 编写于 作者: P pah100
浏览文件
操作

update datarange ends text, and support map

上级 4ed7308e
隐藏空白更改
内联 并排
Showing with 594 addition and 57 deletion
src/component/dataRange/ContinuousView.js
浏览文件 @ f5e167fd
......@@ -7,6 +7,7 @@ define(function(require) {
var modelUtil = require('../../util/model');
var linearMap = numberUtil.linearMap;
var LinearGradient = require('zrender/graphic/LinearGradient');
var each = zrUtil.each;
// Notice:
// Any "interval" should be by the order of [low, high].
......@@ -73,19 +74,53 @@ define(function(require) {
this._resetInterval();
var itemSize = dataRangeModel.itemSize;
dataRangeText && this.renderEndsText(thisGroup, dataRangeText[0], itemSize);
this._renderBar(thisGroup, !dataRangeText);
dataRangeText && this.renderEndsText(thisGroup, dataRangeText[1], itemSize);
dataRangeText && this._renderEndsText(thisGroup, dataRangeText, 0);
dataRangeText && this._renderEndsText(thisGroup, dataRangeText, 1);
this.renderBackground(thisGroup);
this.positionGroup(thisGroup);
},
/**
* @private
*/
_renderEndsText: function (group, dataRangeText, endsIndex) {
var text = dataRangeText[endsIndex];
text = text != null ? text + '' : '';
var dataRangeModel = this.dataRangeModel;
var textGap = dataRangeModel.get('textGap');
var itemSize = dataRangeModel.itemSize;
var barGroup = this._shapes.barGroup;
var position = this._applyTransform(
[
itemSize[0] / 2,
endsIndex === 0 ? -textGap : itemSize[1] + textGap
],
barGroup
);
var align = this._applyTransform(
endsIndex === 0 ? 'bottom' : 'top',
barGroup
);
var orient = this._orient;
this.group.add(new graphic.Text({
style: {
x: position[0],
y: position[1],
textBaseline: orient === 'horizontal' ? 'middle' : align,
textAlign: orient === 'horizontal' ? align : 'center',
text: text,
font: this.dataRangeModel.textStyleModel.getFont()
}
}));
},
/**
* @private
*/
......@@ -156,16 +191,11 @@ define(function(require) {
: (handleIndex === 0 ? -textSize / 2 : textSize / 2)
};
var directionH = this._applyBarTransform([0, handleIndex === 0 ? -1 : 1]);
var handleLabel = new graphic.Text({
silent: true,
style: {
x: 0, y: 0, text: '',
textBaseline: 'middle',
textAlign: orient === 'horizontal'
? (directionH[0] > 0 ? 'left' : 'right')
: (itemAlign === 'right' ? 'left' : 'right'),
font: this.dataRangeModel.textStyleModel.getFont()
}
});
......@@ -186,7 +216,7 @@ define(function(require) {
*/
_modifyHandle: function (handleIndex, dx, dy) {
// Transform dx, dy to bar coordination.
var vertex = this._applyBarTransform([dx, dy], true);
var vertex = this._applyTransform([dx, dy], this._shapes.barGroup, true);
this._updateInterval(handleIndex, vertex[1]);
this.api.dispatch({
......@@ -279,17 +309,29 @@ define(function(require) {
.setStyle('fill', visualOutOfRange.barColor)
.setShape('points', visualOutOfRange.barPoints);
var handleThumbs = shapes.handleThumbs;
if (handleThumbs) {
handleThumbs[0].setStyle('fill', visualInRange.handlesColor[0]);
handleThumbs[1].setStyle('fill', visualInRange.handlesColor[1]);
}
each([0, 1], function (handleIndex) {
var handleLabels = shapes.handleLabels;
if (handleLabels) {
handleLabels[0].setStyle('text', dataRangeModel.formatValueText(dataInterval[0]));
handleLabels[1].setStyle('text', dataRangeModel.formatValueText(dataInterval[1]));
}
var handleThumbs = shapes.handleThumbs;
if (handleThumbs) {
handleThumbs[handleIndex].setStyle(
'fill', visualInRange.handlesColor[handleIndex]
);
}
var handleLabels = shapes.handleLabels;
if (handleLabels) {
handleLabels[handleIndex].setStyle({
text: dataRangeModel.formatValueText(dataInterval[handleIndex]),
textAlign: this._applyTransform(
this._orient === 'horizontal'
? (handleIndex === 0 ? 'bottom' : 'top')
: 'left',
shapes.barGroup
)
});
}
}, this);
this._updateHandlePosition(visualInRange.handleEnds);
},
......@@ -309,7 +351,7 @@ define(function(require) {
var colorStops = [];
var handles = [];
zrUtil.each(dataInterval, function (value, index) {
each(dataInterval, function (value, index) {
colorStops.push({offset: index, color: visuals[index].color});
handles.push(visuals[index].color);
});
......@@ -363,9 +405,14 @@ define(function(require) {
*/
_updateHandlePosition: function (handleEnds) {
var shapes = this._shapes;
var handleGroups = shapes.handleGroups;
zrUtil.each([0, 1], function (handleIndex) {
var handleGroup = shapes.handleGroups[handleIndex];
if (!handleGroups) {
return;
}
each([0, 1], function (handleIndex) {
var handleGroup = handleGroups[handleIndex];
handleGroup.position[1] = handleEnds[handleIndex];
// Update handle label location
......@@ -384,9 +431,13 @@ define(function(require) {
/**
* @private
*/
_applyBarTransform: function (vertex, inverse) {
var barTransform = this._shapes.barGroup.getLocalTransform();
return modelUtil.applyTransform(vertex, barTransform, inverse);
_applyTransform: function (vertex, element, inverse) {
var transform = modelUtil.getTransform(element, this.group);
return modelUtil[
zrUtil.isArray(vertex)
? 'applyTransform' : 'transformDirection'
](vertex, transform, inverse);
}
});
......
src/component/dataRange/DataRangeModel.js
浏览文件 @ f5e167fd
......@@ -43,7 +43,7 @@ define(function(require) {
min: -Infinity, // 最小值，如果不指定，则是所控制的series的最小值，兼容ec2而保留，不推荐指定
max: Infinity, // 最大值，如果不指定，则是所控制的series的最大值，兼容ec2而保留，不推荐指定
dimension: 'z',
dimension: null,
inRange: null, // 'color', 'colorH', 'colorS', 'colorL', 'colorA',
// 'symbol', 'symbolSize'
......@@ -213,7 +213,7 @@ define(function(require) {
// FIXME
// 这里可能应该这么判断：data.dimensions中有超出其所属coordSystem的量。
if (data.type === 'list' && data.dimensions.length > 2) {
if (data.type === 'list') {
thisOption.seriesIndex.push(index);
}
});
......@@ -231,7 +231,7 @@ define(function(require) {
// FIXME
// 只考虑了list
if (data.type === 'list') {
var oneExtent = data.getDataExtent(thisOption.dimension);
var oneExtent = data.getDataExtent(this.getDataDimension(data));
oneExtent[0] < dataExtent[0] && (dataExtent[0] = oneExtent[0]);
oneExtent[1] > dataExtent[1] && (dataExtent[1] = oneExtent[1]);
}
......@@ -243,6 +243,18 @@ define(function(require) {
extent[1] = Math.min(extent[1], dataExtent[1]);
this._dataExtent = extent;
},
/**
* @protected
*/
getDataDimension: function (list) {
var optDim = this.option.dimension;
return optDim != null
? optDim
: list.dimensions[list.dimensions.length - 1]
},
/**
......
src/component/dataRange/DataRangeView.js
浏览文件 @ f5e167fd
......@@ -82,28 +82,6 @@ define(function (require) {
}));
},
/**
* @protected
*/
renderEndsText: function (group, text, itemSize) {
if (!text) {
return;
}
var itemGroup = new graphic.Group();
itemGroup.add(new graphic.Text({
style: {
x: itemSize[0] / 2,
y: itemSize[1] / 2,
textBaseline: 'middle',
textAlign: 'center',
text: text,
font: this.dataRangeModel.textStyleModel.getFont()
}
}));
group.add(itemGroup);
},
/**
* @protected
*/
......
src/component/dataRange/PiecewiseView.js
浏览文件 @ f5e167fd
......@@ -30,11 +30,11 @@ define(function(require) {
var itemAlign = this.getItemAlignByOrient('horizontal', ecWidth);
var itemSize = dataRangeModel.itemSize;
showEndsText && this.renderEndsText(thisGroup, dataRangeText[0], itemSize);
showEndsText && this._renderEndsText(thisGroup, dataRangeText[0], itemSize);
zrUtil.each(this._getViewPieceList(), renderItem, this);
showEndsText && this.renderEndsText(thisGroup, dataRangeText[1], itemSize);
showEndsText && this._renderEndsText(thisGroup, dataRangeText[1], itemSize);
layout.box(
dataRangeModel.get('orient'), thisGroup, dataRangeModel.get('itemGap')
......@@ -67,6 +67,28 @@ define(function(require) {
}
},
/**
* @private
*/
_renderEndsText: function (group, text, itemSize) {
if (!text) {
return;
}
var itemGroup = new graphic.Group();
itemGroup.add(new graphic.Text({
style: {
x: itemSize[0] / 2,
y: itemSize[1] / 2,
textBaseline: 'middle',
textAlign: 'center',
text: text,
font: this.dataRangeModel.textStyleModel.getFont()
}
}));
group.add(itemGroup);
},
/**
* @private
*/
......
src/component/dataZoom/DataZoomModel.js
浏览文件 @ f5e167fd
......@@ -48,8 +48,8 @@ define(function(require) {
start2: 0, // 默认为0
end2: 100, // 默认为全部 100%
realtime: true,
inverse: false // 默认与所控制的轴相同
// zoomLock: false // 是否锁定选择区域大小
inverse: false, // 默认与所控制的轴相同
zoomLock: false // 是否锁定选择区域大小
},
/**
......
test/dataRange-scatter-layout1-text.html 0 → 100644
浏览文件 @ f5e167fd
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/scatter',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/dataRangePiecewise'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var data1 = [];
var data2 = [];
var data3 = [];
var symbolCount = 6;
// for (var i = 0; i < 100; i++) {
// data1.push([
// Math.random() * 5, Math.random() * 4, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data2.push([
// Math.random() * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// }
for (var i = 0; i < 5; i++) {
data1.push([
i * 5, i * 4, i * 20,
i * 123
]);
// data2.push([
// i * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
}
chart.setOption({
legend: {
y: 50,
data: ['scatter', 'scatter2', 'scatter3']
},
grid: {
y: '26%',
y2: '26%'
},
xAxis: {
type: 'value',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
dataRange: [
{
show: true,
splitNumber: 7,
// selectedMode: 'single',
selectedMode: 'multiple',
text: ['高', '低'],
backgroundColor: '#eee',
padding: [10, 30, 5, 40],
visualSelected: {
data: ['red', 'pink']
}
},
{
show: true,
splitList: [
{min: 10, max: 15, color: 'green'},
{min: 15, max: 25, visualValue: 'blue'},
{min: 25, max: 35},
{min: 35, max: 55},
{min: 55}
],
x: 200,
// selectedMode: 'single',
selectedMode: 'multiple',
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
data: ['red', 'pink']
}
},
{
splitNumber: 5,
x: 'right',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 'a',
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'symbol',
data: ['roundRect', 'rect', 'diamond', 'line', 'circle']
}
},
{
splitNumber: 6,
y: 'top',
x: 'left',
orient: 'horizontal',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 'a',
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'colorS'
}
},
{
splitNumber: 5,
y: 20,
x: 'right',
orient: 'horizontal',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 'a',
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'colorL'
}
},
{
splitNumber: 6,
y: 40,
orient: 'horizontal',
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 'a',
text: ['高', '低'],
backgroundColor: '#eee',
visualSelected: {
type: 'colorA'
}
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data3
}
]
});
})
</script>
</body>
</html>
\ No newline at end of file
test/dataRange-scatter-layout2-text.html 0 → 100644
浏览文件 @ f5e167fd
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/scatter',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/dataRangeContinuous'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var data1 = [];
var data2 = [];
var data3 = [];
var symbolCount = 6;
// for (var i = 0; i < 100; i++) {
// data1.push([
// Math.random() * 5, Math.random() * 4, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data2.push([
// Math.random() * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// }
for (var i = 0; i < 5; i++) {
data1.push([
i * 5, i * 4, i * 20,
i * 123
]);
// data2.push([
// i * 10, Math.random() * 5, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
// data3.push([
// Math.random() * 15, Math.random() * 10, Math.random() * 20,
// Math.round(Math.random() * (symbolCount - 1))
// ]);
}
chart.setOption({
legend: {
y: 50,
data: ['scatter', 'scatter2', 'scatter3']
},
grid: {
y: '26%',
y2: '26%'
},
xAxis: {
type: 'value',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
dataRange: [
{
show: true,
splitNumber: 7,
// selectedMode: 'single',
selectedMode: 'multiple',
text: ['高', '低'],
backgroundColor: '#eee',
padding: [10, 30, 5, 40],
calculable: true,
inRange: {
color: ['red', 'pink']
}
},
{
x: 200,
show: true,
splitList: [
{min: 10, max: 15, color: 'green'},
{min: 15, max: 25, visualValue: 'blue'},
{min: 25, max: 35},
{min: 35, max: 55},
{min: 55}
],
inverse: true,
text: ['高', '低'],
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
backgroundColor: '#eee',
inRange: {
color: ['red', 'pink']
}
},
{
x: 'right',
splitNumber: 5,
text: ['高', '低'],
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 'a',
backgroundColor: '#eee',
inRange: {
color: ['red', 'pink']
}
},
{
x: 'left',
y: 'top',
orient: 'horizontal',
text: ['高', '低'],
splitNumber: 6,
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
inverse: true,
dimension: 'a',
backgroundColor: '#eee',
inRange: 'colorS'
},
{
x: 'right',
y: 20,
orient: 'horizontal',
text: ['高', '低'],
splitNumber: 5,
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 'a',
backgroundColor: '#eee',
inRange: 'colorL'
},
{
y: 40,
splitNumber: 6,
orient: 'horizontal',
text: ['高', '低'],
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 'a',
backgroundColor: '#eee',
inRange: 'colorA'
},
{
x: 'center',
y: 'bottom',
orient: 'horizontal',
splitNumber: 6,
text: ['高', '低'],
calculable: true,
// selectedMode: 'single',
selectedMode: 'multiple',
dimension: 'a',
backgroundColor: '#eee',
inRange: 'colorA'
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
symbolSize: function (val) {
return val[2] * 2;
},
data: data3
}
]
});
})
</script>
</body>
</html>
\ No newline at end of file
test/map.html
浏览文件 @ f5e167fd
......@@ -27,7 +27,7 @@
'echarts/chart/map',
'echarts/component/geo',
// 'echarts/component/dataRange'
'echarts/component/dataRange'
], function (echarts, chinaJson) {
echarts.registerMap('china', chinaJson);
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或