Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 9a1f313e 编写于 作者: K kener
浏览文件
操作

标注支持：地图、折线、柱形

上级 c9285a9b
隐藏空白更改
内联 并排
Showing with 676 addition and 24 deletion
doc/asset/js/echartsExample.js
浏览文件 @ 9a1f313e
......@@ -66,7 +66,7 @@ function needMap() {
}
var echarts;
var developMode = true;
var developMode = false;
if (developMode) {
// for develop
......
doc/example/bar1.html
浏览文件 @ 9a1f313e
......@@ -105,12 +105,24 @@ option = {
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{name : '年最高', value : 162.2, xAxis: 7, yAxis: 163, symbolSize:18},
{name : '年最低', value : 2.0, xAxis: 0, yAxis: 3}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
}
}
]
};
......
doc/example/line.html
浏览文件 @ 9a1f313e
......@@ -97,7 +97,7 @@ option = {
type : 'value',
splitArea : {show : true}
}
],
],animation:false,
series : [
{
name:'邮件营销',
......@@ -118,7 +118,11 @@ option = {
}
}
},
data:[120, 132, 301, 134, 90, 230, 210]
data:[
120, 132, 301, 134,
{value:90, symbol:'droplet',symbolSize:5},
230, 210
]
},
{
name:'联盟广告',
......@@ -146,7 +150,13 @@ option = {
value:134,
symbol: 'none'
},
190, 230, 110
190,
{
value : 230,
symbol: 'emptypin',
symbolSize: 8
},
110
]
},
{
......@@ -219,7 +229,11 @@ option = {
label : {show: true}
}
},
data:[620, 732, 791, 734, 890, 930, 820]
data:[
620, 732, 791,
{value:734, symbol:'emptyHeart',symbolSize:10},
890, 930, 820
]
}
]
};
......
doc/example/line1.html
浏览文件 @ 9a1f313e
......@@ -117,7 +117,12 @@ option = {
}
}
},
data:[11, 11, 15, 13, 12, 13, 10]
data:[11, 11, 15, 13, 12, 13, 10],
markPoint : {
data : [
{name : '周最高', value : 15, xAxis: 2, yAxis: 15.5}
]
}
},
{
name:'最低气温',
......@@ -129,7 +134,12 @@ option = {
}
}
},
data:[-2, 1, 2, 5, 3, 2, 0]
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
}
}
]
};
......
doc/example/map9.html 0 → 100644
浏览文件 @ 9a1f313e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="linzhifeng@baidu.com">
<script src="../asset/js/esl/esl.js"></script>
<script src="../asset/js/codemirror.js"></script>
<script src="../asset/js/javascript.js"></script>
<link href="../asset/css/bootstrap.css" rel="stylesheet">
<link href="../asset/css/bootstrap-responsive.css" rel="stylesheet">
<link href="../asset/css/codemirror.css" rel="stylesheet">
<link href="../asset/css/monokai.css" rel="stylesheet">
<link href="../asset/css/echartsHome.css" rel="stylesheet">
<link rel="shortcut icon" href="../asset/ico/favicon.png">
<style type="text/css">
.CodeMirror {
height: 550px;
}
</style>
</head>
<body>
<!-- NAVBAR
================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="../../index.html">ECharts</a>
<div class="nav-collapse collapse">
<a id="forkme_banner" href="https://github.com/ecomfe/echarts">View on GitHub</a>
<ul class="nav">
<li><a href="../../index.html"><i class="icon-home icon-white"></i> Home</a></li>
<li class="active"><a href="../example.html" class="active">Example</a></li>
<li><a href="../doc.html" >API &amp; Doc</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="last-release-link" href=""> </a></li>
<li><a href="https://github.com/ecomfe/echarts/archive/master.zip">ZIP (Latest)</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
<li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
<li class="divider"></li>
<!--li class="nav-header">Library</li-->
<li><a href="http://ecomfe.github.io/zrender/index.html" target="_blank">ZRender</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar-wrapper -->
<div class="container-fluid">
<div class="row-fluid">
<div id="sidebar-code" class="span4">
<div class="well sidebar-nav">
<div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" id ="icon-resize" ></a>option</div>
<textarea id="code" name="code">
option = {
title : {
text: '全国主要城市空气质量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
x:'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:['air']
},
dataRange: {
min: 0,
max: 500,
text:['高','低'], // 文本，默认为数值文本
calculable : true,
color:['red','blue']
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : true,
dataView : {readOnly: false},
restore : true,
saveAsImage : true
}
},
series : [
{
name: 'air',
type: 'map',
mapType: 'china',
roam: true,
data:[],
markPoint : {
itemStyle : {},
data : [
{name : '北京', value : 350},
{name : '天津', value : 123},
{name : '上海', value : 103},
{name : '东莞', value : 83},
{name : '东营', value : 13},
{name : '中山', value : 153},
{name : '临汾', value : 303}
]
},
geoCoord: {
'上海': [121.4648,31.2891],
'东莞': [113.8953,22.901],
'东营': [118.7073,37.5513],
'中山': [113.4229,22.478],
'临汾': [111.4783,36.1615],
'临沂': [118.3118,35.2936],
'丹东': [124.541,40.4242],
'丽水': [119.5642,28.1854],
'乌鲁木齐': [87.9236,43.5883],
'佛山': [112.8955,23.1097],
'保定': [115.0488,39.0948],
'兰州': [103.5901,36.3043],
'包头': [110.3467,41.4899],
'北京': [116.4551,40.2539],
'北海': [109.314,21.6211],
'南京': [118.8062,31.9208],
'南宁': [108.479,23.1152],
'南昌': [116.0046,28.6633],
'南通': [121.1023,32.1625],
'厦门': [118.1689,24.6478],
'台州': [121.1353,28.6688],
'合肥': [117.29,32.0581],
'呼和浩特': [111.4124,40.4901],
'咸阳': [108.4131,34.8706],
'哈尔滨': [127.9688,45.368],
'唐山': [118.4766,39.6826],
'嘉兴': [120.9155,30.6354],
'大同': [113.7854,39.8035],
'大连': [122.2229,39.4409],
'天津': [117.4219,39.4189],
'太原': [112.3352,37.9413],
'威海': [121.9482,37.1393],
'宁波': [121.5967,29.6466],
'宝鸡': [107.1826,34.3433],
'宿迁': [118.5535,33.7775],
'常州': [119.4543,31.5582],
'广州': [113.5107,23.2196],
'廊坊': [116.521,39.0509],
'延安': [109.1052,36.4252],
'张家口': [115.1477,40.8527],
'徐州': [117.5208,34.3268],
'德州': [116.6858,37.2107],
'惠州': [114.6204,23.1647],
'成都': [103.9526,30.7617],
'扬州': [119.4653,32.8162],
'承德': [117.5757,41.4075],
'拉萨': [91.1865,30.1465],
'无锡': [120.3442,31.5527],
'日照': [119.2786,35.5023],
'昆明': [102.9199,25.4663],
'杭州': [119.5313,29.8773],
'枣庄': [117.323,34.8926],
'柳州': [109.3799,24.9774],
'株洲': [113.5327,27.0319],
'武汉': [114.3896,30.6628],
'汕头': [117.1692,23.3405],
'江门': [112.6318,22.1484],
'沈阳': [123.1238,42.1216],
'沧州': [116.8286,38.2104],
'河源': [114.917,23.9722],
'泉州': [118.3228,25.1147],
'泰安': [117.0264,36.0516],
'泰州': [120.0586,32.5525],
'济南': [117.1582,36.8701],
'济宁': [116.8286,35.3375],
'海口': [110.3893,19.8516],
'淄博': [118.0371,36.6064],
'淮安': [118.927,33.4039],
'深圳': [114.5435,22.5439],
'清远': [112.9175,24.3292],
'温州': [120.498,27.8119],
'渭南': [109.7864,35.0299],
'湖州': [119.8608,30.7782],
'湘潭': [112.5439,27.7075],
'滨州': [117.8174,37.4963],
'潍坊': [119.0918,36.524],
'烟台': [120.7397,37.5128],
'玉溪': [101.9312,23.8898],
'珠海': [113.7305,22.1155],
'盐城': [120.2234,33.5577],
'盘锦': [121.9482,41.0449],
'石家庄': [114.4995,38.1006],
'福州': [119.4543,25.9222],
'秦皇岛': [119.2126,40.0232],
'绍兴': [120.564,29.7565],
'聊城': [115.9167,36.4032],
'肇庆': [112.1265,23.5822],
'舟山': [122.2559,30.2234],
'苏州': [120.6519,31.3989],
'莱芜': [117.6526,36.2714],
'菏泽': [115.6201,35.2057],
'营口': [122.4316,40.4297],
'葫芦岛': [120.1575,40.578],
'衡水': [115.8838,37.7161],
'衢州': [118.6853,28.8666],
'西宁': [101.4038,36.8207],
'西安': [109.1162,34.2004],
'贵阳': [106.6992,26.7682],
'连云港': [119.1248,34.552],
'邢台': [114.8071,37.2821],
'邯郸': [114.4775,36.535],
'郑州': [113.4668,34.6234],
'鄂尔多斯': [108.9734,39.2487],
'重庆': [107.7539,30.1904],
'金华': [120.0037,29.1028],
'铜川': [109.0393,35.1947],
'银川': [106.3586,38.1775],
'镇江': [119.4763,31.9702],
'长春': [125.8154,44.2584],
'长沙': [113.0823,28.2568],
'长治': [112.8625,36.4746],
'阳泉': [113.4778,38.0951],
'青岛': [120.4651,36.3373],
'韶关': [113.7964,24.7028]
}
}
]
};
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div id="graphic" class="span8">
<div id="main" class="main" style="height: 530px;"></div>
<div>
<button onclick="refresh(true)">Refresh ~</button>
<span id='wrong-message' style="color:red"></span>
</div>
</div><!--/span-->
</div><!--/row-->
<hr>
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</a> &middot; <a href="../changelog.html" target="_blank">Changelog</a></p>
</footer>
</div><!--/.fluid-container-->
<script src="../asset/js/jquery.js"></script>
<script src="../asset/js/bootstrap-transition.js"></script>
<script src="../asset/js/bootstrap-alert.js"></script>
<script src="../asset/js/bootstrap-modal.js"></script>
<script src="../asset/js/bootstrap-dropdown.js"></script>
<script src="../asset/js/bootstrap-scrollspy.js"></script>
<script src="../asset/js/bootstrap-tab.js"></script>
<script src="../asset/js/bootstrap-tooltip.js"></script>
<script src="../asset/js/bootstrap-popover.js"></script>
<script src="../asset/js/bootstrap-button.js"></script>
<script src="../asset/js/bootstrap-collapse.js"></script>
<script src="../asset/js/bootstrap-carousel.js"></script>
<script src="../asset/js/bootstrap-typeahead.js"></script>
<script src="../asset/js/echartsExample.js"></script>
</body>
</html>
\ No newline at end of file
src/chart/bar.js
浏览文件 @ 9a1f313e
......@@ -25,6 +25,7 @@ define(function(require) {
var ecData = require('../util/ecData');
var zrColor = require('zrender/tool/color');
var zrUtil = require('zrender/tool/util');
var self = this;
self.type = ecConfig.CHART_TYPE_BAR;
......@@ -98,11 +99,11 @@ define(function(require) {
switch (position) {
case 'bottom' :
case 'top' :
_buildHorizontal(maxDataLength, locationMap);
_buildHorizontal(maxDataLength, locationMap, seriesArray);
break;
case 'left' :
case 'right' :
_buildVertical(maxDataLength, locationMap);
_buildVertical(maxDataLength, locationMap, seriesArray);
break;
}
}
......@@ -190,7 +191,7 @@ define(function(require) {
/**
* 构建类目轴为水平方向的柱形图系列
*/
function _buildHorizontal(maxDataLength, locationMap) {
function _buildHorizontal(maxDataLength, locationMap, seriesArray) {
// 确定类目轴和数值轴，同一方向随便找一个即可
var seriesIndex = locationMap[0][0];
var serie = series[seriesIndex];
......@@ -207,6 +208,7 @@ define(function(require) {
var barMinHeightMap = size.barMinHeightMap;
var barHeight;
var xMarkMap = {}; // 为标注记录一个横向偏移
var x;
var y;
var lastYP; // 正向堆叠处理
......@@ -285,6 +287,10 @@ define(function(require) {
barHeight,
'vertical'
);
xMarkMap[seriesIndex] = xMarkMap[seriesIndex] || {};
xMarkMap[seriesIndex][i] =
x + (barWidthMap[seriesIndex] || barWidth) / 2;
self.shapeList.push(barShape);
}
......@@ -333,12 +339,13 @@ define(function(require) {
x += ((barWidthMap[seriesIndex] || barWidth) + barGap);
}
}
_buildMark(seriesArray, xMarkMap, true);
}
/**
* 构建类目轴为垂直方向的柱形图系列
*/
function _buildVertical(maxDataLength, locationMap) {
function _buildVertical(maxDataLength, locationMap, seriesArray) {
// 确定类目轴和数值轴，同一方向随便找一个即可
var seriesIndex = locationMap[0][0];
var serie = series[seriesIndex];
......@@ -355,6 +362,7 @@ define(function(require) {
var barMinHeightMap = size.barMinHeightMap;
var barHeight;
var xMarkMap = {}; // 为标注记录一个横向偏移
var x;
var y;
var lastXP; // 正向堆叠处理
......@@ -433,6 +441,10 @@ define(function(require) {
barWidthMap[seriesIndex] || barWidth,
'horizontal'
);
xMarkMap[seriesIndex] = xMarkMap[seriesIndex] || {};
xMarkMap[seriesIndex][i] =
y - (barWidthMap[seriesIndex] || barWidth) / 2;
self.shapeList.push(barShape);
}
......@@ -483,6 +495,7 @@ define(function(require) {
y -= ((barWidthMap[seriesIndex] || barWidth) + barGap);
}
}
_buildMark(seriesArray, xMarkMap, false);
}
/**
* 我真是自找麻烦啊，为啥要允许系列级个性化最小宽度和高度啊！！！
......@@ -717,6 +730,59 @@ define(function(require) {
return barShape;
}
// 添加标注
function _buildMark(seriesArray, xMarkMap ,isHorizontal) {
var markPoint;
var mpData;
var pos;
var shapeList;
var serie;
var seriesIndex;
var xAxis;
var yAxis;
for (var j = 0, k = seriesArray.length; j < k; j++) {
seriesIndex = seriesArray[j];
serie = series[seriesIndex];
if (serie.markPoint && self.selectedMap[serie.name]) {
markPoint = zrUtil.clone(serie.markPoint);
for (var i = 0, l = markPoint.data.length; i < l; i++) {
mpData = markPoint.data[i];
xAxis = component.xAxis.getAxis(serie.xAxisIndex);
yAxis = component.yAxis.getAxis(serie.yAxisIndex);
if (isHorizontal) {
// 横向
pos = [
xMarkMap[seriesIndex][mpData.xAxis || 0],
yAxis.getCoord(mpData.yAxis || 0)
]
}
else {
// 纵向
pos = [
xAxis.getCoord(mpData.xAxis || 0),
xMarkMap[seriesIndex][mpData.yAxis || 0]
]
}
markPoint.data[i].x = typeof mpData.x != 'undefined'
? mpData.x : pos[0];
markPoint.data[i].y = typeof mpData.y != 'undefined'
? mpData.y : pos[1];
}
shapeList = self.markPoint(
serie, seriesIndex, markPoint, component
);
for (var i = 0, l = shapeList.length; i < l; i++) {
shapeList[i].zlevel = _zlevelBase + 1;
shapeList[i]._x = shapeList[i].style.x
+ shapeList[i].style.width / 2;
shapeList[i]._y = shapeList[i].style.y
+ shapeList[i].style.height / 2;
self.shapeList.push(shapeList[i]);
}
}
}
}
/**
* 构造函数默认执行的初始化方法，也用于创建实例后动态修改
* @param {Object} newSeries
......
src/chart/line.js
浏览文件 @ 9a1f313e
......@@ -25,6 +25,7 @@ define(function(require) {
var ecData = require('../util/ecData');
var zrColor = require('zrender/tool/color');
var zrUtil = require('zrender/tool/util');
var self = this;
self.type = ecConfig.CHART_TYPE_LINE;
......@@ -116,6 +117,7 @@ define(function(require) {
_buildVertical(maxDataLength, locationMap);
break;
}
_buildMark(seriesArray);
}
/**
......@@ -750,6 +752,54 @@ define(function(require) {
return itemShape;
}
// 添加标注
function _buildMark(seriesArray) {
var markPoint;
var mpData;
var pos;
var shapeList;
var serie;
var seriesIndex;
var xAxis;
var yAxis;
for (var j = 0, k = seriesArray.length; j < k; j++) {
seriesIndex = seriesArray[j];
serie = series[seriesIndex];
if (serie.markPoint && self.selectedMap[serie.name]) {
markPoint = zrUtil.clone(serie.markPoint);
for (var i = 0, l = markPoint.data.length; i < l; i++) {
mpData = markPoint.data[i];
xAxis = component.xAxis.getAxis(serie.xAxisIndex);
yAxis = component.yAxis.getAxis(serie.yAxisIndex);
pos = [
xAxis.type == ecConfig.COMPONENT_TYPE_AXIS_VALUE
? xAxis.getCoord(mpData.xAxis || 0)
: xAxis.getCoordByIndex(mpData.xAxis || 0),
yAxis.type == ecConfig.COMPONENT_TYPE_AXIS_VALUE
? yAxis.getCoord(mpData.yAxis || 0)
: yAxis.getCoordByIndex(mpData.yAxis || 0)
];
markPoint.data[i].x = typeof mpData.x != 'undefined'
? mpData.x : pos[0];
markPoint.data[i].y = typeof mpData.y != 'undefined'
? mpData.y : pos[1];
}
shapeList = self.markPoint(
serie, seriesIndex, markPoint, component
);
for (var i = 0, l = shapeList.length; i < l; i++) {
shapeList[i].zlevel = _zlevelBase + 1;
shapeList[i]._x = shapeList[i].style.x
+ shapeList[i].style.width / 2;
shapeList[i]._y = shapeList[i].style.y
+ shapeList[i].style.height / 2;
self.shapeList.push(shapeList[i]);
}
}
}
}
/**
* 构造函数默认执行的初始化方法，也用于创建实例后动态修改
* @param {Object} newSeries
......
src/chart/map.js
浏览文件 @ 9a1f313e
......@@ -195,6 +195,7 @@ define(function(require) {
vd, // 用户数据
ms // 系列
);
_buildMark(mt, ms);
if (--_mapDataRequireCounter <= 0) {
for (var i = 0, l = self.shapeList.length; i < l; i++) {
self.shapeList[i].id = zr.newShapeId(self.type);
......@@ -806,6 +807,46 @@ define(function(require) {
//console.log(_selected);
}
// 添加标注
function _buildMark(mapType, mapSeries) {
var markPoint;
var pos;
var shapeList;
for (var sIdx in mapSeries) {
if (series[sIdx].markPoint) {
markPoint = zrUtil.clone(series[sIdx].markPoint);
for (var i = 0, l = markPoint.data.length; i < l; i++) {
pos = _geoCoord[markPoint.data[i].name]
? geo2pos(
mapType, _geoCoord[markPoint.data[i].name]
)
: [0, 0];
markPoint.data[i].x =
typeof markPoint.data[i].x != 'undefined'
? markPoint.data[i].x
: pos[0];
markPoint.data[i].y =
typeof markPoint.data[i].y != 'undefined'
? markPoint.data[i].y
: pos[1];
}
shapeList = self.markPoint(
series[sIdx], sIdx, markPoint, component
);
var position = [
_mapDataMap[mapType].transform.left,
_mapDataMap[mapType].transform.top
];
for (var i = 0, l = shapeList.length; i < l; i++) {
shapeList[i].zlevel = _zlevelBase + 1;
shapeList[i]._mapType = mapType;
shapeList[i].position = position;
self.shapeList.push(shapeList[i]);
}
}
}
}
function _nameChange(mapType, name) {
return _nameMap[mapType][name] || name;
}
......
src/component/base.js
浏览文件 @ 9a1f313e
......@@ -8,6 +8,7 @@
define(function(require) {
function Base(zr){
var ecConfig = require('../config');
var ecData = require('../util/ecData');
var zrUtil = require('zrender/tool/util');
var self = this;
......@@ -259,6 +260,151 @@ define(function(require) {
}
}
function markPoint(series, seriesIndex, mpOption, component) {
zrUtil.merge(
mpOption,
ecConfig.markPoint,
{
'overwrite': false,
'recursive': true
}
);
mpOption.name = series.name;
var dataRange = component.dataRange;
var pList = [];
var data = mpOption.data;
var queryTarget;
var symbol;
var symbolSize;
var symbolRotate;
var itemShape;
// 多级控制
var color;
var nColor;
var eColor;
var nBorderColor;
var eBorderColor;
var nBorderWidth;
var eBorderWidth
var x;
var y;
for (var i = 0, l = data.length; i < l; i++) {
queryTarget = [data[i], mpOption];
symbol = self.deepQuery(queryTarget, 'symbol') || 'pin';
symbolSize = self.deepQuery(queryTarget,'symbolSize');
symbolSize = typeof symbolSize == 'function'
? symbolSize(data[i].value)
: symbolSize;
symbolRotate = self.deepQuery(queryTarget, 'symbolRotate');
color = (dataRange && !isNaN(data[i].value))
? dataRange.getColor(data[i].value)
: null;
// 用户设定优先于从值域控件里取
nColor = self.deepQuery(
queryTarget, 'itemStyle.normal.color'
)
|| color
|| (component.legend && component.legend.getColor(series.name));
eColor = self.deepQuery(
queryTarget, 'itemStyle.emphasis.color'
) || nColor;
nBorderColor = self.deepQuery(
queryTarget, 'itemStyle.normal.borderColor'
) || nColor;
eBorderColor = self.deepQuery(
queryTarget, 'itemStyle.emphasis.borderColor'
) || nBorderColor;
nBorderWidth = self.deepQuery(
queryTarget, 'itemStyle.normal.borderWidth'
);
eBorderWidth = self.deepQuery(
queryTarget, 'itemStyle.emphasis.borderWidth'
) || (nBorderWidth + 2);
x = data[i].x;
y = data[i].y;
itemShape = {
shape : 'icon',
style : {
iconType : symbol.replace('empty', '').toLowerCase(),
x : x - symbolSize,
y : y - symbolSize,
width : symbolSize * 2,
height : symbolSize * 2,
brushType : 'both',
color : symbol.match('empty')
? 'rgba(0,0,0,0)' : nColor,
strokeColor : nBorderColor,
lineWidth: nBorderWidth
},
highlightStyle : {
color : symbol.match('empty')
? 'rgba(0,0,0,0)' : eColor,
strokeColor : eBorderColor,
lineWidth: eBorderWidth
},
clickable : true
};
if (symbol.match('image')) {
itemShape.style.image =
symbol.replace(new RegExp('^image:\\/\\/'), '');
itemShape.shape = 'image';
}
if (typeof symbolRotate != 'undefined') {
itemShape.rotation = [
symbolRotate * Math.PI / 180, x, y
];
}
if (symbol.match('star')) {
itemShape.style.iconType = 'star';
itemShape.style.n =
(symbol.replace('empty', '').replace('star','') - 0)
|| 5;
}
if (symbol == 'none' ||(nColor == null && eColor == null)) {
itemShape.invisible = true;
itemShape.hoverable = false;
}
itemShape = self.addLabel(
itemShape,
mpOption,
data[i],
data[i].name,
'horizontal'
);
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,
data[i], 0,
data[i].name
);
pList.push(itemShape)
}
//console.log(pList);
return pList;
}
/**
* 百分比计算
*/
......@@ -347,6 +493,7 @@ define(function(require) {
self.deepMerge = deepMerge;
self.getFont = getFont;
self.addLabel = addLabel;
self.markPoint = markPoint;
self.parsePercent = parsePercent;
self.parseCenter = parseCenter;
self.parseRadius = parseRadius;
......
src/config.js
浏览文件 @ 9a1f313e
......@@ -88,8 +88,8 @@ define(function() {
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度，非标准参数
itemHeight: 14, // 图例图形高度，非标准参数
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: '#333' // 图例文字颜色
},
......@@ -148,7 +148,7 @@ define(function() {
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemSize: 16, // 工具箱图形宽度，非标准参数
itemSize: 16, // 工具箱图形宽度
feature : {
//mark : true,
//dataZoom : true,
......@@ -178,7 +178,7 @@ define(function() {
showContent: true, // tooltip主体内容
trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
// formatter: null // 内容格式器：{string}（Template） ¦ {Function}
islandFormatter: '{a} <br/>{b} : {c}', // 数据孤岛内容格式器，非标准参数
islandFormatter: '{a} <br/>{b} : {c}', // 数据孤岛内容格式器
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
transitionDuration : 0.4, // 动画变换时间，单位s
......@@ -435,7 +435,7 @@ define(function() {
label: {
show: false
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
// position: 默认自使用，水平布局为'top'，垂直布局为'right'，可选为
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
......@@ -452,7 +452,7 @@ define(function() {
label: {
show: false
// formatter: 标签文本格式器，同Tooltip.formatter，不支持回调
// position: 默认自使用，水平布局为'top'，垂直布局为'right'，可选为
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
......@@ -460,7 +460,7 @@ define(function() {
}
},
//smooth : false,
//symbol: null, // 拐点图形类型，非标准参数
//symbol: null, // 拐点图形类型
symbolSize: 2, // 可计算特性参数，空数据拖拽提示图形大小
//symbolRotate : null, // 拐点图形旋转控制
showAllSymbol: false // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
......@@ -492,13 +492,14 @@ define(function() {
scatter: {
xAxisIndex: 0,
yAxisIndex: 0,
//symbol: null, // 图形类型，非标准参数
//symbol: null, // 图形类型
symbolSize: 4, // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
//symbolRotate : null, // 拐点图形旋转控制
large: false, // 大规模散点图
largeThreshold: 2000,// 大规模阀值，large为true且数据量>largeThreshold才启用大规模模式
itemStyle: {
normal: {
// color: 各异,
label: {
show: false,
// 标签文本格式器，同Tooltip.formatter，不支持回调
......@@ -510,7 +511,7 @@ define(function() {
return c[0] + ' , ' + c[1];
}
}
// position: 默认自使用，水平布局为'top'，垂直布局为'right'，可选为
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
......@@ -527,7 +528,7 @@ define(function() {
return c[0] + ' , ' + c[1];
}
}
// position: 默认自使用，水平布局为'top'，垂直布局为'right'，可选为
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
......@@ -550,7 +551,7 @@ define(function() {
// color: 各异,
}
},
//symbol: null, // 拐点图形类型，非标准参数
//symbol: null, // 拐点图形类型
symbolSize: 2 // 可计算特性参数，空数据拖拽提示图形大小
},
......@@ -565,6 +566,7 @@ define(function() {
// roseType : null, // 南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）
itemStyle: {
normal: {
// color: 各异,
label: {
show: true,
position: 'outer'
......@@ -753,6 +755,36 @@ define(function() {
r: 15,
calculateStep: 0.1 // 滚轮可计算步长 0.1 = 10%
},
markPoint : {
symbol: 'pin', // 标注类型
symbolSize: 10, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
//symbolRotate : null,// 标注旋转控制
itemStyle: {
normal: {
// color: 各异，
// borderColor: '各异', // 标注边线颜色，优先于color
borderRadius: 0, // 标注边线圆角，单位px，默认为0，方形有效
borderWidth: 2, // 标注边线线宽，单位px，默认为1
label: {
show: true,
// 标签文本格式器，同Tooltip.formatter，不支持回调
// formatter : null,
position: 'inside' // 可选为'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
},
emphasis: {
label: {
show: true,
// 标签文本格式器，同Tooltip.formatter，不支持回调
// formatter : null,
position: 'inside' // 可选为'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
}
}
},
textStyle: {
decoration: 'none',
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或