Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

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

提交 049a38cd 编写于 作者: K kener
浏览文件
操作

折、柱、散点图文本标签升级

上级 026b8973
隐藏空白更改
内联 并排
Showing with 223 addition and 106 deletion
doc/example/bar5.html
浏览文件 @ 049a38cd
......@@ -90,7 +90,8 @@ option = {
calculable : true,
xAxis : [
{
type : 'value'
type : 'value',
splitArea: {show : true}
}
],
yAxis : [
......
doc/example/line.html
浏览文件 @ 049a38cd
......@@ -132,7 +132,15 @@ option = {
{
value:201,
symbol: 'star', // 数据级个性化拐点图形
symbolSize : 15
symbolSize : 15,
itemStyle : { normal: {label : {
show: true,
textStyle : {
fontSize : '20',
fontFamily : '微软雅黑',
fontWeight : 'bold'
}
}}}
},
{
value:134,
......@@ -164,12 +172,20 @@ option = {
value: 390,
symbol: 'star6',
symbolSize : 15,
symbolRotate : 0,
itemStyle: { // 数据级个性化折线样式
normal: {
color: 'yellowgreen'
},
emphasis: {
color: 'orange'
color: 'orange',
label : {
show: true,
position: 'inside',
textStyle : {
fontSize : '20'
}
}
}
}
},
......@@ -179,6 +195,7 @@ option = {
{
name:'搜索引擎',
type:'line',
symbol:'emptyCircle',
itemStyle: {
normal: {
lineStyle: { // 系列级个性化折线样式，横向渐变描边
......@@ -195,9 +212,12 @@ option = {
shadowOffsetX: 8,
shadowOffsetY: 8
}
},
emphasis : {
label : {show: true}
}
},
data:[620, 732, 701, 734, 890, 930, 820]
data:[620, 732, 791, 734, 890, 930, 820]
}
]
};
......
doc/example/line5.html
浏览文件 @ 049a38cd
......@@ -110,6 +110,13 @@ option = {
name:'高度(km)与气温(°C)变化关系',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
}
]
......
doc/example/scatter.html
浏览文件 @ 049a38cd
......@@ -116,7 +116,8 @@ option = {
color: 'lightblue',
lineStyle: {
width: 8
}
},
label : {show: true}
},
emphasis: {
color: 'lightgreen',
......@@ -142,6 +143,11 @@ option = {
symbolSize: function(value){
return Math.round(value[2] * 3);
},
itemStyle: {
emphasis : {
label : {show: true}
}
},
data: (function() {
var d = [];
var len = 20;
......
src/chart/bar.js
浏览文件 @ 049a38cd
......@@ -595,7 +595,7 @@ define(function(require) {
_orient : orient
};
barShape = _addLabel(barShape, serie, data, name, orient);
barShape = self.addLabel(barShape, serie, data, name, orient);
if (self.deepQuery(
[data, serie, option],
......@@ -615,95 +615,6 @@ define(function(require) {
return barShape;
}
/**
* 添加文本
*/
function _addLabel(barShape, serie, data, name, orient) {
// 多级控制
var nLabel = zrUtil.merge(
zrUtil.clone(
self.deepQuery([serie], 'itemStyle.normal.label')
),
self.deepQuery([data], 'itemStyle.normal.label'),
{ 'overwrite': true, 'recursive': true }
);
var eLabel = zrUtil.merge(
zrUtil.clone(
self.deepQuery([serie], 'itemStyle.emphasis.label')
),
self.deepQuery([data], 'itemStyle.emphasis.label'),
{ 'overwrite': true, 'recursive': true }
);
var nTextStyle = nLabel.textStyle || {};
var eTextStyle = eLabel.textStyle || {};
if (nLabel.show) {
barShape.style.text = _getLabelText(
serie, data, name, 'normal'
);
barShape.style.textPosition =
typeof nLabel.position == 'undefined'
? (orient == 'horizontal' ? 'right' : 'top')
: nLabel.position;
barShape.style.textColor = nTextStyle.color;
barShape.style.textFont = self.getFont(nTextStyle);
}
if (eLabel.show) {
barShape.highlightStyle.text = _getLabelText(
serie, data, name, 'emphasis'
);
barShape.highlightStyle.textPosition =
typeof eLabel.position == 'undefined'
? (orient == 'horizontal' ? 'right' : 'top')
: eLabel.position;
barShape.highlightStyle.textColor = eTextStyle.color;
barShape.highlightStyle.textFont = self.getFont(eTextStyle);
}
return barShape;
}
/**
* 根据lable.format计算label text
*/
function _getLabelText(serie, data, name, status) {
var formatter = self.deepQuery(
[data, serie],
'itemStyle.' + status + '.label.formatter'
);
var value = typeof data != 'undefined'
? (typeof data.value != 'undefined'
? data.value
: data)
: '-';
if (formatter) {
if (typeof formatter == 'function') {
return formatter(
serie.name,
name,
value
);
}
else if (typeof formatter == 'string') {
formatter = formatter.replace('{a}','{a0}')
.replace('{b}','{b0}')
.replace('{c}','{c0}');
formatter = formatter.replace('{a0}', serie.name)
.replace('{b0}', name)
.replace('{c0}', value);
return formatter;
}
}
else {
return value;
}
}
/**
* 构造函数默认执行的初始化方法，也用于创建实例后动态修改
......
src/chart/line.js
浏览文件 @ 049a38cd
......@@ -305,7 +305,7 @@ define(function(require) {
y = lastYP;
self.shapeList.push(_getCalculableItem(
seriesIndex, i, categoryAxis.getNameByIndex(i),
x, y
x, y, 'horizontal'
));
}
}
......@@ -425,7 +425,7 @@ define(function(require) {
x = lastXP;
self.shapeList.push(_getCalculableItem(
seriesIndex, i, categoryAxis.getNameByIndex(i),
x, y
x, y, 'vertical'
));
}
}
......@@ -537,7 +537,8 @@ define(function(require) {
lineWidth,
self.deepQuery(
[data, serie], 'symbolRotate'
)
),
orient
));
}
......@@ -630,7 +631,7 @@ define(function(require) {
/**
* 生成空数据所需的可计算提示图形
*/
function _getCalculableItem(seriesIndex, dataIndex, name, x, y) {
function _getCalculableItem(seriesIndex, dataIndex, name, x, y, orient) {
var color = series[seriesIndex].calculableHolderColor
|| ecConfig.calculableHolderColor;
......@@ -639,12 +640,15 @@ define(function(require) {
x, y,
color,
_sIndex2ColorMap[seriesIndex],
2
2,
0,
orient
);
itemShape.hoverable = false;
itemShape.draggable = false;
itemShape.highlightStyle.lineWidth = 20;
itemShape.style.text = undefined;
//itemShape.highlightStyle.lineWidth = 20;
return itemShape;
}
......@@ -654,7 +658,7 @@ define(function(require) {
*/
function _getSymbol(
seriesIndex, dataIndex, name, x, y,
normalColor, emphasisColor, lineWidth, rotate
normalColor, emphasisColor, lineWidth, rotate, orient
) {
var serie = series[seriesIndex];
var data = serie.data[dataIndex];
......@@ -678,7 +682,7 @@ define(function(require) {
lineWidth: lineWidth * 2
},
highlightStyle : {
color : emphasisColor,
color : symbol.match('empty') ? '#fff' : emphasisColor,
strokeColor : emphasisColor
},
clickable : true
......@@ -706,6 +710,23 @@ define(function(require) {
itemShape.draggable = true;
}
itemShape = self.addLabel(
itemShape,
series[seriesIndex],
series[seriesIndex].data[dataIndex],
name,
orient == 'vertical' ? 'horizontal' : 'vertical'
);
if (symbol.match('empty')) {
if (typeof itemShape.style.textColor == 'undefined') {
itemShape.style.textColor = itemShape.style.strokeColor
}
if (typeof itemShape.highlightStyle.textColor == 'undefined') {
itemShape.highlightStyle.textColor =
itemShape.highlightStyle.strokeColor
}
}
ecData.pack(
itemShape,
series[seriesIndex], seriesIndex,
......
src/chart/scatter.js
浏览文件 @ 049a38cd
......@@ -329,6 +329,14 @@ define(function(require) {
itemShape.draggable = true;
}
*/
itemShape = self.addLabel(
itemShape,
series[seriesIndex],
series[seriesIndex].data[dataIndex],
name,
'vertical'
);
ecData.pack(
itemShape,
......
src/component/base.js
浏览文件 @ 049a38cd
......@@ -156,6 +156,94 @@ define(function(require) {
+ finalTextStyle.fontFamily;
}
/**
* 添加文本
*/
function addLabel(tarShape, serie, data, name, orient) {
// 多级控制
var nLabel = zrUtil.merge(
zrUtil.clone(
self.deepQuery([serie], 'itemStyle.normal.label')
),
self.deepQuery([data], 'itemStyle.normal.label'),
{ 'overwrite': true, 'recursive': true }
);
var eLabel = zrUtil.merge(
zrUtil.clone(
self.deepQuery([serie], 'itemStyle.emphasis.label')
),
self.deepQuery([data], 'itemStyle.emphasis.label'),
{ 'overwrite': true, 'recursive': true }
);
var nTextStyle = nLabel.textStyle || {};
var eTextStyle = eLabel.textStyle || {};
if (nLabel.show) {
tarShape.style.text = _getLabelText(
serie, data, name, 'normal'
);
tarShape.style.textPosition =
typeof nLabel.position == 'undefined'
? (orient == 'horizontal' ? 'right' : 'top')
: nLabel.position;
tarShape.style.textColor = nTextStyle.color;
tarShape.style.textFont = self.getFont(nTextStyle);
}
if (eLabel.show) {
tarShape.highlightStyle.text = _getLabelText(
serie, data, name, 'emphasis'
);
tarShape.highlightStyle.textPosition =
typeof eLabel.position == 'undefined'
? (orient == 'horizontal' ? 'right' : 'top')
: eLabel.position;
tarShape.highlightStyle.textColor = eTextStyle.color;
tarShape.highlightStyle.textFont = self.getFont(eTextStyle);
}
return tarShape;
}
/**
* 根据lable.format计算label text
*/
function _getLabelText(serie, data, name, status) {
var formatter = self.deepQuery(
[data, serie],
'itemStyle.' + status + '.label.formatter'
);
var value = typeof data != 'undefined'
? (typeof data.value != 'undefined'
? data.value
: data)
: '-';
if (formatter) {
if (typeof formatter == 'function') {
return formatter(
serie.name,
name,
value
);
}
else if (typeof formatter == 'string') {
formatter = formatter.replace('{a}','{a0}')
.replace('{b}','{b0}')
.replace('{c}','{c0}');
formatter = formatter.replace('{a0}', serie.name)
.replace('{b0}', name)
.replace('{c0}', value);
return formatter;
}
}
else {
return value;
}
}
/**
* 百分比计算
*/
......@@ -249,6 +337,7 @@ define(function(require) {
self.reformCssArray = reformCssArray;
self.deepQuery = deepQuery;
self.getFont = getFont;
self.addLabel = addLabel;
self.calAbsolute = calAbsolute;
self.clear = clear;
self.dispose = dispose;
......
src/config.js
浏览文件 @ 049a38cd
......@@ -380,6 +380,7 @@ define(function() {
normal: {
label: {
show: false
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
// position: 默认自使用，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
......@@ -388,6 +389,7 @@ define(function() {
emphasis: {
label: {
show: false,
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
// position: 默认自使用，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
......@@ -404,6 +406,13 @@ define(function() {
itemStyle: {
normal: {
// color: 各异,
label: {
show: false
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
// position: 默认自使用，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
lineStyle: {
width: 2,
type: 'solid',
......@@ -414,6 +423,13 @@ define(function() {
}
},
emphasis: {
label: {
show: false
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
// position: 默认自使用，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
// color: 各异,
}
},
......@@ -452,7 +468,43 @@ define(function() {
//symbol: null, // 图形类型，非标准参数
symbolSize: 4, // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
large: false, // 大规模散点图
largeThreshold: 2000 // 大规模阀值，large为true且数据量大于largeThreshold才启用大规模模式
largeThreshold: 2000,// 大规模阀值，large为true且数据量>largeThreshold才启用大规模模式
itemStyle: {
normal: {
label: {
show: false,
formatter : function(a, b, c) {
if (typeof c[2] != 'undefined') {
return c[2];
}
else {
return c[0] + ' , ' + c[1];
}
}
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
// position: 默认自使用，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
},
emphasis: {
label: {
show: false,
formatter : function(a, b, c) {
if (typeof c[2] != 'undefined') {
return c[2];
}
else {
return c[0] + ' , ' + c[1];
}
}
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
// position: 默认自使用，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
}
}
},
// 雷达图默认参数
......@@ -487,6 +539,7 @@ define(function() {
label: {
show: true,
position: 'outer'
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
labelLine: {
......@@ -503,6 +556,7 @@ define(function() {
label: {
show: false,
position: 'outer'
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
labelLine: {
......
src/echarts.js
浏览文件 @ 049a38cd
......@@ -91,11 +91,11 @@ define(function(require) {
_init();
function _init() {
var zrender = require('zrender');
if (((zrender.version || '1.0.0').replace('.', '') - 0)
if (((zrender.version || '1.0.3').replace('.', '') - 0)
< (echarts.dependencies.zrender.replace('.', '') - 0)
) {
console.error(
'ZRender ' + (zrender.version || '1.0.0')
'ZRender ' + (zrender.version || '1.0.3-')
+ ' is too old for ECharts ' + echarts.version
+ '. Current version need ZRender '
+ echarts.dependencies.zrender + '+'
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或