提交 7a0d5f01 编写于 作者: K kener

例子更新,兼容性测试

上级 44555ad5
...@@ -207,7 +207,7 @@ option = { ...@@ -207,7 +207,7 @@ option = {
], ],
markLine : { markLine : {
data : [ data : [
{type : 'average', name : '平均值'} {type : 'average', name : '平均值'},
{type : 'max'}, {type : 'max'},
{type : 'min'} {type : 'min'}
] ]
......
...@@ -128,14 +128,14 @@ option = { ...@@ -128,14 +128,14 @@ option = {
color: 'rgba(255,30,30,0.5)', color: 'rgba(255,30,30,0.5)',
lineStyle : { lineStyle : {
width: 1, width: 1,
color: 'green', color: 'green'
} }
}, },
emphasis: { emphasis: {
color: 'yellow', color: 'yellow',
lineStyle : { lineStyle : {
width: 2, width: 2,
color: 'blue', color: 'blue'
} }
} }
} }
......
...@@ -162,11 +162,11 @@ option = { ...@@ -162,11 +162,11 @@ option = {
color0: 'blue', // 阴线填充颜色 color0: 'blue', // 阴线填充颜色
lineStyle: { lineStyle: {
width: 3, width: 3,
color0: 'blue', // 阴线边框颜色 color0: 'blue' // 阴线边框颜色
} }
}, },
emphasis: { emphasis: {
color0: 'blue', // 阴线填充颜色 color0: 'blue' // 阴线填充颜色
} }
} }
}, },
......
...@@ -74,12 +74,9 @@ option = { ...@@ -74,12 +74,9 @@ option = {
tooltip : { tooltip : {
trigger: 'axis', trigger: 'axis',
formatter: function(params) { formatter: function(params) {
var res = params[1][1]; var res = params[0][0] + ' ' + params[0][1];
res += '<br/>' + params[1][0]; res += '<br/> 开盘 : ' + params[0][2][0] + ' 最高 : ' + params[0][2][3];
res += '<br/> 开盘 : ' + params[1][2][0] + ' 最高 : ' + params[1][2][3]; res += '<br/> 收盘 : ' + params[0][2][1] + ' 最低 : ' + params[0][2][2];
res += '<br/> 收盘 : ' + params[1][2][1] + ' 最低 : ' + params[1][2][2];
res += '<br/>' + params[0][0];
res += ' : ' + params[0][2];
return res; return res;
} }
}, },
......
...@@ -113,6 +113,12 @@ option = { ...@@ -113,6 +113,12 @@ option = {
] ]
}) })
} }
series[0].markPoint = {
symbol:'emptyCircle',
symbolSize:series[0].radius[0],
effect:{show:true,scaleSize:12,color:'rgba(250,225,50,0.8)',shadowBlur:10,period:30},
data:[{x:'50%',y:'50%'}]
};
return series; return series;
})() })()
}; };
...@@ -124,7 +130,7 @@ setTimeout(function(){ ...@@ -124,7 +130,7 @@ setTimeout(function(){
style : { style : {
x : _ZR.getWidth() / 2, x : _ZR.getWidth() / 2,
y : _ZR.getHeight() / 2, y : _ZR.getHeight() / 2,
color: '#bbb', color: '#666',
text : '恶梦的过去', text : '恶梦的过去',
textAlign : 'center' textAlign : 'center'
} }
...@@ -134,9 +140,8 @@ setTimeout(function(){ ...@@ -134,9 +140,8 @@ setTimeout(function(){
style : { style : {
x : _ZR.getWidth() / 2 + 200, x : _ZR.getWidth() / 2 + 200,
y : _ZR.getHeight() / 2, y : _ZR.getHeight() / 2,
brushType:'both', brushType:'fill',
color: 'orange', color: 'orange',
strokeColor: 'yellow',
text : '美好的未来', text : '美好的未来',
textAlign : 'left', textAlign : 'left',
textFont:'normal 20px 微软雅黑' textFont:'normal 20px 微软雅黑'
......
...@@ -129,7 +129,7 @@ option = { ...@@ -129,7 +129,7 @@ option = {
} }
} }
} }
}, }
} }
], ],
markPoint : { markPoint : {
......
...@@ -68,12 +68,22 @@ ...@@ -68,12 +68,22 @@
<div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" id ="icon-resize" ></a>option</div> <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" id ="icon-resize" ></a>option</div>
<textarea id="code" name="code"> <textarea id="code" name="code">
option = { option = {
title :{
text : '销售数据',
subtext : '纯属虚构'
},
tooltip : { tooltip : {
trigger: 'axis' trigger: 'axis',
formatter: function(v){
return v[0][1] + ' : '
+ (v[0][2] - v[1][2] > 0 ? '+' : '-')
+ v[3][2] + '<br/>'
+ v[0][0] + ' : ' + v[0][2] + '<br/>'
+ v[1][0] + ' : ' + v[1][2] + '<br/>'
}
}, },
toolbox: { toolbox: {
show : true, show : true,
y: 'bottom',
feature : { feature : {
mark : {show: true}, mark : {show: true},
dataView : {show: true, readOnly: false}, dataView : {show: true, readOnly: false},
...@@ -82,9 +92,9 @@ option = { ...@@ -82,9 +92,9 @@ option = {
saveAsImage : {show: true} saveAsImage : {show: true}
} }
}, },
calculable : true,
legend: { legend: {
data:['上周对比','本周变化'] data:['本周', '上周'],
selectedMode:false
}, },
xAxis : [ xAxis : [
{ {
...@@ -95,42 +105,56 @@ option = { ...@@ -95,42 +105,56 @@ option = {
yAxis : [ yAxis : [
{ {
type : 'value', type : 'value',
power: 10, min : 200,
max : 450,
splitArea : {show : true} splitArea : {show : true}
} }
], ],
series : [ series : [
{ {
name:'上周对比2', name:'本周',
type:'line',
data:[400, 374, 251, 300, 420, 400, 440]
},
{
name:'上周',
type:'line',
symbol:'none',
itemStyle:{
normal:{
lineStyle: {
width:1,
type:'dashed'
}
}
},
data:[320, 332, 301, 334, 360, 330, 350]
},
{
name:'上周2',
type:'bar', type:'bar',
stack: '1', stack: '1',
barWidth: 20, barWidth: 6,
tooltip : {
show: 'false',
trigger:'none'
},
itemStyle:{ itemStyle:{
normal:{ normal:{
borderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)' color:'rgba(0,0,0,0)'
}, },
emphasis:{ emphasis:{
borderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)' color:'rgba(0,0,0,0)'
} }
}, },
data:[320, 332, 200, 334, 300, 330, 320] data:[320, 332, 251, 300, 360, 330, 350]
}, },
{ {
name:'本周变化', name:'变化',
type:'bar', type:'bar',
stack: '1', stack: '1',
data:[120, 132, 101, 134, 90, 230, 210] data:[
}, 80, 42,
{ {value : 50, itemStyle:{ normal:{color:'red'}}},
name:'上周对比', {value : 34, itemStyle:{ normal:{color:'red'}}},
type:'line', 60, 70, 90
data:[320, 332, 301, 334, 390, 330, 320] ]
} }
] ]
}; };
......
...@@ -97,7 +97,7 @@ option = { ...@@ -97,7 +97,7 @@ option = {
normal : { normal : {
label : { label : {
position : 'inner', position : 'inner',
formatter : function(a,b,c,d) {return (d - 0).toFixed(0) + '%'}, formatter : function(a,b,c,d) {return (d - 0).toFixed(0) + '%'}
}, },
labelLine : { labelLine : {
show : false show : false
...@@ -106,8 +106,7 @@ option = { ...@@ -106,8 +106,7 @@ option = {
emphasis : { emphasis : {
label : { label : {
show : true, show : true,
formatter : "{b}\n{d}%", formatter : "{b}\n{d}%"
position : 'inner'
} }
} }
......
...@@ -1910,42 +1910,45 @@ var optionMap = { ...@@ -1910,42 +1910,45 @@ var optionMap = {
] ]
}) })
} }
series[0].markPoint = {
symbol:'emptyCircle',
symbolSize:series[0].radius[0],
effect:{show:true,scaleSize:13,color:'rgba(250,225,50,0.8)',shadowBlur:10,period:30},
data:[{x:'50%',y:'50%'}]
};
return series; return series;
})(), })(),
calculable : (function(){ calculable : (function(){
functionMap.mix4 = function() { setTimeout(function(){
setTimeout(function(){ if (!myChart) {
if (!myChart) { return;
return; }
var _ZR = myChart.getZrender();
// 补充千层饼
_ZR.addShape({
shape : 'text',
style : {
x : _ZR.getWidth() / 2,
y : _ZR.getHeight() / 2,
color: '#666',
text : '恶梦的过去',
textAlign : 'center'
} }
var _ZR = myChart.getZrender(); });
// 补充千层饼 _ZR.addShape({
_ZR.addShape({ shape : 'text',
shape : 'text', style : {
style : { x : _ZR.getWidth() / 2 + 200,
x : _ZR.getWidth() / 2, y : _ZR.getHeight() / 2,
y : _ZR.getHeight() / 2, brushType:'fill',
color: '#bbb', color: 'orange',
text : '恶梦的过去', text : '美好的未来',
textAlign : 'center' textAlign : 'left',
} textFont:'normal 20px 微软雅黑'
}); }
_ZR.addShape({ });
shape : 'text', _ZR.refresh();
style : { }, 2000);
x : _ZR.getWidth() / 2 + 200,
y : _ZR.getHeight() / 2,
brushType:'both',
color: 'orange',
strokeColor: 'yellow',
text : '美好的未来',
textAlign : 'left',
textFont:'normal 20px 微软雅黑'
}
});
_ZR.refresh();
}, 2000);
}
return false; return false;
})() })()
}, true); }, true);
......
...@@ -431,7 +431,7 @@ ...@@ -431,7 +431,7 @@
<p> <p>
<small>别因为图表的能力局限了你的创作力,<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>拥有超过<strong>500</strong>项的配置选项,配合<strong>多级控制</strong>让它具备了高度个性化能力,开源后大量的应用反馈让研发团队吃惊,很多从未想过的图表样式被被创作出来了。 </small> <small>别因为图表的能力局限了你的创作力,<a href="http://ecomfe.github.io/echarts/" target="_blank">ECharts</a>拥有超过<strong>500</strong>项的配置选项,配合<strong>多级控制</strong>让它具备了高度个性化能力,开源后大量的应用反馈让研发团队吃惊,很多从未想过的图表样式被被创作出来了。 </small>
</p> </p>
<img src="./img/creativity.jpg" style="width:100%;max-width:100%;margin:0;"> <img src="../asset/img/creativity.jpg" style="width:100%;max-width:100%;margin:0;">
</section> </section>
<section> <section>
......
...@@ -819,7 +819,7 @@ define(function() { ...@@ -819,7 +819,7 @@ define(function() {
period: 15, // 运动周期,无单位,值越大越慢 period: 15, // 运动周期,无单位,值越大越慢
scaleSize : 2 // 放大倍数,以markPoint点size为基准 scaleSize : 2 // 放大倍数,以markPoint点size为基准
// color : 'gold', // color : 'gold',
// shadowColor : 'rgba(255,215,0,0.8)' // shadowColor : 'rgba(255,215,0,0.8)',
// shadowBlur : 0 // 炫光模糊 // shadowBlur : 0 // 炫光模糊
}, },
itemStyle: { itemStyle: {
...@@ -860,8 +860,8 @@ define(function() { ...@@ -860,8 +860,8 @@ define(function() {
show: false, show: false,
period: 15, // 运动周期,无单位,值越大越慢 period: 15, // 运动周期,无单位,值越大越慢
scaleSize : 2 // 放大倍数,以markLine线lineWidth为基准 scaleSize : 2 // 放大倍数,以markLine线lineWidth为基准
// color : 'gold' // color : 'gold',
// shadowColor : 'rgba(255,215,0,0.8)' // shadowColor : 'rgba(255,215,0,0.8)',
// shadowBlur : lineWidth * 2 // 炫光模糊,默认等于scaleSize计算所得 // shadowBlur : lineWidth * 2 // 炫光模糊,默认等于scaleSize计算所得
}, },
itemStyle: { itemStyle: {
......
...@@ -410,9 +410,9 @@ option = { ...@@ -410,9 +410,9 @@ option = {
markLine : { markLine : {
data : [ data : [
[ [
{name : '周最低', value : 620, xAxis: '周一', yAxis: 620}, {type : 'average', name : '平均值'},
{name : '周最高', value : 930, xAxis: '周六', yAxis: 930} {type : 'max'},
{type : 'min'}
] ]
] ]
} }
...@@ -489,7 +489,7 @@ option = { ...@@ -489,7 +489,7 @@ option = {
label : {show: true} label : {show: true}
}, },
emphasis: { emphasis: {
color: 'lightgreen', color: 'lightgreen'
} }
}, },
data: (function() { data: (function() {
...@@ -672,11 +672,11 @@ option = { ...@@ -672,11 +672,11 @@ option = {
color0: 'blue', // 阴线填充颜色 color0: 'blue', // 阴线填充颜色
lineStyle: { lineStyle: {
width: 3, width: 3,
color0: 'blue', // 阴线边框颜色 color0: 'blue' // 阴线边框颜色
} }
}, },
emphasis: { emphasis: {
color0: 'blue', // 阴线填充颜色 color0: 'blue' // 阴线填充颜色
} }
} }
}, },
...@@ -830,34 +830,24 @@ option = { ...@@ -830,34 +830,24 @@ option = {
normal : { normal : {
label : { label : {
position : 'inner', position : 'inner',
formatter : function(a,b,c,d) {return (d - 0).toFixed(0) + ' %'}, formatter : function(a,b,c,d) {return (d - 0).toFixed(0) + '%'}
}, },
labelLine : { labelLine : {
show : false show : false
} }
},
emphasis : {
label : {
show : true,
formatter : "{b}\n{d}%"
}
} }
}, },
data:[ data:[
{value:335, name:'直达'}, {value:335, name:'直达'},
{value:679, name:'营销广告'}, {value:679, name:'营销广告'},
{ {value:1548, name:'搜索引擎'}
value:1548,
name:'搜索引擎',
itemStyle : {
normal : {
label : {
show : false
}
},
emphasis : {
label : {
show : true,
formatter : "{b} : {d}%",
position : 'inner'
}
}
}
}
] ]
}, },
{ {
...@@ -1262,14 +1252,14 @@ option = { ...@@ -1262,14 +1252,14 @@ option = {
color: 'rgba(255,30,30,0.5)', color: 'rgba(255,30,30,0.5)',
lineStyle : { lineStyle : {
width: 1, width: 1,
color: 'green', color: 'green'
} }
}, },
emphasis: { emphasis: {
color: 'yellow', color: 'yellow',
lineStyle : { lineStyle : {
width: 2, width: 2,
color: 'blue', color: 'blue'
} }
} }
} }
...@@ -1506,7 +1496,7 @@ option = { ...@@ -1506,7 +1496,7 @@ option = {
} }
} }
} }
}, }
} }
], ],
markPoint : { markPoint : {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册