提交 e45edded 编写于 作者: K kener

增加demo~~

上级 38d7deb5
......@@ -1918,7 +1918,7 @@ feature : {
<p><img src="./asset/img/doc/multiControl.jpg" title="" alt="多级控制"/></P>
<h3>附录:一个直观的事例<a name="附录一个直观的事例"> </a></h3>
<p>查看更多实例 <a href="example.html" target="_blank">example</a></p>
<p>查看更多实例 <a href="example.html" target="_blank">example</a>,或者使用这个<a href="example/demo.html" target="_blank">demo</a>作为你的模板</p>
<div class="code">
<pre>// 图表实例化------------------
var echarts = require('echarts');
......
......@@ -7,10 +7,6 @@
<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">
......@@ -61,139 +57,10 @@
</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 = {
// color : []
tooltip : {
// show : true, // default : true
trigger: 'axis',
borderWidth : 1,
borderColor : 'yellow',
padding : [8,12],
textStyle : {
color : '#eee',
fontSize : '16',
fontWeight:'blod',
fontFamily:'微软雅黑'
},
formatter: "Template : <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}<br/>{a2}:{c2}",
formatter: function(params) {
var res = 'Function : <br/>' + params[0][1];
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i][0] + ' : ' + params[i][2];
}
return res;
}
},
legend: {
// orient : 'vertical',
// x : 'right',
borderWidth:0,
padding:[5,5],
//data:['Kener','Amy','apple','orange','peach','banana'],
data:['serie1','serie2','serie3','serie4']
},
grid : {
//x : 50,
//y : 30,
//width : 600,
//height : 320
},
xAxis : [
{
type : 'category',
position:'bottom',
// axisTick : {show:true, lineStyle:{color:'red'}},
// splitLine : {show:false},
// splitArea : {show:false, areaStyle:{color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']}},
data : ['2012-02-01','2012-02-02','2012-02-03','2012-02-04','2012-02-05']
}
],
yAxis : [
{
type : 'value',
position:'left'
}
],
series : [
{
name:'serie1',
type:'line',
itemStyle: {normal: {areaStyle: {color: 'rgba(144, 238, 144, 0.3)'}}},
data:[1,2,8,{value:20,tooltip : {trigger: 'item'}}]
},
{
name:'serie2',
stack: 'stack1',
type:'line',
itemStyle: {normal: {areaStyle: {color: 'rgba(98, 130, 10, 0.3)'}}},
data:[12,20,'-', 15, 9]
},
{
name:'serie3',
stack: 'stack1',
type:'line',
itemStyle: {normal: {areaStyle: {color: 'rgba(170, 130, 180, 0.3)'}}},
data:[13,3,33,9,7]
},
{
name:'serie4',
type:'line',
itemStyle: {normal: {areaStyle: {color: 'rgba(70, 30, 180, 0.3)'}}},
data:[4,14,3,6,4]
},
/*
{
name:'fruit',
type:'pie',
radius : [80, 120],
center: [400,200],
data:[
{value:10, name:'apple'},
{value:34, name:'orange'},
{value:35, name:'peach'},
{value:48, name:'banana'}
]
},
{
name:'people',
type:'pie',
radius : [20, 60],
center: [400,200],
itemStyle : {
normal : {
label : {
position:'inner'
},
labelLine : {
show : false
}
}
},
data:[
{value:12, name:'Kener'},
{value:24, name:'Amy'},
{value:35, name:'Lily'},
{value:48, name:'Eric'}
]
}
*/
]
};
</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 class="container">
<div class="row">
<div id="graphic" class="span12">
<div id="main" style="height:400px"></div>
</div><!--/span-->
</div><!--/row-->
<hr>
......@@ -217,6 +84,83 @@ option = {
<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>
<!--echarts demo-->
<script src="../asset/js/esl/esl.js"></script>
<script type="text/javascript">
require.config({
paths: {
'js': '../asset/js/esl/js'
},
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: 'http://ecomfe.github.io/zrender/src',
//location: '../../../zrender/src',
main: 'zrender'
}
]
});
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
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]
},
{
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]
}
]
};
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
myChart.setOption(option);
}
)
</script>
</body>
</html>
\ No newline at end of file
......@@ -194,7 +194,7 @@
</div>
<h2 class="featurette-heading">标线辅助</h2>
<p>趋势线?平均线?上升通道?支持位?专业的你自然知道该怎么用</p>
<p>提供标线辅助在K线图中可是必要的功能!当然,ECharts中的任何图都可以使用。</p>
<p>提供标线辅助在K线图中可是必要的功能!当然,ECharts中的任何图都可以使用。</p>
</div>
<hr class="featurette-divider">
<div class="featurette">
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册