Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

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

新增【timeAxis】支持

上级 0290c430
隐藏空白更改
内联 并排
Showing with 435 addition and 13 deletion
doc/example/scatter6.html 0 → 100644
浏览文件 @ 9e5b551c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="linzhifeng@baidu.com">
<title>ECharts · Example</title>
<link rel="shortcut icon" href="../asset/ico/favicon.png">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="../asset/css/bootstrap.css" rel="stylesheet">
<link href="../asset/css/carousel.css" rel="stylesheet">
<link href="../asset/css/echartsHome.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<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/codemirror.css" rel="stylesheet">
<link href="../asset/css/monokai.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
<div class="container-fluid">
<div class="row-fluid example">
<div id="sidebar-code" class="col-md-4">
<div class="well sidebar-nav">
<div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
<textarea id="code" name="code">
option = {
title : {
text : '时间坐标散点图',
subtext : 'dataZoom支持'
},
tooltip : {
trigger: 'item',
formatter : function (value) {
return value[0] + ' （' + '类目' + value[2][0] + '）<br/>'
+ value[2][1] + ', '
+ value[2][2];
}
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataZoom: {
show: true,
start : 30,
end : 70
},
legend : {
data : ['series1']
},
datadRange: {
min: 0,
max: 100,
orient: 'horizontal',
y: 30,
x: 'center',
//text:['高','低'], // 文本，默认为数值文本
color:['lightgreen','orange'],
splitNumber: 5
},
grid: {
y2: 80
},
xAxis : [
{
type : 'time',
splitNumber:10
}
],
yAxis : [
{
type : 'value'
}
],
animation: false,
series : [
{
name:'series1',
type:'scatter',
symbolSize: function (value){
return Math.round(value[2]/10);
},
data: (function () {
var d = [];
var len = 0;
var now = new Date();
var value;
while (len++ < 1500) {
d.push([
new Date(2014, 9, 1, 0, Math.round(Math.random()*10000)),
(Math.random()*30).toFixed(2) - 0,
(Math.random()*100).toFixed(2) - 0
]);
}
return d;
})()
}
]
};
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div id="graphic" class="col-md-8">
<div id="main" class="main"></div>
<div>
<button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
<span class="text-primary">切换主题</span>
<select id="theme-select"></select>
<span id='wrong-message' style="color:red"></span>
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
<footer id="footer"></footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../asset/js/jquery.min.js"></script>
<script type="text/javascript" src="../asset/js/echartsHome.js"></script>
<script src="../asset/js/bootstrap.min.js"></script>
<script src="../asset/js/echartsExample.js"></script>
</body>
</html>
src/component/dataZoom.js
浏览文件 @ 9e5b551c
......@@ -14,6 +14,7 @@ define(function (require) {
var IconShape = require('../util/shape/Icon');
var ecConfig = require('../config');
var ecDate = require('../util/date');
var zrUtil = require('zrender/tool/util');
/**
......@@ -289,10 +290,14 @@ define(function (require) {
// x轴极值
var Axis = componentLibrary.get('axis');
var axisOption = zrUtil.clone(this.option.xAxis);
axisOption[0].type = 'value';
if (axisOption[0].type == 'category') {
axisOption[0].type = 'value';
}
// axisOption[0].scale = true;
// axisOption[0].boundary = [0, 0];
axisOption[1] && (axisOption[1].type = 'value');
if (axisOption[1] && axisOption[1].type == 'category') {
axisOption[1].type = 'value';
}
var vAxis = new Axis(
this.ecTheme,
......@@ -311,10 +316,14 @@ define(function (require) {
// y轴极值
axisOption = zrUtil.clone(this.option.yAxis);
axisOption[0].type = 'value';
if (axisOption[0].type == 'category') {
axisOption[0].type = 'value';
}
// axisOption[0].scale = true;
// axisOption[1].boundary = [0, 0];
axisOption[1] && (axisOption[1].type = 'value');
if (axisOption[1] && axisOption[1].type == 'category') {
axisOption[1].type = 'value';
}
vAxis = new Axis(
this.ecTheme,
null, // messageCenter
......@@ -867,13 +876,37 @@ define(function (require) {
return {
start : data[start],
end : data[end]
}
};
}
var seriesIndex = this._zoom.seriesIndex[0];
var axisIndex = this.option.series[seriesIndex][key + 'Index'] || 0;
var axisType = this.option[key][axisIndex].type;
var min = this._zoom.scatterMap[seriesIndex][key.charAt(0)].min;
var max = this._zoom.scatterMap[seriesIndex][key.charAt(0)].max;
var gap = max - min;
if (axisType == 'value') {
return {
start : min + gap * this._zoom.start / 100,
end : min + gap * this._zoom.end / 100
};
}
else if (axisType == 'time') {
// 最优解
max = min + gap * this._zoom.end / 100;
min = min + gap * this._zoom.start / 100;
var formatter = ecDate.getAutoFormatter(min, max).formatter;
return {
start : ecDate.format(formatter, min),
end : ecDate.format(formatter, max)
};
}
return {
start : '',
end : ''
}
};
},
/**
......@@ -942,6 +975,7 @@ define(function (require) {
this._startShape.style.textPosition = this._endShape.style.textPosition = 'inside';
this.zr.modShape(this._startShape.id);
this.zr.modShape(this._endShape.id);
this.zr.refreshNextFrame();
}
this.isDragend = true;
},
......
src/component/valueAxis.js
浏览文件 @ 9e5b551c
......@@ -14,6 +14,7 @@ define(function (require) {
var RectangleShape = require('zrender/shape/Rectangle');
var ecConfig = require('../config');
var ecDate = require('../util/date');
var zrUtil = require('zrender/tool/util');
/**
......@@ -44,6 +45,7 @@ define(function (require) {
ValueAxis.prototype = {
type: ecConfig.COMPONENT_TYPE_AXIS_VALUE,
_buildShape: function () {
this._hasData = false;
this._calculateValue();
......@@ -507,7 +509,7 @@ define(function (require) {
}
}
//console.log(this._min,this._max,'vvvvv111111')
// console.log(this._min,this._max,'vvvvv111111',this.option.type)
var gap = Math.abs(this._max - this._min);
this._min = isNaN(this.option.min - 0)
? (this._min - Math.abs(gap * this.option.boundaryGap[0]))
......@@ -529,14 +531,18 @@ define(function (require) {
this._max = this._max / this.option.splitNumber;
}
}
this._reformValue(this.option.scale);
this.option.type != 'time'
? this._reformValue(this.option.scale)
: this._reformTimeValue();
}
else {
this._hasData = true;
// 用户指定min max就不多管闲事了
this._min = this.option.min - 0; // 指定min忽略boundaryGay[0]
this._max = this.option.max - 0; // 指定max忽略boundaryGay[1]
this._customerValue();
this.option.type != 'time'
? this._customerValue()
: this._reformTimeValue();
}
},
......@@ -725,6 +731,76 @@ define(function (require) {
this._reformLabelData();
},
/**
* 格式化时间值
*/
_reformTimeValue : function() {
var splitNumber = this.option.splitNumber;
// 最优解
var curValue = ecDate.getAutoFormatter(this._min, this._max, splitNumber);
// 目标
var formatter = curValue.formatter;
var gapValue = curValue.gapValue;
this._valueList = [new Date(this._min)];
var startGap;
switch (formatter) {
case 'week' :
startGap = ecDate.nextMonday(this._min);
break;
case 'month' :
startGap = ecDate.nextNthOnMonth(this._min, 1);
break;
case 'quarter' :
startGap = ecDate.nextNthOnQuarterYear(this._min, 1);
break;
case 'half-year' :
startGap = ecDate.nextNthOnHalfYear(this._min, 1);
break;
case 'year' :
startGap = ecDate.nextNthOnYear(this._min, 1);
break;
default :
// 大于2小时需要考虑时区不能直接取整
if (gapValue <= 3600000 * 2) {
startGap = (Math.floor(this._min / gapValue) + 1) * gapValue;
}
else {
startGap = new Date(this._min - (-gapValue));
startGap.setHours(Math.round(startGap.getHours() / 6) * 6);
startGap.setMinutes(0);
startGap.setSeconds(0);
}
break;
}
if (startGap - this._min < gapValue / 2) {
startGap -= -gapValue;
}
// console.log(startGap,gapValue,this._min, this._max,formatter)
curValue = new Date(startGap);
splitNumber *= 1.5;
while (splitNumber--) {
if (formatter == 'month'
|| formatter == 'quarter'
|| formatter == 'half-year'
|| formatter == 'year'
) {
curValue.setDate(1);
}
if (this._max - curValue < gapValue / 2) {
break;
}
this._valueList.push(curValue);
curValue = new Date(curValue - (-gapValue));
}
this._valueList.push(new Date(this._max));
this._reformLabelData(formatter);
},
_customerValue: function () {
var splitNumber = this.option.splitNumber;
var precision = this.option.precision;
......@@ -737,28 +813,38 @@ define(function (require) {
this._reformLabelData();
},
_reformLabelData: function () {
_reformLabelData: function (timeFormatter) {
this._valueLabel = [];
var formatter = this.option.axisLabel.formatter;
if (formatter) {
for (var i = 0, l = this._valueList.length; i < l; i++) {
if (typeof formatter === 'function') {
this._valueLabel.push(formatter.call(this.myChart, this._valueList[i]));
this._valueLabel.push(
timeFormatter
? formatter.call(this.myChart, this._valueList[i], timeFormatter)
: formatter.call(this.myChart, this._valueList[i])
);
}
else if (typeof formatter === 'string') {
this._valueLabel.push(
formatter.replace('{value}',this._valueList[i])
timeFormatter
? ecDate.format(formatter, this._valueList[i])
: formatter.replace('{value}',this._valueList[i])
);
}
}
}
else if (timeFormatter) {
for (var i = 0, l = this._valueList.length; i < l; i++) {
this._valueLabel.push(ecDate.format(timeFormatter, this._valueList[i]));
}
}
else {
// 每三位默认加,格式化
for (var i = 0, l = this._valueList.length; i < l; i++) {
this._valueLabel.push(this.numAddCommas(this._valueList[i]));
}
}
},
getExtremum: function () {
......
src/util/date.js 0 → 100644
浏览文件 @ 9e5b551c
/**
* echarts日期运算格式化相关
*
* @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
* @author Kener (@Kener-林峰, linzhifeng@baidu.com)
*
*/
define(function() {
var _timeGap = [
{formatter: 'hh : mm : ss', value: 1000}, // 1s
{formatter: 'hh : mm : ss', value: 1000 * 5}, // 5s
{formatter: 'hh : mm : ss', value: 1000 * 10}, // 10s
{formatter: 'hh : mm : ss', value: 1000 * 15}, // 15s
{formatter: 'hh : mm : ss', value: 1000 * 30}, // 30s
{formatter: 'hh : mm\nMM - dd', value: 60000}, // 1m
{formatter: 'hh : mm\nMM - dd', value: 60000 * 5}, // 5m
{formatter: 'hh : mm\nMM - dd', value: 60000 * 10}, // 10m
{formatter: 'hh : mm\nMM - dd', value: 60000 * 15}, // 15m
{formatter: 'hh : mm\nMM - dd', value: 60000 * 30}, // 30m
{formatter: 'hh : mm\nMM - dd', value: 3600000}, // 1h
{formatter: 'hh : mm\nMM - dd', value: 3600000 * 2}, // 2h
{formatter: 'hh : mm\nMM - dd', value: 3600000 * 6}, // 6h
{formatter: 'hh : mm\nMM - dd', value: 3600000 * 12}, // 12h
{formatter: 'MM - dd\nyyyy', value: 3600000 * 24}, // 1d
{formatter: 'week', value: 3600000 * 24 * 7}, // 7d
{formatter: 'month', value: 3600000 * 24 * 31}, // 1M
{formatter: 'quarter', value: 3600000 * 24 * 380 / 4}, // 3M
{formatter: 'half-year', value: 3600000 * 24 * 380 / 2},// 6M
{formatter: 'year', value: 3600000 * 24 * 380} // 1Y
];
/**
* 获取最佳formatter
* @params {number} min 最小值
* @params {number} max 最大值
* @params {=number} splitNumber 分隔段数
*/
function getAutoFormatter(min, max, splitNumber) {
splitNumber = splitNumber > 1 ? splitNumber : 2;
// 最优解
var curValue;
var totalGap;
// 目标
var formatter;
var gapValue;
for (var i = 0, l = _timeGap.length; i < l; i++) {
curValue = _timeGap[i].value;
totalGap = Math.ceil(max / curValue) * curValue
- Math.floor(min / curValue) * curValue;
if (Math.round(totalGap / curValue) <= splitNumber * 1.2) {
formatter = _timeGap[i].formatter;
gapValue = _timeGap[i].value;
// console.log(formatter, gapValue,i);
break;
}
}
if (formatter == null) {
formatter = 'year';
curValue = 3600000 * 24 * 367;
totalGap = Math.ceil(max / curValue) * curValue
- Math.floor(min / curValue) * curValue;
gapValue = Math.round(totalGap / (splitNumber - 1) / curValue) * curValue;
}
return {
formatter: formatter,
gapValue: gapValue
};
}
/**
* 一位数字补0
*/
function s2d (v) {
return v < 10 ? ('0' + v) : v;
}
/**
* 百分比计算
*/
function format(formatter, value) {
if (formatter == 'week'
|| formatter == 'month'
|| formatter == 'quarter'
|| formatter == 'half-year'
|| formatter == 'year'
) {
formatter = 'MM - dd\nyyyy';
}
var date = new Date(value);
var y = date.getFullYear();
var M = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
formatter = formatter.replace('MM', s2d(M));
formatter = formatter.toLowerCase();
formatter = formatter.replace('yyyy', y);
formatter = formatter.replace('yy', y % 100);
formatter = formatter.replace('dd', s2d(d));
formatter = formatter.replace('d', d);
formatter = formatter.replace('hh', s2d(h));
formatter = formatter.replace('h', h);
formatter = formatter.replace('mm', s2d(m));
formatter = formatter.replace('m', m);
formatter = formatter.replace('ss', s2d(s));
formatter = formatter.replace('s', s);
return formatter;
}
function nextMonday(value) {
value = new Date(value);
value.setDate(value.getDate() + 8 - value.getDay());
return value;
}
function nextNthPerNmonth(value, nth, nmon) {
value = new Date(value);
value.setMonth(Math.ceil((value.getMonth() + 1) / nmon) * nmon);
value.setDate(nth);
return value;
}
function nextNthOnMonth(value, nth) {
return nextNthPerNmonth(value, nth, 1);
}
function nextNthOnQuarterYear(value, nth) {
return nextNthPerNmonth(value, nth, 3);
}
function nextNthOnHalfYear(value, nth) {
return nextNthPerNmonth(value, nth, 6);
}
function nextNthOnYear(value, nth) {
return nextNthPerNmonth(value, nth, 12);
}
return {
getAutoFormatter: getAutoFormatter,
format: format,
nextMonday: nextMonday,
nextNthPerNmonth: nextNthPerNmonth,
nextNthOnMonth: nextNthOnMonth,
nextNthOnQuarterYear: nextNthOnQuarterYear,
nextNthOnHalfYear: nextNthOnHalfYear,
nextNthOnYear : nextNthOnYear
};
});
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或