Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
I
incubator-echarts

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

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

Fix axis label formatter param, funnel, examples.

上级 6bcea99b
隐藏空白更改
内联 并排
Showing with 279 addition and 79 deletion
src/chart/funnel/FunnelSeries.js
浏览文件 @ 26cd28ac
......@@ -41,10 +41,10 @@ define(function(require) {
labelLineEmphasisOpt.show = labelLineEmphasisOpt.show
&& option.label.emphasis.show;
},
// Overwrite
getDataParams: function (dataIndex) {
var data = this._data;
var data = this.getData();
var params = FunnelSeries.superCall(this, 'getDataParams', dataIndex);
var sum = data.getSum('value');
// Percent is 0 if sum is 0
......@@ -53,7 +53,7 @@ define(function(require) {
params.$vars.push('percent');
return params;
},
defaultOption: {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
......
src/component/axis/AxisBuilder.js
浏览文件 @ 26cd28ac
......@@ -298,13 +298,15 @@ define(function (require) {
textFont: itemTextStyleModel.getFont(),
fill: typeof textColor === 'function'
? textColor(
// Compatible with previous version, which always returns labelStr.
// (1) In category axis with data zoom, tick is not the original
// index of axis.data. So tick should not be exposed to user
// in category axis.
// (2) Compatible with previous version, which always returns labelStr.
// But in interval scale labelStr is like '223,445', which maked
// user repalce ','. So we modify it to return original val but remain
// it as 'string' to avoid error in replacing.
axis.type === 'category' ? labelStr : axis.type === 'value' ? tickVal + '' : tickVal,
index,
{value: tickVal, index: index, label: labelStr}
index
)
: textColor
},
......
src/component/axisPointer/BaseAxisPointer.js
浏览文件 @ 26cd28ac
......@@ -54,7 +54,7 @@ define(function(require) {
/**
* @private
*/
_handleTrans: null,
_payloadInfo: null,
/**
* In px, arbitrary value. Do not set too small,
......@@ -289,7 +289,7 @@ define(function(require) {
eventTool.stop(e.event);
},
onmousedown: zrUtil.bind(
this._onHandleMouseDown, this, axisModel, axisPointerModel, api, 0, 0
this._onHandleDragMove, this, axisModel, axisPointerModel, api, 0, 0
),
drift: zrUtil.bind(
this._onHandleDragMove, this, axisModel, axisPointerModel, api
......@@ -319,7 +319,7 @@ define(function(require) {
throttle.createOrUpdate(
this,
'_doMoveHandleOnDrag',
'_doDispatchAxisPointer',
handleModel.get('throttle') || 0,
'fixRate'
);
......@@ -335,18 +335,6 @@ define(function(require) {
updateProps(axisPointerModel, !isInit && moveAnimation, handle, getHandleTransProps(trans));
},
/**
* @private
*/
_onHandleMouseDown: function (axisModel, axisPointerModel, api) {
var handle = this._handle;
if (handle) {
this._handleTrans = getHandleTransProps(handle);
// Show tooltip.
this._onHandleDragMove(axisModel, axisPointerModel, api, 0, 0);
}
},
/**
* @private
*/
......@@ -359,36 +347,37 @@ define(function(require) {
this._dragging = true;
// Persistent for throttle.
this._handleTrans = this.updateHandleTransform(
getHandleTransProps(this._handleTrans),
var trans = this.updateHandleTransform(
getHandleTransProps(handle),
[dx, dy],
axisModel,
axisPointerModel
);
this._payloadInfo = trans;
this._doMoveHandleOnDrag(axisModel, api);
handle.stopAnimation();
handle.attr(getHandleTransProps(trans));
get(handle).lastProp = null;
this._doDispatchAxisPointer(axisModel, api);
},
/**
* Throttled method.
* @private
*/
_doMoveHandleOnDrag: function (axisModel, api) {
_doDispatchAxisPointer: function (axisModel, api) {
var handle = this._handle;
if (!handle) {
return;
}
var trans = this._handleTrans;
handle.stopAnimation();
handle.attr(getHandleTransProps(trans));
get(handle).lastProp = null;
var payloadInfo = this._payloadInfo;
var payload = {
type: 'updateAxisPointer',
x: trans.cursorPoint[0],
y: trans.cursorPoint[1],
tooltipOption: trans.tooltipOption,
x: payloadInfo.cursorPoint[0],
y: payloadInfo.cursorPoint[1],
tooltipOption: payloadInfo.tooltipOption,
highDownKey: 'axisPointerHandle'
};
var axis = axisModel.axis;
......@@ -454,7 +443,7 @@ define(function(require) {
handle && zr.remove(handle);
this._group = null;
this._handle = null;
this._handleTrans = null;
this._payloadInfo = null;
}
},
......
src/component/axisPointer/viewHelper.js
浏览文件 @ 26cd28ac
......@@ -6,6 +6,7 @@ define(function(require) {
var textContain = require('zrender/contain/text');
var formatUtil = require('../../util/format');
var matrix = require('zrender/core/matrix');
var axisHelper = require('../../coord/axisHelper');
var AxisBuilder = require('../axis/AxisBuilder');
var helper = {};
......@@ -95,14 +96,18 @@ define(function(require) {
}
helper.getValueLabel = function (value, axisModel, axisPointerModel) {
var text = axisModel.axis.scale.getLabel(
var axis = axisModel.axis;
var text = axis.scale.getLabel(
// Use 'pad' to try to fix width, which helps to debounce when when moving label.
value, {precision: axisPointerModel.get('label.precision'), pad: true}
);
var formatter = axisPointerModel.get('label.formatter');
if (formatter) {
var params = {value: value, seriesData: []};
var params = {
value: axisHelper.getAxisRawValue(axis, value),
seriesData: []
};
zrUtil.each(axisPointerModel.get('seriesDataIndices'), function (idxItem) {
var series = axisModel.ecModel.getSeriesByIndex(idxItem.seriesIndex);
var dataIndex = idxItem.dataIndexInside;
......@@ -111,9 +116,7 @@ define(function(require) {
});
if (zrUtil.isString(formatter)) {
text = formatter.replace('{value}', value);
// The same as tooltip content formatter.
text = formatUtil.formatTpl(text, params.seriesData);
text = formatter.replace('{value}', text);
}
else if (zrUtil.isFunction(formatter)) {
text = formatter(params);
......
src/component/dataZoom/AxisProxy.js
浏览文件 @ 26cd28ac
......@@ -355,7 +355,7 @@ define(function(require) {
dataExtent[0] = min;
}
else if (isCategoryAxis) {
dataExtent[0] = 0;
dataExtent[0] = axisDataLen > 0 ? 0 : NaN;
}
var max = axisModel.getMax(true);
......@@ -363,7 +363,7 @@ define(function(require) {
dataExtent[1] = max;
}
else if (isCategoryAxis) {
dataExtent[1] = Math.max(0, axisDataLen - 1);
dataExtent[1] = axisDataLen > 0 ? axisDataLen - 1 : NaN;
}
if (!axisModel.get('scale', true)) {
......
src/component/tooltip/TooltipView.js
浏览文件 @ 26cd28ac
......@@ -9,6 +9,7 @@ define(function (require) {
var env = require('zrender/core/env');
var Model = require('../../model/Model');
var globalListener = require('../axisPointer/globalListener');
var axisHelper = require('../../coord/axisHelper');
var bind = zrUtil.bind;
var each = zrUtil.each;
......@@ -281,6 +282,13 @@ define(function (require) {
var series = ecModel.getSeriesByIndex(idxItem.seriesIndex);
var dataIndex = idxItem.dataIndexInside;
var dataParams = series && series.getDataParams(dataIndex);
dataParams.axisDim = item.axisDim;
dataParams.axisIndex = item.axisIndex;
dataParams.axisType = item.axisType;
dataParams.axisId = item.axisId;
dataParams.axisValue = axisHelper.getAxisRawValue(axisModel.axis, axisValue);
dataParams.axisValueLabel = item.valueLabel;
if (dataParams) {
singleParamsList.push(dataParams);
seriesDefaultHTML.push(series.formatTooltip(dataIndex, true));
......
src/coord/axisDefault.js
浏览文件 @ 26cd28ac
......@@ -106,7 +106,7 @@ define(function (require) {
// 坐标轴小标记
axisTick: {
// If tick is align with label when boundaryGap is true
alignWithLabel: true,
alignWithLabel: false,
interval: 'auto'
},
// 坐标轴文本标签，详见axis.axisLabel
......
src/coord/axisHelper.js
浏览文件 @ 26cd28ac
......@@ -228,12 +228,9 @@ define(function (require) {
}
else if (typeof labelFormatter === 'function') {
return zrUtil.map(ticks, function (tick, idx) {
var labelStr = scale.getLabel(tick);
return labelFormatter(
// Have to be compatible with previous version.
axis.type === 'category' ? labelStr : tick,
idx,
{value: tick, index: idx, label: labelStr}
axisHelper.getAxisRawValue(axis, tick),
idx
);
}, this);
}
......@@ -242,5 +239,12 @@ define(function (require) {
}
};
axisHelper.getAxisRawValue = function (axis, value) {
// In category axis with data zoom, tick is not the original
// index of axis.data. So tick should not be exposed to user
// in category axis.
return axis.type === 'category' ? axis.scale.getLabel(value) : value;
};
return axisHelper;
});
\ No newline at end of file
src/util/model.js
浏览文件 @ 26cd28ac
......@@ -141,10 +141,6 @@ define(function(require) {
*/
getDataParams: function (dataIndex, dataType) {
var data = this.getData(dataType);
var seriesIndex = this.seriesIndex;
var seriesName = this.name;
var rawValue = this.getRawValue(dataIndex, dataType);
var rawDataIndex = data.getRawIndex(dataIndex);
var name = data.getName(dataIndex, true);
......@@ -154,8 +150,9 @@ define(function(require) {
componentType: this.mainType,
componentSubType: this.subType,
seriesType: this.mainType === 'series' ? this.subType : null,
seriesIndex: seriesIndex,
seriesName: seriesName,
seriesIndex: this.seriesIndex,
seriesId: this.id,
seriesName: this.name,
name: name,
dataIndex: rawDataIndex,
data: itemOpt,
......@@ -373,7 +370,7 @@ define(function(require) {
? opt.name + ''
: existCpt
? existCpt.name
: '\0-';
: '\0##';
if (existCpt) {
keyInfo.id = existCpt.id;
......
test/boxplot-multi.html
浏览文件 @ 26cd28ac
......@@ -90,10 +90,11 @@
data: ['category0', 'category1', 'category2', 'category3']
},
tooltip: {
trigger: 'item',
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
formatter: formatter
},
grid: {
left: '10%',
......@@ -124,34 +125,33 @@
{
name: 'category0',
type: 'boxplot',
data: data[0].boxData,
tooltip: {formatter: formatter}
data: data[0].boxData
},
{
name: 'category1',
type: 'boxplot',
data: data[1].boxData,
tooltip: {formatter: formatter}
data: data[1].boxData
},
{
name: 'category2',
type: 'boxplot',
data: data[2].boxData,
tooltip: {formatter: formatter}
data: data[2].boxData
}
]
});
}
function formatter(param) {
return [
'Experiment ' + param.name + ': ',
'upper: ' + param.data[0],
'Q1: ' + param.data[1],
'median: ' + param.data[2],
'Q3: ' + param.data[3],
'lower: ' + param.data[4]
].join('<br/>')
function formatter(params) {
return echarts.util.map(params, function (param) {
return [
'Experiment ' + param.name + ': ',
'upper: ' + param.data[0],
'Q1: ' + param.data[1],
'median: ' + param.data[2],
'Q3: ' + param.data[3],
'lower: ' + param.data[4]
].join('<br/>');
}).join('<br/><br/>');
}
......
test/dataZoom-rainfall-connect.html
浏览文件 @ 26cd28ac
......@@ -30,7 +30,9 @@
</style>
<div id="main"></div>
<div id="middle">
上面是降水量，下面是流量。这是两个echarts实例。
上面是降水量，下面是流量。这是三个echarts实例。<br>
三个都会 dataZoom 同步。<br>
前两个会 tooltip 同步，第三个不 tooltip 同步。
</div>
<div id="main2"></div>
<div id="main3"></div>
......
test/largeLine-tooltip.html 0 → 100644
浏览文件 @ 26cd28ac
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/dataZoom',
'echarts/component/tooltip'
], function (echarts) {
var myChart;
var lineCount = 1;
var pointCount = 60 * 10000;
var chart = echarts.init(document.getElementById('main'));
var option = {
tooltip : {
trigger: 'axis',
// showContent: false,
axisPointer: {
type: 'cross'
// animation: false
}
},
legend: {
data:[]
},
// dataZoom: [{
// show: true,
// realtime: true,
// // showDataShadow: false,
// start: 50,
// end: 60
// }],
xAxis : [
{
type : 'time'
}
],
yAxis : [
{
type : 'value'
}
],
series: [],
animation: false
};
var lineStyle = {
normal: {
width: 2,
opacity: 1
}
};
var date = [];
var oneDay = 24 * 3600 * 1000;
var base = +new Date(1897, 9, 3);
for (var j = 0; j < pointCount; j++) {
var now = new Date(base += oneDay);
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'));
}
for (var i = 0; i < lineCount; i++) {
var y = Math.random() * 1000;
var values = [];
for (var j = 0; j < pointCount; j++) {
y += Math.round(10 + Math.random() * (-10 - 10));
values.push(
[
date[j],
// Math.random() < 0.1 ? '-' : y
y
]
);
}
option.legend.data.push( 'line' + i );
option.series.push({
name: 'line' + i,
type: 'line',
sampling: 'average',
showAllSymbol: true,
symbol: 'emptyCircle',
// symbolSize: 0.1,
hoverAnimation: false,
// showSymbol: false,
data: values,
lineStyle: lineStyle
});
}
chart.setOption(option);
});
</script>
</body>
</html>
\ No newline at end of file
test/largeLine.html
浏览文件 @ 26cd28ac
......@@ -33,7 +33,6 @@
var option = {
tooltip : {
trigger: 'axis',
showContent: false,
axisPointer: {
animation: false
}
......
test/lazyUpdate.html
浏览文件 @ 26cd28ac
......@@ -29,7 +29,8 @@
'data/aqi/GZdata',
'data/aqi/SHdata',
'echarts',
'echarts/chart/scatter'
'echarts/chart/scatter',
'echarts/component/tooltip'
], function (dataBJ, dataGZ, dataSH, echarts) {
var chart = echarts.init(document.getElementById('main'));
......@@ -41,11 +42,38 @@
function update(isLazy) {
var idx = 0;
var axisPointerLinkList = [];
var axisPointerLinkMap = {};
for (var i = 1; i < dimSize; i++) {
for (var j = 1; j < dimSize; j++) {
var id = i + '-' + j;
var linkItem = axisPointerLinkMap['x' + i];
if (!linkItem) {
linkItem = axisPointerLinkMap['x' + i] = {xAxisId: []};
axisPointerLinkList.push(linkItem);
}
linkItem.xAxisId.push(id);
var linkItem = axisPointerLinkMap['y' + j];
if (!linkItem) {
linkItem = axisPointerLinkMap['y' + j] = {yAxisId: []};
axisPointerLinkList.push(linkItem);
}
linkItem.yAxisId.push(id);
chart.setOption({
tooltip: {
trigger: 'none'
},
axisPointer: {
show: true,
snap: true,
lineStyle: {
type: 'dashed'
},
link: axisPointerLinkList
},
grid: [{
id: id,
left: ((i - 1) / dimSize * 100 + 7) + '%',
......@@ -110,11 +138,12 @@
}
}
console.time('update immediate');
update(false);
console.timeEnd('update immediate');
// console.time('update immediate');
// update(false);
// console.timeEnd('update immediate');
// chart.clear();
chart.clear();
setTimeout(function () {
console.time('update lazy');
update(true);
......
test/scatterMatrix.html
浏览文件 @ 26cd28ac
......@@ -225,9 +225,27 @@
var yAxisList = option.yAxis = [];
var seriesList = option.series = [];
var visualMapSeriesIndices = option.visualMap.seriesIndex = [];
var axisPointerLinkList = option.axisPointer.link = [];
var axisPointerLinkMap = {};
for (var i = 0; i < CROSS_DIM_NUMBER; i++) {
for (var j = 0; j < CROSS_DIM_NUMBER; j++) {
var id = i + '-' + j;
var linkItem = axisPointerLinkMap['x' + i];
if (!linkItem) {
linkItem = axisPointerLinkMap['x' + i] = {xAxisId: []};
axisPointerLinkList.push(linkItem);
}
linkItem.xAxisId.push(id);
var linkItem = axisPointerLinkMap['y' + j];
if (!linkItem) {
linkItem = axisPointerLinkMap['y' + j] = {yAxisId: []};
axisPointerLinkList.push(linkItem);
}
linkItem.yAxisId.push(id);
gridList.push({
left: BASE_LEFT + i * (GRID_WIDTH + GAP),
top: BASE_TOP + (CROSS_DIM_NUMBER - 1 - j) * (GRID_HEIGHT + GAP),
......@@ -235,6 +253,7 @@
height: GRID_HEIGHT
});
xAxisList.push({
id: id,
axisLine: {
onZero: false
},
......@@ -249,6 +268,7 @@
scale: true
});
yAxisList.push({
id: id,
axisLine: {
onZero: false
},
......@@ -282,6 +302,14 @@
brush: {
brushLink: 'all'
},
axisPointer: {
show: true,
snap: true,
link: [],
lineStyle: {
type: 'dashed'
}
},
visualMap: {
type: 'piecewise',
categories: getCategories(rawData),
......@@ -294,7 +322,31 @@
}
},
tooltip: {
trigger: 'item'
trigger: 'item',
extraCssText: 'max-width:400px; white-space: normal;',
formatter: function (params) {
if (echarts.util.isArray(params)) {
var map = {
x: {items: []},
y: {items: []}
};
echarts.util.each(params, function (param) {
var dim = param.axisDim;
var mapItem = map[dim];
mapItem.axisValueLabel = param.axisValueLabel;
mapItem.items.push(
param.value[dim === 'x' ? 1 : 0]
+ ' ' + param.value[2]
);
});
return map.x.axisValueLabel + '<br>(' + map.x.items.join(') (') + ')'
+ '<br><br>'
+ map.y.axisValueLabel + '<br>(' + map.y.items.join(') (') + ')';
}
else {
return params.name + ' ' + params.value;
}
}
}
};
......
test/tooltip-touch.html
浏览文件 @ 26cd28ac
......@@ -258,6 +258,7 @@
axisPointer: {
handle: {show: true},
label: {
// formatter: '|{value}|',
formatter: function (params) {
return echarts.format.formatTime('yyyy-MM-dd', params.value);
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或