diff --git a/doc/example/bar5.html b/doc/example/bar5.html index 22e9c8c11b469c697a2c16bc740e2c676743d74e..45060fab7b27761c566cdad11b02e9f097357d44 100644 --- a/doc/example/bar5.html +++ b/doc/example/bar5.html @@ -90,7 +90,8 @@ option = { calculable : true, xAxis : [ { - type : 'value' + type : 'value', + splitArea: {show : true} } ], yAxis : [ diff --git a/doc/example/line.html b/doc/example/line.html index 733c0c11431e478cabf4686516281cba53f46566..c0bee38855c9516bbc87429c36dba9500aea0dc8 100644 --- a/doc/example/line.html +++ b/doc/example/line.html @@ -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] } ] }; diff --git a/doc/example/line5.html b/doc/example/line5.html index ef7f2cf0dfa42d97f65c949d88557c07cb3205b4..0cd21e36676955c58ad93c098dede2c84c60c837 100644 --- a/doc/example/line5.html +++ b/doc/example/line5.html @@ -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] } ] diff --git a/doc/example/scatter.html b/doc/example/scatter.html index 3e6a2b18085183b70cf4e8195d89b643e773bd05..7ef766f7b89507fe7ce21bd9b0e41a97372397a0 100644 --- a/doc/example/scatter.html +++ b/doc/example/scatter.html @@ -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; diff --git a/src/chart/bar.js b/src/chart/bar.js index 489098bd945ec14d5fd74f474c0ee01720c2f0a1..54dfba41cb793d35678f235ee6aa5a8aac98b05e 100644 --- a/src/chart/bar.js +++ b/src/chart/bar.js @@ -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; - } - } /** * 构造函数默认执行的初始化方法,也用于创建实例后动态修改 diff --git a/src/chart/line.js b/src/chart/line.js index dd771ea11d50fe90953928d9ac1bcd8a4f117b69..34e9c797996bf3f5300ec860acca6cfb9aea91fa 100644 --- a/src/chart/line.js +++ b/src/chart/line.js @@ -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, diff --git a/src/chart/scatter.js b/src/chart/scatter.js index f13c41e59313ceb0596a77b5afa53aa245507d97..e5724976507e8185441aedc98983f730714a2415 100644 --- a/src/chart/scatter.js +++ b/src/chart/scatter.js @@ -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, diff --git a/src/component/base.js b/src/component/base.js index 8138c27d7426749886f20cebcd617ca173493a56..066c79bea165bfa161825d96b1624172c506799e 100644 --- a/src/component/base.js +++ b/src/component/base.js @@ -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; diff --git a/src/config.js b/src/config.js index bd7aa2d949bb892a5b5a6331cf13b5713cec952b..1207e5502be4e2c0b2c0a8228e5533e6d0ac51b6 100644 --- a/src/config.js +++ b/src/config.js @@ -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: { diff --git a/src/echarts.js b/src/echarts.js index 5b5c5f52b259418be8c003a223687b38d1e9c53a..2c4c586ff8bf5e1fceb9d9df016ba4d22b103027 100644 --- a/src/echarts.js +++ b/src/echarts.js @@ -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 + '+'