Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

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

提交 17c739b7 编写于 作者: K kener
浏览文件
操作

large scatter

上级 fb1ec727
隐藏空白更改
内联 并排
Showing with 1275 addition and 16 deletion
doc/doc.html
浏览文件 @ 17c739b7
......@@ -663,8 +663,8 @@ feature : {
<li> 多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...</li>
<li> 其中变量a、b、c在不同图表类型下代表数据含义为：
<ul>
<li>折线（区域）图、柱状（条形）图、散点图 : a（系列名称），b（类目值），c（数值）, d（无）</li>
<li>气泡图 : a（系列名称），b（横轴值），c（纵轴值）, d（数值）</li>
<li>折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）</li>
<li>散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）</li>
<li>饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）</li>
</ul>
</li>
......
doc/example/scatter1.html 0 → 100644
浏览文件 @ 17c739b7
<!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">
</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 href="https://github.com/ecomfe/echarts/archive/1.0.0.zip">ZIP (1.0.0)</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>
<li><a href="http://tangram.baidu.com/" target="_blank">Tangram</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 = {
tooltip : {
trigger: 'item'
},
legend: {
data:['女性','男性']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
refresh : true
}
},
calculable : true,
xAxis : [
{
type : 'value',
power: 1,
scale:true,
axisLabel : {
formatter: '{value} cm'
}
}
],
yAxis : [
{
type : 'value',
power: 1,
scale:true,
axisLabel : {
formatter: '{value} kg'
},
splitArea : {show : true}
}
],
series : [
{
name:'女性',
type:'scatter',
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
]
},
{
name:'男性',
type:'scatter',
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
[180.3, 83.2], [180.3, 83.2]
]
}
]
};
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div id="graphic" class="span8">
<div id="main" class="main"></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="#">Privacy</a> &middot; <a href="#">Terms</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
doc/example/scatter2.html 0 → 100644
浏览文件 @ 17c739b7
<!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">
</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 href="https://github.com/ecomfe/echarts/archive/1.0.0.zip">ZIP (1.0.0)</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>
<li><a href="http://tangram.baidu.com/" target="_blank">Tangram</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 = {
tooltip : {
trigger: 'item'
},
legend: {
data:['scatter1','scatter2']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
refresh : true
}
},
calculable : true,
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'scatter1',
type:'scatter',
symbolSize: function(value){
return Math.round(value * 2);
},
data: (function() {
var d = [];
var len = 100;
while (len--) {
d.push([
(Math.random()*10).toFixed(2) - 0,
(Math.random()*10).toFixed(2) - 0,
(Math.random()*10).toFixed(2) - 0
]);
}
return d;
})()
},
{
name:'scatter2',
type:'scatter',
symbolSize: function(value){
return Math.round(value * 2);
},
data: (function() {
var d = [];
var len = 100;
while (len--) {
d.push([
(Math.random()*10).toFixed(2) - 0,
(Math.random()*10).toFixed(2) - 0,
(Math.random()*10).toFixed(2) - 0
]);
}
return d;
})()
}
]
};
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div id="graphic" class="span8">
<div id="main" class="main"></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="#">Privacy</a> &middot; <a href="#">Terms</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
doc/example/scatter3.html 0 → 100644
浏览文件 @ 17c739b7
<!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">
</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 href="https://github.com/ecomfe/echarts/archive/1.0.0.zip">ZIP (1.0.0)</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>
<li><a href="http://tangram.baidu.com/" target="_blank">Tangram</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 = {
tooltip : {
trigger: 'item'
},
legend: {
data:['sin','cos']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
refresh : true
}
},
calculable : true,
xAxis : [
{
type : 'value',
power: 1,
precision: 2
}
],
yAxis : [
{
type : 'value',
power: 1,
precision: 2,
scale:true,
splitArea : {show : true}
}
],
series : [
{
name:'sin',
type:'scatter',
large: true,
data: (function() {
var d = [];
var len = 10000;
var x = 0;
while (len--) {
x = Math.random() * 10;
d.push([
x,
//Math.random() * 10
Math.sin(x).toFixed(2) - x * (len % 2 ? 0.1 : -0.1) * Math.random()
]);
}
//console.log(d)
return d;
})()
},
{
name:'cos',
type:'scatter',
large: true,
data: (function() {
var d = [];
var len = 10000;
var x = 0;
while (len--) {
x = Math.random() * 10;
d.push([
x,
//Math.random() * 10
Math.cos(x).toFixed(2) - x * (len % 2 ? 0.1 : -0.1) * Math.random()
]);
}
//console.log(d)
return d;
})()
}
]
};
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div id="graphic" class="span8">
<div id="main" class="main"></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="#">Privacy</a> &middot; <a href="#">Terms</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.js
浏览文件 @ 17c739b7
......@@ -40,6 +40,8 @@ define(function(require) { //chart
self.define('map', require('./chart/map'));
self.define('k', require('./chart/k'));
self.define('scatter', require('./chart/scatter'));
return self;
});
\ No newline at end of file
src/chart/k.js
浏览文件 @ 17c739b7
......@@ -45,14 +45,11 @@ define(function(require) {
var xAxisIndex;
var yAxisIndex;
var xAxis;
var yAxis;
for (var i = 0, l = series.length; i < l; i++) {
if (series[i].type == ecConfig.CHART_TYPE_K) {
series[i] = self.reformOption(series[i]);
xAxisIndex = series[i].xAxisIndex;
yAxisIndex = series[i].yAxisIndex;
xAxis = component.xAxis.getAxis(xAxisIndex);
yAxis = component.yAxis.getAxis(yAxisIndex);
if (xAxis.type == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
) {
_position2sIndexMap[xAxis.getPosition()].push(i);
......@@ -167,7 +164,6 @@ define(function(require) {
// 数据格式不符
continue;
}
y = valueAxis.getCoord(value);
pointList[seriesIndex].push([
categoryAxis.getCoordByIndex(i), // 横坐标
candleWidth,
......@@ -442,7 +438,7 @@ define(function(require) {
}
var shape = require('zrender/shape');
var Candle = require('../util/candle');
var Candle = require('../util/shape/candle');
shape.define('candle', new Candle());
return K;
......
src/chart/scatter.js 0 → 100644
浏览文件 @ 17c739b7
/**
* echarts图表类：散点图
* Copyright 2013 Baidu Inc. All rights reserved.
*
* @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
* @author Kener (@Kener-林峰, linzhifeng@baidu.com)
*
*/
define(function(require) {
/**
* 构造函数
* @param {Object} messageCenter echart消息中心
* @param {ZRender} zr zrender实例
* @param {Object} series 数据
* @param {Object} component 组件
*/
function Scatter(messageCenter, zr, option, component){
// 基类装饰
var ComponentBase = require('../component/base');
ComponentBase.call(this, zr);
// 可计算特性装饰
var CalculableBase = require('./calculableBase');
CalculableBase.call(this, zr, option);
var ecConfig = require('../config');
var ecData = require('../util/ecData');
var zrColor = require('zrender/tool/color');
var self = this;
self.type = ecConfig.CHART_TYPE_SCATTER;
var series; // 共享数据源，不要修改跟自己无关的项
var _zlevelBase = self.getZlevelBase();
var _sIndex2ColorMap = {}; // series默认颜色索引，seriesIndex索引到color
var _symbol = [
'circle', 'rectangle', 'triangle', 'diamond',
'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
];
var _sIndex2ShapeMap = {}; // series图形类型，seriesIndex索引到_symbol
function _buildShape() {
self.selectedMap = {};
var legend = component.legend;
var seriesArray = [];
var serie; // 临时映射变量
var serieName; // 临时映射变量
for (var i = 0, l = series.length; i < l; i++) {
serie = series[i];
serieName = serie.name;
if (serie.type == ecConfig.CHART_TYPE_SCATTER) {
series[i] = self.reformOption(series[i]);
if (legend){
self.selectedMap[serieName] =
legend.isSelected(serieName);
_sIndex2ColorMap[i] =
zrColor.alpha(legend.getColor(serieName),0.5);
} else {
self.selectedMap[serieName] = true;
_sIndex2ColorMap[i] = zr.getColor(i);
}
_sIndex2ShapeMap[i] = self.deepQuery([serie], 'symbol')
|| _symbol[i % _symbol.length];
if (self.selectedMap[serieName]) {
seriesArray.push(i);
}
}
}
if (seriesArray.length === 0) {
return;
}
_buildSeries(seriesArray);
for (var i = 0, l = self.shapeList.length; i < l; i++) {
self.shapeList[i].id = zr.newShapeId(self.type);
zr.addShape(self.shapeList[i]);
}
}
/**
* 构建类目轴为水平方向的散点图系列
*/
function _buildSeries(seriesArray) {
var seriesIndex;
var serie;
var data;
var value;
var xAxis;
var yAxis
var pointList = {};
var x;
var y;
var symbolSize;
for (var j = 0, k = seriesArray.length; j < k; j++) {
seriesIndex = seriesArray[j];
serie = series[seriesIndex];
if (serie.data.length == 0) {
continue;
}
xAxis = component.xAxis.getAxis(serie.xAxisIndex || 0);
yAxis = component.yAxis.getAxis(serie.yAxisIndex || 0);
symbolSize = self.deepQuery([serie], 'symbolSize');
pointList[seriesIndex] = [];
for (var i = 0, l = serie.data.length; i < l; i++) {
data = serie.data[i];
value = typeof data != 'undefined'
? (typeof data.value != 'undefined'
? data.value
: data)
: '-';
if (value == '-' || value.length < 2) {
// 数据格式不符
continue;
}
x = xAxis.getCoord(value[0]);
y = yAxis.getCoord(value[1]);
pointList[seriesIndex].push([
x, // 横坐标
y, // 纵坐标
(typeof value[2] != 'undefined'
&& typeof symbolSize == 'function'
? symbolSize(value[2])
: symbolSize), // 图形大小
_sIndex2ShapeMap[seriesIndex], // 图形类型
i, // 数据index
data.name || '' // 名称
]);
}
}
// console.log(pointList)
_buildPointList(pointList);
}
/**
* 生成折线和折线上的拐点
*/
function _buildPointList(pointList) {
var zrColor = require('zrender/tool/color');
var nColor; // normal
var eColor; // emphasis
var serie;
var queryTarget;
var data;
var seriesPL;
var singlePoint;
for (var seriesIndex in pointList) {
serie = series[seriesIndex];
seriesPL = pointList[seriesIndex];
// 多级控制
queryTarget = [serie];
nColor = self.deepQuery(
queryTarget, 'itemStyle.normal.color'
) || _sIndex2ColorMap[seriesIndex];
eColor = self.deepQuery(
queryTarget, 'itemStyle.emphasis.color'
);
if (serie.large) {
self.shapeList.push(_getLargeSymbol(
seriesPL, nColor, eColor
));
continue;
}
/*
* pointlist=[
* 0 x,
* 1 y,
* 2 图形大小
* 3 图形类型
* 4 数据index
* 5 名称
* ]
*/
for (var i = 0, l = seriesPL.length; i < l; i++) {
singlePoint = seriesPL[i];
data = serie.data[singlePoint[4]];
queryTarget = [data];
self.shapeList.push(_getSymbol(
seriesIndex, // seriesIndex
singlePoint[4], // dataIndex
singlePoint[5], // name
singlePoint[0], // x
singlePoint[1], // y
// 大小
self.deepQuery(queryTarget, 'symbolSize')
|| singlePoint[2],
// 类型
self.deepQuery(queryTarget, 'symbol')
|| singlePoint[3],
// 填充颜色
self.deepQuery(queryTarget, 'itemStyle.normal.color')
|| nColor,
//------------高亮
// 填充颜色
self.deepQuery(
queryTarget, 'itemStyle.emphasis.color'
) || eColor || nColor
));
}
}
// console.log(self.shapeList)
}
/**
* 生成散点图上的图形
*/
function _getSymbol(
seriesIndex, dataIndex, name,
x, y, symbolSize, symbolType,
nColor, eColor
) {
var itemShape;
switch (symbolType) {
case 'circle' :
case 'emptyCircle' :
itemShape = {
shape : 'circle',
style : {
x : x,
y : y,
r : symbolSize,
brushType : symbolType == 'circle'
? 'fill' : 'stroke'
}
};
break;
case 'rectangle' :
case 'emptyRectangle' :
itemShape = {
shape : 'rectangle',
style : {
x : x - symbolSize,
y : y - symbolSize,
width : symbolSize * 2,
height : symbolSize * 2,
brushType : symbolType == 'rectangle'
? 'fill' : 'stroke'
}
};
break;
case 'triangle' :
case 'emptyTriangle' :
itemShape = {
shape : 'polygon',
style : {
pointList : [
[x, y - symbolSize],
[x + symbolSize, y + symbolSize],
[x - symbolSize, y + symbolSize]
],
brushType : symbolType == 'triangle'
? 'fill' : 'stroke'
}
};
break;
case 'diamond' :
case 'emptyDiamond' :
itemShape = {
shape : 'polygon',
style : {
pointList : [
[x, y - symbolSize],
[x + symbolSize, y],
[x, y + symbolSize],
[x - symbolSize, y]
],
brushType : symbolType == 'diamond'
? 'fill' : 'stroke'
}
};
break;
default:
itemShape = {
shape : 'circle',
style : {
x : x,
y : y,
r : symbolSize,
brushType : 'fill'
}
};
break;
}
itemShape._serieIndex = seriesIndex
itemShape.zlevel = _zlevelBase;
itemShape.style.color = nColor;
itemShape.style.strokeColor = nColor;
itemShape.highlightStyle = {
color : eColor,
strokeColor : eColor
};
/*
if (self.deepQuery([data, serie, option], 'calculable')) {
self.setCalculable(itemShape);
itemShape.draggable = true;
}
*/
// for animation
itemShape._x = x;
itemShape._y = y;
ecData.pack(
itemShape,
series[seriesIndex], seriesIndex,
series[seriesIndex].data[dataIndex] || '-', dataIndex,
name
);
return itemShape;
}
function _getLargeSymbol(symbolList, nColor, eColor) {
return {
shape : 'symbol',
zlevel : _zlevelBase,
hoverable: false,
style : {
pointList : symbolList,
color : nColor,
strokeColor : nColor
},
highlightStyle : {
color : eColor,
strokeColor : eColor
}
};
}
/**
* 构造函数默认执行的初始化方法，也用于创建实例后动态修改
* @param {Object} newZr
* @param {Object} newSeries
* @param {Object} newComponent
*/
function init(newOption, newComponent) {
option = newOption;
component = newComponent;
series = option.series;
self.clear();
_buildShape();
}
/**
* 刷新
*/
function refresh() {
self.clear();
_buildShape();
}
/**
* 动画设定
*/
function animation() {
return;
var duration = self.deepQuery([option], 'animationDuration');
var easing = self.deepQuery([option], 'animationEasing');
var x;
var y;
var serie;
for (var i = 0, l = self.shapeList.length; i < l; i++) {
x = self.shapeList[i]._x || 0;
y = self.shapeList[i]._y || 0;
zr.modShape(self.shapeList[i].id, {
scale : [0, 0, x, y]
});
zr.animate(self.shapeList[i].id, '')
.when(
(self.deepQuery([serie],'animationDuration')
|| duration),
{scale : [1, 1, x, y]},
(self.deepQuery([serie], 'animationEasing')
|| easing)
)
.start();
}
}
self.init = init;
self.refresh = refresh;
self.animation = animation;
init(option, component);
}
var shape = require('zrender/shape');
var Symbol = require('../util/shape/symbol');
shape.define('symbol', new Symbol());
return Scatter;
});
\ No newline at end of file
src/component/legend.js
浏览文件 @ 17c739b7
......@@ -455,7 +455,7 @@ define(function (require) {
return _colorMap[legendName] ? _colorMap[legendName] : false;
}
function add(name,color){
function add(name, color){
legendOption.data.push(name);
setColor(name,color);
_selectedMap[name] = true;
......
src/component/tooltip.js
浏览文件 @ 17c739b7
......@@ -592,11 +592,21 @@ define(function (require) {
_tDom.innerHTML = formatter;
}
else {
_tDom.innerHTML = serie.name + '<br/>' +
name + ' : ' + value +
(typeof speical == 'undefined'
? ''
: (' (' + speical + ')'));
if (serie.type != ecConfig.CHART_TYPE_SCATTER) {
_tDom.innerHTML = serie.name + '<br/>' +
name + ' : ' + value +
(typeof speical == 'undefined'
? ''
: (' (' + speical + ')'));
}
else {
_tDom.innerHTML = serie.name + '<br/>' +
(name == '' ? '' : (name + ' : '))
+ value +
(typeof speical == 'undefined'
? ''
: (' (' + speical + ')'));
}
}
if (!self.hasAppend) {
......
src/component/valueAxis.js
浏览文件 @ 17c739b7
......@@ -433,7 +433,15 @@ define(function (require) {
value = typeof oriData[j].value != 'undefined'
? oriData[j].value
: oriData[j];
if (series[i].type == ecConfig.CHART_TYPE_K) {
if (series[i].type == ecConfig.CHART_TYPE_SCATTER) {
if (option.xAxisIndex != -1) {
data[key].push(value[0]);
}
if (option.yAxisIndex != -1) {
data[key].push(value[1]);
}
}
else if (series[i].type == ecConfig.CHART_TYPE_K) {
data[key].push(value[0]);
data[key].push(value[1]);
data[key].push(value[2]);
......@@ -491,7 +499,6 @@ define(function (require) {
}
}
}
_min = isNaN(option.min)
? (_min - Math.abs(_min * option.boundaryGap[0]))
: option.min; // 指定min忽略boundaryGay[0]
......
src/config.js
浏览文件 @ 17c739b7
......@@ -322,6 +322,14 @@ define(function() {
}
}
},
// 散点图默认参数
scatter: {
xAxisIndex: 0,
yAxisIndex: 0,
//symbol: null, // 图形类型，非标准参数
symbolSize: 4 // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
},
// 饼图默认参数
pie: {
......
src/echarts.js
浏览文件 @ 17c739b7
......@@ -93,7 +93,7 @@ define(function(require) {
var shape = require('zrender/shape');
var Icon = require('./util/icon');
var Icon = require('./util/shape/icon');
shape.define('icon', new Icon());
// 孤岛
......
src/util/shape/symbol.js 0 → 100644
浏览文件 @ 17c739b7
/**
* zrender
* Copyright 2013 Baidu Inc. All rights reserved.
*
* @author Kener (@Kener-林峰, linzhifeng@baidu.com)
*
* shape类：大规模散点图图形
* 可配图形属性：
{
// 基础属性
shape : 'symbol', // 必须，shape类标识，需要显式指定
id : {string}, // 必须，图形唯一标识，可通过zrender实例方法newShapeId生成
zlevel : {number}, // 默认为0，z层level，决定绘画在哪层canvas中
invisible : {boolean}, // 默认为false，是否可见
// 样式属性，默认状态样式样式属性
style : {
pointList : {Array}, // 必须，二维数组，二维内容如下
x : {number}, // 必须，横坐标
y : {number}, // 必须，纵坐标数组
size : {number}, // 必须，半宽
type : {string=}, // 默认为'circle',图形类型
color : {color}, // 默认为'#000'，填充颜色，支持rgba
strokeColor : {color}, // 默认为'#000'，描边颜色（轮廓），支持rgba
lineWidth : {number}, // 默认为1，线条宽度，描边下有效
opacity : {number}, // 默认为1，透明度设置，如果color为rgba，则最终透明度效果叠加
shadowBlur : {number}, // 默认为0，阴影模糊度，大于0有效
shadowColor : {color}, // 默认为'#000'，阴影色彩，支持rgba
shadowOffsetX : {number}, // 默认为0，阴影横向偏移，正值往右，负值往左
shadowOffsetY : {number}, // 默认为0，阴影纵向偏移，正值往下，负值往上
text : {string}, // 默认为null，附加文本
textFont : {string}, // 默认为null，附加文本样式，eg:'bold 18px verdana'
textPosition : {string}, // 默认为top，附加文本位置。
// inside | left | right | top | bottom
textAlign : {string}, // 默认根据textPosition自动设置，附加文本水平对齐。
// start | end | left | right | center
textBaseline : {string}, // 默认根据textPosition自动设置，附加文本垂直对齐。
// top | bottom | middle |
// alphabetic | hanging | ideographic
textColor : {color}, // 默认根据textPosition自动设置，默认策略如下，附加文本颜色
// 'inside' ? '#fff' : color
},
// 样式属性，高亮样式属性，当不存在highlightStyle时使用基于默认样式扩展显示
highlightStyle : {
// 同style
}
// 交互属性，详见shape.Base
// 事件属性，详见shape.Base
}
例子：
{
shape : 'symbol',
id : '123456',
zlevel : 1,
style : {
x : 200,
y : [100,123,90,125],
width : 150,
color : '#eee',
text : 'Baidu'
},
myName : 'kener', // 可自带任何有效自定义属性
clickable : true,
onClick : function(eventPacket) {
alert(eventPacket.target.myName);
}
}
*/
define(
function(require) {
var matrix = require('zrender/tool/matrix');
function Symbol() {
this.type = 'symbol';
}
Symbol.prototype = {
/*
* pointlist=[
* 0 x,
* 1 y,
* 2 图形大小
* 3 图形类型
* 4 数据index
* 5 名称
* ]
*/
_buildSinglePoint : function(ctx, singlePoint) {
switch (singlePoint[3]) {
case 'circle' :
case 'emptyCircle' :
ctx.arc(
singlePoint[0],
singlePoint[1],
singlePoint[2],
0,
Math.PI * 2,
true
);
break;
case 'rectangle' :
case 'emptyRectangle' :
ctx.rect(
singlePoint[0] - singlePoint[2],
singlePoint[1] - singlePoint[2],
singlePoint[2] * 2,
singlePoint[2] * 2
);
break;
case 'triangle' :
case 'emptyTriangle' :
itemShape = {
shape : 'polygon',
style : {
pointList : [
[x, y - symbolSize],
[x + symbolSize, y + symbolSize],
[x - symbolSize, y + symbolSize]
],
brushType : symbolType == 'triangle'
? 'fill' : 'stroke'
}
};
break;
case 'diamond' :
case 'emptyDiamond' :
itemShape = {
shape : 'polygon',
style : {
pointList : [
[x, y - symbolSize],
[x + symbolSize, y],
[x, y + symbolSize],
[x - symbolSize, y]
],
brushType : symbolType == 'diamond'
? 'fill' : 'stroke'
}
};
break;
default:
itemShape = {
shape : 'circle',
style : {
x : x,
y : y,
r : symbolSize,
brushType : 'fill'
}
};
break;
}
},
/**
* 创建矩形路径
* @param {Context2D} ctx Canvas 2D上下文
* @param {Object} style 样式
*/
buildPath : function(ctx, style) {
var pointList = style.pointList;
var rect = this.getRect(style);
console.log(rect)
var ti = new Date();
var pixels = ctx.getImageData(
rect.x, rect.y, rect.width, rect.height
);
var data = pixels.data;
var idx;
var zrColor = require('zrender/tool/color');
var color = zrColor.toArray(style.color);
var r = color[0];
var g = color[1];
var b = color[2];
var width = rect.width;
for (var i = 1, l = pointList.length; i < l; i++) {
idx = (pointList[i][0] - rect.x
+ (pointList[i][1]- rect.y) * width
) * 4;
data[idx] = r;
data[idx + 1] = g;
data[idx + 2] = b;
data[idx + 3] = 255;
}
ctx.putImageData(pixels, rect.x, rect.y);
console.log(new Date() - ti);
return;
},
/**
* 返回矩形区域，用于局部刷新和文字定位
* @param {Object} style
*/
getRect : function(style) {
var shape = require('zrender/shape');
return shape.get('polygon').getRect(style);
},
isCover : function(e, x, y) {
return false;
}
};
var base = require('zrender/shape/base');
base.derive(Symbol);
return Symbol;
}
);
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或