提交 fadd309b 编写于 作者: K kener

1.2.0 release

上级 2e06ecd6
......@@ -26,10 +26,10 @@ ECharts (Enterprise Charts 商业产品图表库)
----
### 混搭
混搭的图表会更具表现力也更有有趣味,ECharts提供的图表(共7类11种)支持任意混搭:
混搭的图表会更具表现力也更有趣味,ECharts提供的图表(共8类13种)支持任意混搭:
折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、
饼图(环形图)、地图、力导布局图。
饼图(环形图)、雷达图、地图、力导布局图。
混搭情况下一个标准图表:包含唯一图例、工具箱、数据区域缩放、值域漫游模块,一个直角坐标系(可包含一条或多条类目轴线,一条或多条值轴线,最多上下左右四条)
......@@ -82,6 +82,11 @@ ECharts提供了方便快捷的图例开关,可以随时切换到你所关心
![ECharts 数据区域选择](doc/asset/img/scatter.gif)
### 动态数据添加
如果你需要展示有实时变化的数据,相信这个动态接口会对你很有帮助。
![ECharts 标线辅助](doc/asset/img/dynamic1.gif)
### 标线辅助
趋势线?平均线?未来走势?修正值?有需求用户自然知道用意~
......
/*
* 图表按需加载,如需链接带入相关图表,选择性打开echarts.js中build注释内图表引用
*/
{
// appDir: './',
baseUrl: '../src',
//optimize: 'none', // 是否压缩
name: 'echarts',
packages: [
{
name: 'zrender',
location: '../../zrender/src',
main: 'zrender'
},
{
name: 'echarts',
location: '.',
main: 'echarts'
}
],
include:[
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/radar',
'echarts/chart/force',
'echarts/chart/map',
'echarts/util/mapData/china/0', // 全国
'echarts/util/mapData/china/65', // 新疆
'echarts/util/mapData/china/54', // 西藏
'echarts/util/mapData/china/15', // 内蒙古
'echarts/util/mapData/china/63', // 青海
'echarts/util/mapData/china/51', // 四川
'echarts/util/mapData/china/23', // 黑龙江
'echarts/util/mapData/china/62', // 甘肃
'echarts/util/mapData/china/53', // 云南
'echarts/util/mapData/china/45', // 广西
'echarts/util/mapData/china/43', // 湖南
'echarts/util/mapData/china/61', // 陕西
'echarts/util/mapData/china/44', // 广东
'echarts/util/mapData/china/22', // 吉林
'echarts/util/mapData/china/13', // 河北
'echarts/util/mapData/china/42', // 湖北
'echarts/util/mapData/china/52', // 贵州
'echarts/util/mapData/china/37', // 山东
'echarts/util/mapData/china/36', // 江西
'echarts/util/mapData/china/41', // 河南
'echarts/util/mapData/china/21', // 辽宁
'echarts/util/mapData/china/14', // 山西
'echarts/util/mapData/china/34', // 安徽
'echarts/util/mapData/china/35', // 福建
'echarts/util/mapData/china/33', // 浙江
'echarts/util/mapData/china/32', // 江苏
'echarts/util/mapData/china/50', // 重庆
'echarts/util/mapData/china/64', // 宁夏
'echarts/util/mapData/china/46', // 海南
'echarts/util/mapData/china/71', // 台湾
'echarts/util/mapData/china/11', // 北京
'echarts/util/mapData/china/12', // 天津
'echarts/util/mapData/china/31', // 上海
'echarts/util/mapData/china/81', // 香港
'echarts/util/mapData/china/82', // 澳门
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie'
],
out: 'echarts-map.js'
}
\ No newline at end of file
/*
* 图表按需加载,如需链接带入相关图表,选择性打开echarts.js中build注释内图表引用
*/
{
// appDir: './',
baseUrl: '../src',
optimize: 'none', // 是否压缩
name: 'echarts',
packages: [
{
name: 'zrender',
location: '../../zrender/src',
main: 'zrender'
},
{
name: 'echarts',
location: '.',
main: 'echarts'
}
],
include:[
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/radar',
'echarts/chart/force',
'echarts/chart/map',
'echarts/util/mapData/china/0', // 全国
'echarts/util/mapData/china/65', // 新疆
'echarts/util/mapData/china/54', // 西藏
'echarts/util/mapData/china/15', // 内蒙古
'echarts/util/mapData/china/63', // 青海
'echarts/util/mapData/china/51', // 四川
'echarts/util/mapData/china/23', // 黑龙江
'echarts/util/mapData/china/62', // 甘肃
'echarts/util/mapData/china/53', // 云南
'echarts/util/mapData/china/45', // 广西
'echarts/util/mapData/china/43', // 湖南
'echarts/util/mapData/china/61', // 陕西
'echarts/util/mapData/china/44', // 广东
'echarts/util/mapData/china/22', // 吉林
'echarts/util/mapData/china/13', // 河北
'echarts/util/mapData/china/42', // 湖北
'echarts/util/mapData/china/52', // 贵州
'echarts/util/mapData/china/37', // 山东
'echarts/util/mapData/china/36', // 江西
'echarts/util/mapData/china/41', // 河南
'echarts/util/mapData/china/21', // 辽宁
'echarts/util/mapData/china/14', // 山西
'echarts/util/mapData/china/34', // 安徽
'echarts/util/mapData/china/35', // 福建
'echarts/util/mapData/china/33', // 浙江
'echarts/util/mapData/china/32', // 江苏
'echarts/util/mapData/china/50', // 重庆
'echarts/util/mapData/china/64', // 宁夏
'echarts/util/mapData/china/46', // 海南
'echarts/util/mapData/china/71', // 台湾
'echarts/util/mapData/china/11', // 北京
'echarts/util/mapData/china/12', // 天津
'echarts/util/mapData/china/31', // 上海
'echarts/util/mapData/china/81', // 香港
'echarts/util/mapData/china/82', // 澳门
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie'
],
out: 'echarts-original-map.js'
}
\ No newline at end of file
/*
* 图表按需加载,如需链接带入相关图表,选择性打开echarts.js中build注释内图表引用
*/
{
// appDir: './',
baseUrl: '../src',
optimize: 'none', // 是否压缩
name: 'echarts',
packages: [
{
name: 'zrender',
location: '../../zrender/src',
main: 'zrender'
},
{
name: 'echarts',
location: '.',
main: 'echarts'
}
],
include:[
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/radar',
'echarts/chart/force',
/*
'echarts/chart/map',
'echarts/util/mapData/china/0', // 全国
'echarts/util/mapData/china/65', // 新疆
'echarts/util/mapData/china/54', // 西藏
'echarts/util/mapData/china/15', // 内蒙古
'echarts/util/mapData/china/63', // 青海
'echarts/util/mapData/china/51', // 四川
'echarts/util/mapData/china/23', // 黑龙江
'echarts/util/mapData/china/62', // 甘肃
'echarts/util/mapData/china/53', // 云南
'echarts/util/mapData/china/45', // 广西
'echarts/util/mapData/china/43', // 湖南
'echarts/util/mapData/china/61', // 陕西
'echarts/util/mapData/china/44', // 广东
'echarts/util/mapData/china/22', // 吉林
'echarts/util/mapData/china/13', // 河北
'echarts/util/mapData/china/42', // 湖北
'echarts/util/mapData/china/52', // 贵州
'echarts/util/mapData/china/37', // 山东
'echarts/util/mapData/china/36', // 江西
'echarts/util/mapData/china/41', // 河南
'echarts/util/mapData/china/21', // 辽宁
'echarts/util/mapData/china/14', // 山西
'echarts/util/mapData/china/34', // 安徽
'echarts/util/mapData/china/35', // 福建
'echarts/util/mapData/china/33', // 浙江
'echarts/util/mapData/china/32', // 江苏
'echarts/util/mapData/china/50', // 重庆
'echarts/util/mapData/china/64', // 宁夏
'echarts/util/mapData/china/46', // 海南
'echarts/util/mapData/china/71', // 台湾
'echarts/util/mapData/china/11', // 北京
'echarts/util/mapData/china/12', // 天津
'echarts/util/mapData/china/31', // 上海
'echarts/util/mapData/china/81', // 香港
'echarts/util/mapData/china/82', // 澳门
*/
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie'
],
out: 'echarts-original.js'
}
\ No newline at end of file
node r.js -o build.js
node r.js -o build-original.js
node r.js -o build-map.js
node r.js -o build-original-map.js
\ No newline at end of file
......@@ -21,7 +21,7 @@
include:[
'echarts/chart/scatter',
'echarts/chart/k',
//'echarts/chart/radar',
'echarts/chart/radar',
'echarts/chart/force',
/*
'echarts/chart/map',
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
因为 它太大了无法显示 source diff 。你可以改为 查看blob
......@@ -60,5 +60,5 @@
}(window.jQuery);
var lrl = document.getElementById('last-release-link');
lrl.href = 'https://github.com/ecomfe/echarts/archive/1.1.2.zip';
lrl.innerHTML = 'ZIP (1.1.2)'
\ No newline at end of file
lrl.href = 'https://github.com/ecomfe/echarts/archive/1.2.0.zip';
lrl.innerHTML = 'ZIP (1.2.0)'
\ No newline at end of file
require.config({
paths:{
echarts:'example/www/js/echarts',
'echarts/chart/bar' : 'example/www/js/echarts',
'echarts/chart/line': 'example/www/js/echarts'
}
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
function(ec) {
myChart = ec.init(document.getElementById('main'));
option = {
title : {
text: 'Data Dancing',
x: 'center',
textStyle: {
fontSize: 28
}
},
toolbox: {
show : true,
feature : {
mark : true,
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
xAxis : [
{
type : 'category',
axisLabel:{formatter:' '},
data : (function() {
var res = [];
for (var i = 0; i < 30; i++) {
res.push(i);
}
return res;
})()
}
],
yAxis : [
{
type : 'value',
splitNumber:6,
min:-30,
max:30,
power:1,
splitArea : {show : true}
}
],
animationDuration: 3000,
animationEasing: 'BounceOut',
addDataAnimation : false,
series : [
{
name:'1',
type:'bar',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
symbol:'none',
barMinHeight:0,
data : dataDanceing[Math.floor(Math.random()*3)](1)
},
{
name:'2',
type:'bar',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
symbol:'none',
barMinHeight:0,
data : dataDanceing[Math.floor(Math.random()*3)](-1)
}
]
};
danceStep1 = option.series[0].data;
danceStep2 = option.series[1].data;
start(ecReady = true);
}
);
// ------------------------------------
var dataDanceing = [
function(n) {
var res = [];
var p = Math.round(Math.random()*10) % 2 == 0;
for (var i = 0; i < 30; i++) {
res[p ? 'push' : 'unshift'](i * n);
}
//console.log('1--',res);
return res;
},
function(n) {
var res = [];
var p = Math.round(Math.random()*10) % 2 == 0;
for (var i = 0; i < 30; i++) {
i % 2 == 0
? res[p ? 'push' : 'unshift']((p ? i : (30 - i)) * n)
: res[p ? 'unshift' : 'push']((p ? i : (30 - i)) * n);
}
//console.log('2--',res);
return res;
},
function(n) {
var res = [];
var p = Math.round(Math.random()*10) % 2 == 0;
for (var i = 0; i < 60; i++) {
res[p ? 'push' : 'unshift']((i - 30) * n);
}
//console.log('3--',res);
return res;
},
function(n) {
var res = [];
var p = Math.round(Math.random()*10) % 2 == 0;
for (var i = 0; i < 30; i++) {
res[p ? 'push' : 'unshift']((i * n) * (i % 2 == 0 ? 1 : -1));
}
//console.log('3--',res);
return res;
}
];
var myChart;
var option;
var ecReady = false;
var password = false;
var mReady = false;
var danceStep1;
var danceStep2;
var timeTicket;
var playing = false;
function start(){
if (ecReady && password && mReady && !playing) {
if (!document.createElement('canvas').getContext) {
alert('亲,换个浏览器吧');
password = false;
playing = false;
return;
}
document.getElementById('main-wrap').className = 'ddshow';
audioV3.play();
playing = true;
myChart.setOption(option, true);
setTimeout(function(){
timeTicket = setInterval(function(){
if (danceStep1.length == 0 && playing) {
danceStep1 = dataDanceing[Math.floor(Math.random()*dataDanceing.length)](Math.round(Math.random()*10)%2==0?1:-1);
}
if (danceStep2.length == 0 && playing) {
danceStep2 = dataDanceing[Math.floor(Math.random()*dataDanceing.length)](Math.round(Math.random()*10)%2==0?1:-1);
}
if (danceStep1.length > 0 && danceStep2.length) {
// 动态数据接口 addData
myChart.addData([
[
0, // 系列索引
danceStep1.pop(), // 新增数据
false, // 新增数据是否从队列头部插入
false // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
],
[
1, // 系列索引
danceStep2.pop(), // 新增数据
false, // 新增数据是否从队列头部插入
false, // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
]
]);
}
else {
clearInterval(timeTicket);
setTimeout(function(){
option.series[0].data = dataDanceing[1](1);
option.series[1].data = dataDanceing[1](-1);
var _backupSeries = option.series;
var es = [[],[2,3,4,5,6,7,8],[2,5,8],[2,5,8],[],[3,4,5,6,7],[2,8],[2,8],[],[2,3,4,5,6,7,8],[5],[2,3,4,5,6,7,8],[],[4,5,6,7,8],[2,3,6],[4,5,6,7,8],[],[2,3,4,5,6,7,8],[2,5],[2,3,4,6,7,8],[],[2],[2,3,4,5,6,7,8],[2],[],[3,4,8],[2,5,8],[2,6,7]];
var data= [];
for (var i = 0, l = es.length; i < l; i++) {
for (var j = 0, k = es[i].length; j < k; j++) {
data.push([i + 1, 4.5 * (8 - es[i][j]) + 2, 1])
}
}
option.series = [
{
type:'scatter',
symbol:'rectangle',
symbolSize:6,
data: data.splice(0,13)
},
{
type:'scatter',
symbol:'circle',
symbolSize:6,
data: data
},
{
type:'bar',
itemStyle: {normal: {
color: (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 200, 0, 400,
[[0, 'rgba(144,238,144,0.8)'],[0.8, 'rgba(255,255,0,0.8)']]
);
})(),
areaStyle: {type: 'default'}
}},
symbol:'none',
barMinHeight:0,
data : dataDanceing[1](-1)
}
];
option.title.text= 'Welcome';
myChart.setOption(option, true);
option.series = _backupSeries;
option.title.text = 'Data Dancing';
},500);
}
}, 100);
},3800);
}
}
// --------------------
var audioV3 = document.getElementById('audioV3');
audioV3.addEventListener && audioV3.addEventListener(
'ended',
function(){
playing = false;
}
)
audioV3.addEventListener && audioV3.addEventListener(
'canplaythrough',
function() {
start(mReady = true);
}
);
audioV3.src = 'asset/img/dataDancing.mp3';
// -----------
var k = [101,99,104,97,114,116,115];
var progress = 0;
document.body.addEventListener && document.body.addEventListener(
'keypress',
function(p) {
var curCode = p.keyCode;
if (k[progress] == p.keyCode) {
progress++;
}
else {
progress = 0;
}
progress == k.length && start(password = true, progress = 0);
}
)
\ No newline at end of file
......@@ -92,7 +92,7 @@ else {
'echarts/chart/scatter': fileLocation,
'echarts/chart/k': fileLocation,
'echarts/chart/pie': fileLocation,
// 'echarts/chart/radar': fileLocation,
'echarts/chart/radar': fileLocation,
'echarts/chart/map': fileLocation,
'echarts/chart/force': fileLocation
}
......@@ -108,7 +108,6 @@ require(
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/pie',
'echarts',
'echarts/chart/radar',
'echarts/chart/force',
needMap() ? 'echarts/chart/map' : 'echarts'
......
......@@ -14,10 +14,23 @@
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="asset/ico/favicon.png">
<style type="text/css">
.ddhide {
height:0;
overflow:hidden;
}
.ddshow {
height:400px;
overflow:hidden;
transition:height 2s;
-moz-transition:height 2s;
-webkit-transition:height 2s;
-o-transition:height 2s;
}
</style>
</head>
<body>
<!-- NAVBAR
================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
......@@ -60,14 +73,29 @@
</div><!-- /.navbar-wrapper -->
<div class="container">
<div id="main-wrap" class="ddhide">
<div id="main" style="height:400px;"></div>
</div>
<audio id="audioV3"></audio>
<h2>修改记录</h2>
<span>[+]新增 [-]删除 [^]升级 [#]修复 【】重要</span>
<div class="row-fluid">
<div>
<h3>undergoing<small>(2013-08-00</small></h3>
<h3>1.2.0<small>(2013-09-13</small></h3>
<ul>
<li>[^] 批量删除shape优化</li>
<li>【+】 [radar] 雷达图</li>
<li>【+】 动态数据添加接口及动画支持 support <a href="https://github.com/ecomfe/echarts/issues/45" target="_blank">this 》</a></li>
<li>【+】 [map] 数据压缩算法(1.65M > 350K)、动态加载</li>
<li>[+] [polar] 极坐标</li>
<li>[^] [grid] 直角坐标系网格自适应配置优化, support <a href="http://www.oschina.net/question/1255841_123578" target="_blank">this 》</a></li>
<li>[^] [dataZoom] zoomLock下手柄拖拽转移以提高用户体验</li>
<li>[^] [tooltip] 全局mouseout、层级优化</li>
<li>[+] [line] showAllSymbol控制显示所有拐点标识</li>
<li>[^] refresh接口优化</li>
<li>[#] 修复组件resize响应 fix <a href="https://github.com/ecomfe/echarts/issues/68" target="_blank">this 》</a></li>
<li>[#] [legend] 饼图个性化颜色取值错误,fix <a href="http://www.oschina.net/question/209138_125256" target="_blank">this 》</a></li>
<li>[#] [tooltip] 数组类型数值类型打包错误,fix <a href="https://github.com/ecomfe/echarts/issues/82" target="_blank">this 》</a></li>
<li>[?] 依赖升级,<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a> 1.0.3+</li>
</ul>
</div>
<div>
......@@ -170,6 +198,8 @@
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="asset/js/esl/esl.js"></script>
<script src="asset/js/dataDancing.js"></script>
<script src="asset/js/jquery.js"></script>
<script src="asset/js/bootstrap-transition.js"></script>
<script src="asset/js/bootstrap-alert.js"></script>
......@@ -183,6 +213,5 @@
<script src="asset/js/bootstrap-collapse.js"></script>
<script src="asset/js/bootstrap-carousel.js"></script>
<script src="asset/js/bootstrap-typeahead.js"></script>
</body>
</html>
......@@ -109,6 +109,7 @@
<li><a href="#AxisSplitarea">splitArea</a></li>
<li><a href="#AxisData">data</a></li>
</ul>
<li><a href="#Polar">polar</a></li>
<li><a href="#Series">series</a></li>
<ul>
<li><a href="#SeriesData">data</a></li>
......@@ -1599,6 +1600,103 @@ feature : {
&#39;May&#39;, &#39;...&#39;
]
</pre>
</div>
<h4>polar<a name="Polar"> </a></h4>
<P> 极坐标:</P>
<table cellspacing="0" class="ADoc_table full">
<tr>
<th> 名称 </th>
<th> 默认值 </th>
<th> 描述 </th>
</tr>
<tr>
<td> {number} startAngle </td>
<td> 90 </td>
<td> 开始角度, 有效输入范围:[-180,180]</td>
</tr>
<tr>
<td> {number} splitNumber </td>
<td> 5 </td>
<td> 分割段数,默认为5 </td>
</tr>
<tr>
<td> {Array} center </td>
<td> null </td>
<td> 圆心坐标,默认为[width / 2, height / 2]自适应居中 </td>
</tr>
<tr>
<td> {number} radius </td>
<td> 自适应 </td>
<td> 半径,默认为Min(width, height) / 2 - 50 </td>
</tr>
<tr>
<td> {object} name </td>
<td> {<br/> show:true, <br/> textStyle:{color:#333}<br/>}
</td>
<td> 坐标轴名称</td>
</tr>
<tr>
<td> {Array} boundaryGap </td>
<td> [0, 0] </td>
<td> 数值轴两端空白策略,数组内数值代表百分比,[原始数据最小值与最终最小值之间的差额,原始数据最大值与最终最大值之间的差额] </td>
</tr>
<tr>
<td> {boolean} scale </td>
<td> false </td>
<td> 脱离0值比例,放大聚焦到最终_min,_max区间 </td>
</tr>
<tr>
<td> {number} precision </td>
<td> 0 </td>
<td> 小数精度,默认为0,无小数点 </td>
</tr>
<tr>
<td> {number} power </td>
<td> 100 </td>
<td> 整数精度,默认为100,个位和百位为0 </td>
</tr>
<tr>
<td> {number} splitNumber </td>
<td> 5 </td>
<td> 分割段数,默认为5 </td>
</tr>
<tr>
<td> {Object} axisLine </td>
<td> {show : true} </td>
<td> 坐标轴线,默认显示,属性show控制显示与否,属性lineStyle(详见<a href="#LineStyle" title="">lineStyle</a>)控制线条样式 </td>
</tr>
<tr>
<td> {Object} axisLabel </td>
<td> {show : false} </td>
<td> 坐标轴文本标签,详见<a href="#AxisAxislabel" title="">axis.axisLabel</a></td>
</tr>
<tr>
<td> {Object} splitLine </td>
<td> {show : true} </td>
<td> 分隔线,默认显示,属性show控制显示与否,属性lineStyle(详见<a href="#LineStyle" title="">lineStyle</a>)控制线条样式 </td>
</tr>
<tr>
<td> {Object} splitArea </td>
<td> {show : false} </td>
<td> 分隔区域,默认不显示,属性show控制显示与否,属性areaStyle(详见<a href="#AreaStyle" title="">areaStyle</a>)控制区域样式 </td>
</tr>
<tr>
<td> {Array} indicator </td>
<td> [] </td>
<td> 雷达指标列表,同时也是label内容,例子见下</td>
</tr>
</table>
<div class="code">
<pre>
indicator : [
{name : '外观'},
{name : '拍照', min : 0},
{name : '系统', min : 0, max : 100},
{name : '性能', axisLabel: {...}},
{name : '屏幕'}
]
</pre>
</div>
<h4>series<a name="Series"> </a></h4>
......@@ -1706,7 +1804,7 @@ feature : {
</tr>
<tr>
<td> {number} startAngle </td>
<td> 0 </td>
<td> 90 </td>
<td> 饼图 </td>
<td> 开始角度, 有效输入范围:[-180,180]</td>
</tr>
......
......@@ -91,11 +91,11 @@ option = {
polar : [
{
indicator : [
{ name : '指标一' },
{ name : '指标二' },
{ name : '指标三' },
{ name : '指标四' },
{ name : '指标五' }
{ text : '指标一' },
{ text : '指标二' },
{ text : '指标三' },
{ text : '指标四' },
{ text : '指标五' }
],
center : [document.getElementById('main').offsetWidth - 250, 225],
radius : 100
......
......@@ -84,27 +84,26 @@ option = {
saveAsImage : true
}
},
calculable : true,
polar : [
{
indicator : [
{ name : '指标一' },
{ name : '指标二' },
{ name : '指标三' },
{ name : '指标四' },
{ name : '指标五' }
{ text : '指标一' },
{ text : '指标二' },
{ text : '指标三' },
{ text : '指标四' },
{ text : '指标五' }
],
center : [250,210],
radius : 150
},
{
indicator : [
{ name : '语文', max : 150 },
{ name : '数学', max : 150 },
{ name : '英语', max : 150 },
{ name : '物理', max : 120 },
{ name : '化学', max : 108 },
{ name : '生物', max : 72 }
{ text : '语文', max : 150 },
{ text : '数学', max : 150 },
{ text : '英语', max : 150 },
{ text : '物理', max : 120 },
{ text : '化学', max : 108 },
{ text : '生物', max : 72 }
],
center : [document.getElementById('main').offsetWidth - 250, 210],
radius : 150
......
......@@ -94,12 +94,12 @@ option = {
polar : [
{
indicator : [
{ name: '销售(sales)', max: 6000},
{ name: '管理(Administration', max: 16000},
{ name: '信息技术(Information Techology)', max: 30000},
{ name: '客服(Customer Support)', max: 38000},
{ name: '研发(Development)', max: 52000},
{ name: '市场(Marketing)', max: 25000}
{ text: '销售(sales)', max: 6000},
{ text: '管理(Administration', max: 16000},
{ text: '信息技术(Information Techology)', max: 30000},
{ text: '客服(Customer Support)', max: 38000},
{ text: '研发(Development)', max: 52000},
{ text: '市场(Marketing)', max: 25000}
]
}
],
......
......@@ -92,12 +92,12 @@ option = {
polar : [
{
indicator : [
{name : '进攻', max : 100},
{name : '防守', max : 100},
{name : '体能', max : 100},
{name : '速度', max : 100},
{name : '力量', max : 100},
{name : '技巧', max : 100}
{text : '进攻', max : 100},
{text : '防守', max : 100},
{text : '体能', max : 100},
{text : '速度', max : 100},
{text : '力量', max : 100},
{text : '技巧', max : 100}
],
radius : 130
}
......
......@@ -92,21 +92,21 @@ option = {
polar : [
{
indicator : [
{name : '品牌', max : 100},
{name : '内容', max : 100},
{name : '可用性', max : 100},
{name : '功能', max : 100}
{text : '品牌', max : 100},
{text : '内容', max : 100},
{text : '可用性', max : 100},
{text : '功能', max : 100}
],
center : [150,200],
radius : 80
},
{
indicator : [
{name : '外观', max : 100},
{name : '拍照', max : 100},
{name : '系统', max : 100},
{name : '性能', max : 100},
{name : '屏幕', max : 100}
{text : '外观', max : 100},
{text : '拍照', max : 100},
{text : '系统', max : 100},
{text : '性能', max : 100},
{text : '屏幕', max : 100}
],
radius : 80
},
......@@ -114,7 +114,7 @@ option = {
indicator : (function(){
var res = [];
for (var i = 1; i <= 12; i++) {
res.push({name:i+'',max:100});
res.push({text:i+'',max:100});
}
return res;
})(),
......@@ -125,6 +125,9 @@ option = {
series : [
{
type: 'radar',
tooltip : {
trigger: 'item'
},
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data : [
{
......
此差异已折叠。
因为 它太大了无法显示 source diff 。你可以改为 查看blob
......@@ -214,7 +214,7 @@
<h4>[ 拖拽重计算 ] 整合你所关心的数据</h4>
<p><small>
图表数据的默认分类不总是满足每一个人的需求。<br/>
就像如下的浏览器占比,我想知道IE所占的总比例,是默默的心算还是根笔出来?
就像如下的浏览器占比,我想知道IE所占的总比例,是默默的心算还是根笔出来?
</small></p>
<p class="fragment"><small>
这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>,试试把你关心的数据图形<strong>拖拽到一起</strong>
......@@ -342,7 +342,7 @@
<h4>[ 混搭 ] 用最佳的组合方式展现你独特数据</h4>
<p><small>
有些时候混搭的图表会更具表现力也更有有趣味!<br/>
这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>,我们提供的图表(共7类11种)支持任意混搭!
这是<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>,我们提供的图表(共8类13种)支持任意混搭!
</small></p>
<img src="../asset/img/doc/charts.jpg" style="width:100%;max-width:100%;margin:0;">
</section>
......@@ -397,15 +397,15 @@
<tr><td>条形图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>折线图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>面积图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>饼图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>环形图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>散点图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>气泡图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>K线图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>饼图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>环形图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>雷达图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>力导布局图</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>曲面图</td><td class='error'>No</td><td>Yes</td></tr>
<tr><td>地图</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>雷达图</td><td class='success'>1.2.0</td><td>Yes</td></tr>
</tbody>
</table>
</section>
......@@ -428,10 +428,10 @@
<tr><td>折线图(面积图)</td><td>Yes</td><td>Yes</td></tr>
<tr><td>饼图(环形图)</td><td>Yes</td><td>Yes</td></tr>
<tr><td>散点图(气泡图)</td><td>Yes</td><td>Yes</td></tr>
<tr><td>雷达图</td><td>Yes</td><td>Yes</td></tr>
<tr><td>K线图</td><td>Yes</td><td class='success'>Highstock</td></tr>
<tr><td>力导布局图</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>地图</td><td>Yes</td><td class='error'>No</td></tr>
<tr><td>雷达图</td><td class='success'>1.2.0</td><td>Yes</td></tr>
<tr><td>特色图表(如仪表盘)</td><td class='error'>No</td><td>Yes</td></tr>
</tbody>
</table>
......
......@@ -71,7 +71,7 @@
<div class="container">
<div class="carousel-caption">
<h1>ECharts</h1>
<h6>(1.1.2 <a href="doc/changelog.html" target="_blank" class="link">Changelog</a></h6>
<h6>(1.2.0 <a href="doc/changelog.html" target="_blank" class="link">Changelog</a></h6>
<p>基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。</p>
<p style="text-align: right;"><strong>———— 大数据时代,重新定义数据图表的时候到了</strong></p>
</div>
......@@ -121,8 +121,8 @@
<img src="doc/asset/img/mix.jpg" />
</div>
<h2 class="featurette-heading">混搭</h2>
<p>混搭的图表会更具表现力也更有有趣味,ECharts提供的图表(共7类11种)支持任意混搭:</p>
<p>折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、<br/>饼图(环形图)、地图、力导布局图。</p>
<p>混搭的图表会更具表现力也更有有趣味,ECharts提供的图表(共8类13种)支持任意混搭:</p>
<p>折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、<br/>饼图(环形图)、雷达图、地图、力导布局图。</p>
<p>混搭情况下一个标准图表:包含唯一图例、工具箱、数据区域缩放、值域漫游模块,一个直角坐标系(可包含一条或多条类目轴线,一条或多条值轴线,最多上下左右四条)</p>
</div>
<hr class="featurette-divider">
......@@ -189,7 +189,18 @@
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-left">
<div class="span3 pull-left">
<img src="doc/asset/img/dynamic1.gif"/>
</div>
<div class="pull-left">
<img src="doc/asset/img/dynamic2.gif" style="height:175px"/>
</div>
<h2 class="featurette-heading">动态数据添加</h2>
<p>如果你需要展示有实时变化的数据,相信这个动态接口会对你很有帮助。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-right">
<img src="doc/asset/img/mark.gif" />
</div>
<h2 class="featurette-heading">标线辅助</h2>
......@@ -198,7 +209,7 @@
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="span6 pull-right">
<div class="span6 pull-left">
<img src="doc/asset/img/multiStack.png" />
</div>
<h2 class="featurette-heading">多维度堆积</h2>
......@@ -206,10 +217,10 @@
</div>
<hr class="featurette-divider">
<div class="featurette">
<div class="pull-left">
<div class="pull-right">
<img src="doc/asset/img/doc/multiControl.jpg" style="height:145px"/>
</div>
<div class="pull-left">
<div class="pull-right">
<img src="doc/asset/img/custom.png"/>
</div>
<h2 class="featurette-heading">个性化定制</h2>
......
{
"name": "echarts",
"description": "Enterprise Charts,基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化表。",
"version": "1.1.2",
"version": "1.2.0",
"maintainers": [
{ "name": "Kener", "email": "linzhifeng@baidu.com" },
{ "name": "Pissang", "email": "shenyi01@baidu.com" }
{ "name": "Pissang", "email": "shenyi01@baidu.com" },
{ "name": "Yangji", "email": "yangji01@baidu.com" }
],
"dependencies": {
"zrender": "~1.0.2"
"zrender": "~1.0.3"
},
"repository": "git://github.com/ecomfe/echarts",
"main": "echarts",
......
......@@ -82,7 +82,6 @@
var data = serie.data;
var defaultColor;
var name;
var shape;
var pointList;
var calculable = self.deepQuery(_queryTarget, 'calculable');
......@@ -190,7 +189,7 @@
* @param {object} data 数据
* @param {number} serieIndex
*/
function _addSymbol(pointList, defaultColor, data, seriesIndex) {
function _addSymbol(pointList, defaultColor, data) {
// 多级控制
var queryTarget = [data, serie];
var symbol = self.deepQuery(queryTarget,'symbol')
......
......@@ -35,7 +35,7 @@ define(function (require) {
var _gCssText = 'position:absolute;'
+ 'display:block;'
+ 'overflow:hidden;'
+ 'transition:height 0.8s,background-color 1s;;'
+ 'transition:height 0.8s,background-color 1s;'
+ '-moz-transition:height 0.8s,background-color 1s;'
+ '-webkit-transition:height 0.8s,background-color 1s;'
+ '-o-transition:height 0.8s,background-color 1s;'
......
此差异已折叠。
......@@ -37,6 +37,7 @@ define(function (require) {
var grid;
var xAxis;
var yAxis;
var polar;
// tooltip dom & css
var _tDom = document.createElement('div');
......@@ -251,7 +252,7 @@ define(function (require) {
var trigger;
if (!_curTarget) {
// 坐标轴事件
_findAxisTrigger();
_findPolarTrigger() || _findAxisTrigger();
}
else {
// 数据项事件
......@@ -291,14 +292,17 @@ define(function (require) {
}
}
/**
* 直角系
*/
function _findAxisTrigger() {
var series = option.series;
var xAxisIndex;
var yAxisIndex;
if (!xAxis || !yAxis) {
_hidingTicket = setTimeout(_hide, _hideDelay);
return;
}
var series = option.series;
var xAxisIndex;
var yAxisIndex;
for (var i = 0, l = series.length; i < l; i++) {
// 找到第一个axis触发tooltip的系列
if (self.deepQuery(
......@@ -329,6 +333,33 @@ define(function (require) {
}
}
}
/**
* 极坐标
*/
function _findPolarTrigger() {
if (!polar) {
return false;
}
var x = zrEvent.getX(_event);
var y = zrEvent.getY(_event);
var polarIndex = polar.getNearestIndex([x, y]);
var valueIndex;
if (polarIndex) {
valueIndex = polarIndex.valueIndex;
polarIndex = polarIndex.polarIndex;
}
else {
polarIndex = -1;
}
if (polarIndex != -1) {
return _showPolarTrigger(polarIndex, valueIndex);
}
return false;
}
/**
* 根据坐标轴事件带的属性获取最近的axisDataIndex
*/
......@@ -398,6 +429,9 @@ define(function (require) {
return -1;
}
/**
* 直角系
*/
function _showAxisTrigger(xAxisIndex, yAxisIndex, dataIndex) {
if (typeof xAxis == 'undefined'
|| typeof yAxis == 'undefined'
......@@ -565,13 +599,132 @@ define(function (require) {
}
}
/**
* 极坐标
*/
function _showPolarTrigger(polarIndex, dataIndex) {
if (typeof polar == 'undefined'
|| typeof polarIndex == 'undefined'
|| typeof dataIndex == 'undefined'
|| dataIndex < 0
) {
return false;
}
var series = option.series;
var seriesArray = [];
var formatter;
var specialCssText = '';
if (self.deepQuery([option], 'tooltip.trigger') == 'axis') {
if (self.deepQuery([option], 'tooltip.show') === false) {
return false;
}
formatter = self.deepQuery([option],'tooltip.formatter');
}
// 找到所有用这个极坐标并且axis触发的系列数据
for (var i = 0, l = series.length; i < l; i++) {
if (series[i].polarIndex == polarIndex
&& self.deepQuery(
[series[i], option], 'tooltip.trigger'
) == 'axis'
) {
formatter = self.deepQuery(
[series[i]],
'tooltip.formatter'
) || formatter;
specialCssText += _style(self.deepQuery(
[series[i]], 'tooltip'
));
seriesArray.push(series[i]);
}
}
if (seriesArray.length > 0) {
var polarData;
var data;
var params = [];
var indicatorName =
option.polar[polarIndex].indicator[dataIndex].text;
for (var i = 0, l = seriesArray.length; i < l; i++) {
polarData = seriesArray[i].data;
for (var j = 0, k = polarData.length; j < k; j++) {
data = polarData[j];
data = typeof data != 'undefined'
? data
: {name:'', value: {dataIndex:'-'}};
params.push([
typeof seriesArray[i].name != 'undefin'
? seriesArray[i].name : '',
data.name,
data.value[dataIndex],
indicatorName
]);
}
}
if (typeof formatter == 'function') {
_curTicket = 'axis:' + dataIndex;
_tDom.innerHTML = formatter(
params, _curTicket, _setContent
);
}
else if (typeof formatter == 'string') {
formatter = formatter.replace('{a}','{a0}')
.replace('{b}','{b0}')
.replace('{c}','{c0}')
.replace('{d}','{d0}');
for (var i = 0, l = params.length; i < l; i++) {
formatter = formatter.replace(
'{a' + i + '}',
params[i][0]
);
formatter = formatter.replace(
'{b' + i + '}',
params[i][1]
);
formatter = formatter.replace(
'{c' + i + '}',
params[i][2]
);
formatter = formatter.replace(
'{d' + i + '}',
params[i][3]
);
}
_tDom.innerHTML = formatter;
}
else {
formatter = params[0][1] + '<br/>'
+ 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];
}
_tDom.innerHTML = formatter;
}
if (!self.hasAppend) {
_tDom.style.left = _zrWidth / 2 + 'px';
_tDom.style.top = _zrHeight / 2 + 'px';
dom.firstChild.appendChild(_tDom);
self.hasAppend = true;
}
_show(
zrEvent.getX(_event),
zrEvent.getY(_event),
specialCssText
);
return true;
}
}
function _showItemTrigger() {
var serie = ecData.get(_curTarget, 'series');
var data = ecData.get(_curTarget, 'data');
var name = ecData.get(_curTarget, 'name');
var value = ecData.get(_curTarget, 'value');
var speical = ecData.get(_curTarget, 'special');
// 从低优先级往上找到trigger为item的formatter和样式
var formatter;
var specialCssText = '';
......@@ -651,7 +804,7 @@ define(function (require) {
indicator = speical;
html += (name === '' ? serie.name : name) + '<br />';
for (var i = 0 ; i < indicator.length; i ++) {
html += indicator[i].name + ' : ' + value[i] + '<br />';
html += indicator[i].text + ' : ' + value[i] + '<br />';
}
_tDom.innerHTML = html;
}
......@@ -810,21 +963,30 @@ define(function (require) {
clearTimeout(_hidingTicket);
clearTimeout(_showingTicket);
var target = param.target;
if (!target && grid) {
var mx = zrEvent.getX(param.event);
var my = zrEvent.getY(param.event);
if (!target) {
// 判断是否落到直角系里,axis触发的tooltip
if (_needAxisTrigger
_curTarget = false;
_event = param.event;
_event._target = _event.target || _event.toElement;
_event.zrenderX = mx;
_event.zrenderY = my;
if (_needAxisTrigger
&& grid
&& zrArea.isInside(
rectangle,
grid.getArea(),
zrEvent.getX(param.event),
zrEvent.getY(param.event)
)
rectangle,
grid.getArea(),
mx,
my
)
) {
_showingTicket = setTimeout(_tryShow, _showDelay);
}
else if (_needAxisTrigger
&& polar
&& polar.isInside([mx, my]) != -1
) {
_curTarget = false;
_event = param.event;
_event._target = _event.target || _event.toElement;
_event.zrenderX = zrEvent.getX(_event);
_event.zrenderY = zrEvent.getY(_event);
_showingTicket = setTimeout(_tryShow, _showDelay);
}
else {
......@@ -835,8 +997,27 @@ define(function (require) {
_curTarget = target;
_event = param.event;
_event._target = _event.target || _event.toElement;
_event.zrenderX = zrEvent.getX(_event);
_event.zrenderY = zrEvent.getY(_event);
_event.zrenderX = mx;
_event.zrenderY = my;
var polarIndex;
if (_needAxisTrigger
&& polar
&& (polarIndex = polar.isInside([mx, my])) != -1
) {
// 看用这个polar的系列数据是否是axis触发,如果是设置_curTarget为nul
var series = option.series;
for (var i = 0, l = series.length; i < l; i++) {
if (series[i].polarIndex == polarIndex
&& self.deepQuery(
[series[i], option], 'tooltip.trigger'
) == 'axis'
) {
_curTarget = null;
break;
}
}
}
_showingTicket = setTimeout(_tryShow, _showDelay);
}
}
......@@ -884,6 +1065,7 @@ define(function (require) {
grid = component.grid;
xAxis = component.xAxis;
yAxis = component.yAxis;
polar = component.polar;
}
function init(newOption, newDom) {
......
......@@ -327,25 +327,25 @@ define(function() {
},
polar : {
startAngle : 180, // 弄错了吧,0度角在正右方向,这样算startAngle应该是90
graduation : 5,
startAngle : 90,
splitNumber : 5,
name : {
show: true,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
axisLine: { // 坐标轴线
show: true, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
color: '#48b',
width: 2,
color: '#ccc',
width: 1,
type: 'solid'
}
},
axisTick : { // 坐标轴小标记
show : true,
lineStyle : {
width : 1,
color : '#999'
}
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
show: true,
show: false,
// formatter: null,
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
......@@ -358,6 +358,7 @@ define(function() {
}
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : '#ccc'
......
......@@ -1002,8 +1002,7 @@ define(function(require) {
'',
{option: magicOption}
);
}, 500);
}, magicOption.addDataAnimation ? 500 : 0);
return self;
}
......
......@@ -20,12 +20,7 @@ define(function() {
var value;
if (typeof data != 'undefined') {
if (typeof data.value != 'undefined') {
if (data.value instanceof Array && series.type != 'radar') {
value = data.value[2]; // 散点图最后一个为数值
}
else {
value = data.value;
}
value = data.value;
}
else {
value = data;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册