Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 2c20c7d4 编写于 作者: K kener
浏览文件
操作

tooltip优化指示样式，encode bug fix

上级 8fe37a58
隐藏空白更改
内联 并排
Showing with 236 addition and 50 deletion
doc/changelog.html
浏览文件 @ 2c20c7d4
......@@ -84,6 +84,9 @@
<h3>Latest<small>（After 2013-09-29）</small></h3>
<ul>
<li>[#] [tooltip]雷达图空数据bug fix</li>
<li>[#] [categoryAxis]修复类目轴大数据小数精度问题，fix <a href="https://github.com/ecomfe/echarts/issues/110" target="_blank">this 》</a></li>
<li>[^] [tooltip][line][bar]优化高亮指示样式</li>
<li>[#] [tooltip]encodeHTML修复</li>
</ul>
</div>
<div>
......
doc/doc.html
浏览文件 @ 2c20c7d4
......@@ -1063,7 +1063,7 @@ feature : {
areaStyle : {<br/>&nbsp;&nbsp;size: 'auto',<br/>&nbsp;&nbsp;color: 'rgba(150,150,150,0.3)'<br/>}<br/>
}
</td>
<td> 坐标轴指示器，坐标轴触发有效，默认type为line，可选为：'line' | 'shadow'，<br/>lineStyle设置直线指示器（详见<a href="#LineStyle" title="">lineStyle</a>）,<br/>areaStyle设置阴影指示器（详见<a href="#AreaStyle" title="">areaStyle</a>），areaStyle.size默认为'auto'自动计算，可指定具体宽度</td>
<td> 坐标轴指示器，坐标轴触发有效，默认type为line，可选为：'line' | 'shadow' | 'none'(无)，<br/>lineStyle设置直线指示器（详见<a href="#LineStyle" title="">lineStyle</a>）,<br/>areaStyle设置阴影指示器（详见<a href="#AreaStyle" title="">areaStyle</a>），areaStyle.size默认为'auto'自动计算，可指定具体宽度</td>
</tr>
<tr>
<td> {Object} textStyle </td>
......
doc/slide/js/whyEcharts.js
浏览文件 @ 2c20c7d4
......@@ -18,6 +18,7 @@ var webkitDepData;
require(
[
'echarts',
'webkitDep',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/scatter',
......@@ -26,8 +27,7 @@ require(
'echarts',
//'echarts/chart/radar',
'echarts/chart/force',
'echarts/chart/map',
'webkitDep',
'echarts/chart/map'
],
function(ec, wd) {
echarts = ec;
......@@ -267,18 +267,21 @@ var optionMap = {
{
name:'成交',
type:'bar',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[10, 12, 21, 54, 260, 830, 710]
},
{
name:'预购',
type:'bar',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[30, 182, 434, 791, 390, 30, 10]
},
{
name:'意向',
type:'bar',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[1320, 1132, 601, 234, 120, 90, 20]
}
......@@ -588,7 +591,7 @@ var optionMap = {
large: true,
data: (function() {
var d = [];
var len = 3000;
var len = 10000;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
......@@ -607,7 +610,7 @@ var optionMap = {
large: true,
data: (function() {
var d = [];
var len = 3000;
var len = 10000;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
......
doc/slide/whyEcharts.html
浏览文件 @ 2c20c7d4
......@@ -99,8 +99,10 @@
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<small>Why<br/></small>
<h1>ECharts</h1><br/>
<small>Why</small>
<h1 style="margin:-10px 0 0 0">
<img src="./img/echarts_logo.png" style="margin:0;background:rgba(0,0,0,0);border-width: 0;box-shadow: 0 0 0px rgba(0, 0, 0, 0);"/>
</h1>
<h5>大数据时代，重新定义数据图表的时候到了！</h5><br/>
<div>
<small>开源来自百度商业前端数据可视化团队</small><br/>
......@@ -496,13 +498,14 @@
<a href="http://weibo.com/pissang" target="_blank">@pissang</a>
<a href="http://crossdo.com" target="_blank">@CrossDo</a>
<a href="http://weibo.com/wind108369" target="_blank">@杨骥wind108369</a>
<a href="mailto:sushuang0322@gmail.com" target="_blank">@Sushuang</a>
<a href="http://weibo.com/loutongbing" target="_blank">@娄同兵</a>
<a href="http://weibo.com/u/2927599227" target="_blank">@梦的糖果盒</a>
</small></p><br/>
<p><small>
以及他们的鼓舞助威、摇旗呐喊、推波助澜、煽风点火...<br/>
<a href="http://weibo.com/forain" target="_blank">@diysimon</a>
<a href="http://weibo.com/errorrik" target="_blank">@errorrik</a>
<a href="http://weibo.com/taiyun" target="_blank">@cloud_wei</a>
</small></p>
<br/>
<p class="fragment"><small>
......
src/chart/bar.js
浏览文件 @ 2c20c7d4
......@@ -25,6 +25,7 @@ define(function(require) {
var ecData = require('../util/ecData');
var zrUtil = require('zrender/tool/util');
var zrColor = require('zrender/tool/color');
var self = this;
self.type = ecConfig.CHART_TYPE_BAR;
......@@ -570,12 +571,11 @@ define(function(require) {
var normalColor = self.deepQuery(
[data, serie],
'itemStyle.normal.color'
);
) || defaultColor;
var emphasisColor = self.deepQuery(
[data, serie],
'itemStyle.emphasis.color'
);
barShape = {
shape : 'rectangle',
zlevel : _zlevelBase,
......@@ -586,14 +586,20 @@ define(function(require) {
width : width,
height : height,
brushType : 'both',
color : normalColor || defaultColor,
color : normalColor,
strokeColor : '#fff'
},
highlightStyle : {
color : emphasisColor || normalColor || defaultColor
color : emphasisColor
|| (typeof normalColor == 'string'
? zrColor.lift(normalColor, -0.2)
: normalColor
),
strokeColor : 'rgba(0,0,0,0)'
},
_orient : orient
};
barShape.highlightStyle.textColor = barShape.highlightStyle.color;
barShape = self.addLabel(barShape, serie, data, name, orient);
......
src/chart/line.js
浏览文件 @ 2c20c7d4
......@@ -33,6 +33,7 @@ define(function(require) {
var _zlevelBase = self.getZlevelBase();
var finalPLMap = {}; // 完成的point list(PL)
var _sIndex2ColorMap = {}; // series默认颜色索引，seriesIndex索引到color
var _symbol = [
'circle', 'rectangle', 'triangle', 'diamond',
......@@ -45,6 +46,7 @@ define(function(require) {
);
function _buildShape() {
finalPLMap = {};
self.selectedMap = {};
// 水平垂直双向series索引 ，position索引到seriesIndex
......@@ -59,7 +61,7 @@ define(function(require) {
var xAxis;
var yAxis;
for (var i = 0, l = series.length; i < l; i++) {
if (series[i].type == ecConfig.CHART_TYPE_LINE) {
if (series[i].type == self.type) {
series[i] = self.reformOption(series[i]);
xAxisIndex = series[i].xAxisIndex;
yAxisIndex = series[i].yAxisIndex;
......@@ -221,7 +223,7 @@ define(function(require) {
var baseYP;
var lastYN; // 负向堆叠处理
var baseYN;
var finalPLMap = {}; // 完成的point list(PL)
//var finalPLMap = {}; // 完成的point list(PL)
var curPLMap = {}; // 正在记录的point list(PL)
var data;
var value;
......@@ -341,7 +343,7 @@ define(function(require) {
var baseXP;
var lastXN; // 负向堆叠处理
var baseXN;
var finalPLMap = {}; // 完成的point list(PL)
//var finalPLMap = {}; // 完成的point list(PL)
var curPLMap = {}; // 正在记录的point list(PL)
var data;
var value;
......@@ -440,7 +442,6 @@ define(function(require) {
curPLMap[sId] = [];
}
}
//console.log(finalPLMap);
_buildBorkenLine(finalPLMap, categoryAxis, 'vertical');
}
......@@ -473,9 +474,7 @@ define(function(require) {
) {
serie = series[seriesIndex];
seriesPL = pointList[seriesIndex];
if (serie.type == ecConfig.CHART_TYPE_LINE
&& typeof seriesPL != 'undefined'
) {
if (serie.type == self.type && typeof seriesPL != 'undefined') {
defaultColor = _sIndex2ColorMap[seriesIndex];
// 多级控制
lineWidth = self.deepQuery(
......@@ -606,7 +605,7 @@ define(function(require) {
});
}
}
}
}
}
}
......@@ -683,7 +682,8 @@ define(function(require) {
},
highlightStyle : {
color : symbol.match('empty') ? '#fff' : emphasisColor,
strokeColor : emphasisColor
strokeColor : emphasisColor,
lineWidth: lineWidth * 2 + 2
},
clickable : true
};
......@@ -763,6 +763,72 @@ define(function(require) {
self.clear();
_buildShape();
}
function ontooltipHover(param, tipShape) {
var seriesIndex = param.seriesIndex;
var dataIndex = param.dataIndex;
var seriesPL;
var serie;
var queryTarget;
var len = seriesIndex.length;
while (len--) {
seriesPL = finalPLMap[seriesIndex[len]];
if (seriesPL) {
serie = series[seriesIndex[len]];
queryTarget = [serie];
defaultColor = _sIndex2ColorMap[seriesIndex[len]];
// 多级控制
lineWidth = self.deepQuery(
[serie], 'itemStyle.normal.lineStyle.width'
);
lineType = self.deepQuery(
[serie], 'itemStyle.normal.lineStyle.type'
);
lineColor = self.deepQuery(
[serie], 'itemStyle.normal.lineStyle.color'
);
normalColor = self.deepQuery(
[serie], 'itemStyle.normal.color'
);
emphasisColor = self.deepQuery(
[serie], 'itemStyle.emphasis.color'
);
var shape;
for (var i = 0, l = seriesPL.length; i < l; i++) {
singlePL = seriesPL[i];
for (var j = 0, k = singlePL.length; j < k; j++) {
if (dataIndex == singlePL[j][2]) {
data = serie.data[singlePL[j][2]];
shape = _getSymbol(
seriesIndex[len],
singlePL[j][2], // dataIndex
singlePL[j][3], // name
singlePL[j][0], // x
singlePL[j][1], // y
self.deepQuery(
[data], 'itemStyle.normal.color'
) || normalColor
|| defaultColor,
self.deepQuery(
[data], 'itemStyle.emphasis.color'
) || emphasisColor
|| normalColor
|| defaultColor,
lineWidth,
self.deepQuery(
[data, serie], 'symbolRotate'
),
'horizontal'
);
//console.log(shape)
//zr.addHoverShape(shape);
tipShape.push(shape);
}
}
}
}
}
}
/**
* 动态数据增加动画
......@@ -918,6 +984,7 @@ define(function(require) {
self.init = init;
self.refresh = refresh;
self.ontooltipHover = ontooltipHover;
self.addDataAnimation = addDataAnimation;
self.animation = animation;
......
src/component/tooltip.js
浏览文件 @ 2c20c7d4
......@@ -26,6 +26,7 @@ define(function (require) {
var zrArea = require('zrender/tool/area');
var zrColor = require('zrender/tool/color');
var zrUtil = require('zrender/tool/util');
var zrShapeBase = require('zrender/shape/base');
var rectangle = zrShape.get('rectangle');
var self = this;
......@@ -63,6 +64,7 @@ define(function (require) {
var _zrHeight = zr.getHeight();
var _zrWidth = zr.getWidth();
var _lastTipShape = false;
var _axisLineShape = {
shape : 'line',
id : zr.newShapeId('tooltip'),
......@@ -205,6 +207,10 @@ define(function (require) {
zr.modShape(_axisShadowShape.id, _axisShadowShape);
needRefresh = true;
}
if (_lastTipShape && _lastTipShape.tipShape.length > 0) {
zr.delShape(_lastTipShape.tipShape);
_lastTipShape = false;
}
needRefresh && zr.refresh();
}
......@@ -446,6 +452,7 @@ define(function (require) {
}
var series = option.series;
var seriesArray = [];
var seriesIndex = [];
var categoryAxis;
var x;
var y;
......@@ -484,8 +491,18 @@ define(function (require) {
[series[i]], 'tooltip'
));
seriesArray.push(series[i]);
seriesIndex.push(i);
}
}
// 寻找高亮元素
messageCenter.dispatch(
ecConfig.EVENT.TOOLTIP_HOVER,
_event,
{
seriesIndex : seriesIndex,
dataIndex : dataIndex
}
);
y = zrEvent.getY(_event) + 10;
x = categoryAxis.getCoordByIndex(dataIndex);
_styleAxisPointer(
......@@ -520,8 +537,18 @@ define(function (require) {
[series[i]], 'tooltip'
));
seriesArray.push(series[i]);
seriesIndex.push(i);
}
}
// 寻找高亮元素
messageCenter.dispatch(
ecConfig.EVENT.TOOLTIP_HOVER,
_event,
{
seriesIndex : seriesIndex,
dataIndex : dataIndex
}
);
x = zrEvent.getX(_event) + 10;
y = categoryAxis.getCoordByIndex(dataIndex);
_styleAxisPointer(
......@@ -564,11 +591,11 @@ define(function (require) {
for (var i = 0, l = seriesArray.length; i < l; i++) {
formatter = formatter.replace(
'{a' + i + '}',
seriesArray[i].name
_encodeHTML(seriesArray[i].name)
);
formatter = formatter.replace(
'{b' + i + '}',
categoryAxis.getNameByIndex(dataIndex)
_encodeHTML(categoryAxis.getNameByIndex(dataIndex))
);
data = seriesArray[i].data[dataIndex];
data = typeof data != 'undefined'
......@@ -585,11 +612,15 @@ define(function (require) {
}
else {
_curTicket = NaN;
formatter = categoryAxis.getNameByIndex(dataIndex);
formatter = _encodeHTML(
categoryAxis.getNameByIndex(dataIndex)
);
for (var i = 0, l = seriesArray.length; i < l; i++) {
formatter += '<br/>' + seriesArray[i].name + ' : ';
formatter += '<br/>' + _encodeHTML(seriesArray[i].name)
+ ' : ';
data = seriesArray[i].data[dataIndex];
data = data = typeof data != 'undefined'
data = typeof data != 'undefined'
? (typeof data.value != 'undefined'
? data.value
: data)
......@@ -700,11 +731,11 @@ define(function (require) {
for (var i = 0, l = params.length; i < l; i++) {
formatter = formatter.replace(
'{a' + i + '}',
params[i][0]
_encodeHTML(params[i][0])
);
formatter = formatter.replace(
'{b' + i + '}',
params[i][1]
_encodeHTML(params[i][1])
);
formatter = formatter.replace(
'{c' + i + '}',
......@@ -712,17 +743,20 @@ define(function (require) {
);
formatter = formatter.replace(
'{d' + i + '}',
params[i][3]
_encodeHTML(params[i][3])
);
}
_tDom.innerHTML = formatter;
}
else {
formatter = params[0][1] + '<br/>'
+ params[0][3] + ' : ' + params[0][2];
formatter = _encodeHTML(params[0][1]) + '<br/>'
+ _encodeHTML(params[0][3]) + ' : '
+ params[0][2];
for (var i = 1, l = params.length; i < l; i++) {
formatter += '<br/>' + params[i][1] + '<br/>';
formatter += params[i][3] + ' : ' + params[i][2];
formatter += '<br/>' + _encodeHTML(params[i][1])
+ '<br/>';
formatter += _encodeHTML(params[i][3]) + ' : '
+ params[i][2];
}
_tDom.innerHTML = formatter;
}
......@@ -817,8 +851,8 @@ define(function (require) {
.replace('{b}','{b0}')
.replace('{c}','{c0}')
.replace('{d}','{d0}');
formatter = formatter.replace('{a0}', serie.name)
.replace('{b0}', name)
formatter = formatter.replace('{a0}', _encodeHTML(serie.name))
.replace('{b0}', _encodeHTML(name))
.replace('{c0}', value);
if (typeof speical != 'undefined') {
......@@ -830,24 +864,27 @@ define(function (require) {
else {
_curTicket = NaN;
if (serie.type == ecConfig.CHART_TYPE_SCATTER) {
_tDom.innerHTML = serie.name + '<br/>' +
(name === '' ? '' : (name + ' : '))
+ value +
(typeof speical == 'undefined'
? ''
: (' (' + speical + ')'));
_tDom.innerHTML = _encodeHTML(serie.name) + '<br/>' +
(name === ''
? '' : (_encodeHTML(name) + ' : ')
)
+ value
+ (typeof speical == 'undefined'
? ''
: (' (' + speical + ')'));
}
else if (serie.type == ecConfig.CHART_TYPE_RADAR) {
indicator = speical;
html += (name === '' ? serie.name : name) + '<br />';
html += _encodeHTML(name === '' ? serie.name : name) + '<br />';
for (var i = 0 ; i < indicator.length; i ++) {
html += indicator[i].text + ' : ' + value[i] + '<br />';
html += _encodeHTML(indicator[i].text) + ' : '
+ value[i] + '<br />';
}
_tDom.innerHTML = html;
}
else {
_tDom.innerHTML = serie.name + '<br/>' +
name + ' : ' + value +
_tDom.innerHTML = _encodeHTML(serie.name) + '<br/>' +
_encodeHTML(name) + ' : ' + value +
(typeof speical == 'undefined'
? ''
: (' (' + speical + ')'));
......@@ -1109,6 +1146,39 @@ define(function (require) {
yAxis = component.yAxis;
polar = component.polar;
}
function ontooltipHover(param, tipShape) {
if (!_lastTipShape // 不存在或者存在但dataIndex发生变化才需要重绘
|| (_lastTipShape && _lastTipShape.dataIndex != param.dataIndex)
) {
if (_lastTipShape && _lastTipShape.tipShape.length > 0) {
zr.delShape(_lastTipShape.tipShape);
}
for (var i = 0, l = tipShape.length; i < l; i++) {
tipShape[i].id = zr.newShapeId('tooltip');
tipShape[i].zlevel = _zlevelBase;
tipShape[i].style = zrShapeBase.getHighlightStyle(
tipShape[i].style,
tipShape[i].highlightStyle
);
tipShape[i].draggable = false;
tipShape[i].hoverable = false;
tipShape[i].clickable = false;
tipShape[i].ondragend = null;
tipShape[i].ondragover = null;
tipShape[i].ondrop = null;
zr.addShape(tipShape[i])
}
_lastTipShape = {
dataIndex : param.dataIndex,
tipShape : tipShape
};
}
}
function ondragend() {
_hide();
}
function init(newOption, newDom) {
option = newOption;
......@@ -1198,7 +1268,19 @@ define(function (require) {
self.shapeList = null;
self = null;
}
/**
* html转码的方法
*/
_encodeHTML = function (source) {
return String(source)
.replace(/&/g,'&amp;')
.replace(/</g,'&lt;')
.replace(/>/g,'&gt;')
.replace(/"/g, "&quot;")
.replace(/'/g, "&#39;");
};
zr.on(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
zr.on(zrConfig.EVENT.GLOBALOUT, _onglobalout);
......@@ -1209,6 +1291,8 @@ define(function (require) {
self.refresh = refresh;
self.resize = resize;
self.setComponent = setComponent;
self.ontooltipHover = ontooltipHover;
self.ondragend = ondragend;
init(option, dom);
}
......
src/config.js
浏览文件 @ 2c20c7d4
......@@ -162,8 +162,8 @@ define(function() {
trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
// formatter: null // 内容格式器：{string}（Template） ¦ {Function}
islandFormatter: '{a} <br/>{b} : {c}', // 数据孤岛内容格式器，非标准参数
transitionDuration : 1, // 动画变换时间，单位s
showDelay: 30, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
transitionDuration : 0.4, // 动画变换时间，单位s
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色，默认为透明度为0.7的黑色
borderColor: '#333', // 提示边框颜色
......@@ -687,12 +687,13 @@ define(function() {
},
EVENT: {
// -------全局通用
REFRESH: 'refresh',
RESTORE: 'restore',
CLICK: 'click',
HOVER: 'hover',
MOUSEWHEEL: 'mousewheel',
// -------
// -------业务交互逻辑
DATA_CHANGED: 'dataChanged',
DATA_ZOOM: 'dataZoom',
DATA_RANGE: 'dataRange',
......@@ -700,7 +701,9 @@ define(function() {
MAP_SELECTED: 'mapSelected',
PIE_SELECTED: 'pieSelected',
MAGIC_TYPE_CHANGED: 'magicTypeChanged',
DATA_VIEW_CHANGED: 'dataViewChanged'
DATA_VIEW_CHANGED: 'dataViewChanged',
// -------内部通信
TOOLTIP_HOVER: 'tooltipHover'
},
// 可计算特性配置，孤岛，提示颜色
......
src/echarts.js
浏览文件 @ 2c20c7d4
......@@ -127,6 +127,9 @@ define(function(require) {
_messageCenter.bind(
ecConfig.EVENT.DATA_VIEW_CHANGED, _ondataViewChanged
);
_messageCenter.bind(
ecConfig.EVENT.TOOLTIP_HOVER, _tooltipHover
);
_messageCenter.bind(
ecConfig.EVENT.RESTORE, _onrestore
);
......@@ -390,6 +393,20 @@ define(function(require) {
);
_messageCenter.dispatch(ecConfig.EVENT.REFRESH);
}
/**
* tooltip与图表间通信
*/
function _tooltipHover(param) {
var len = _chartList.length;
var tipShape = [];
while (len--) {
_chartList[len]
&& _chartList[len].ontooltipHover
&& _chartList[len].ontooltipHover(param, tipShape);
}
//_zr.refreshHover();
}
/**
* 还原
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或