Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 678e6a55 编写于 作者: K kener
浏览文件
操作

test all chart

上级 c346349c
隐藏空白更改
内联 并排
Showing with 576 addition and 1 deletion
src/component/base.js
浏览文件 @ 678e6a55
......@@ -313,7 +313,7 @@ define(function(require) {
'rgba(0,0,0,0)',
'horizontal' // 走向，用于默认文字定位
)
// 重新pack一下数据
ecData.pack(
itemShape,
series, seriesIndex,
......
test/allchart/all.html 0 → 100644
浏览文件 @ 678e6a55
<!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="../../doc/asset/js/esl/esl.js"></script>
<script src="../../doc/asset/js/codemirror.js"></script>
<script src="../../doc/asset/js/javascript.js"></script>
<link href="../../doc/asset/css/bootstrap.css" rel="stylesheet">
<link href="../../doc/asset/css/bootstrap-responsive.css" rel="stylesheet">
<link href="../../doc/asset/css/codemirror.css" rel="stylesheet">
<link href="../../doc/asset/css/monokai.css" rel="stylesheet">
<link rel="shortcut icon" href="../../doc/asset/ico/favicon.png">
<style type="text/css">
.test-head {padding-left: 20px;margin-top:0;background-color:#eee;}
.CodeMirror pre{color: #f8f8f2;}
.sidebar-nav {
padding: 9px 0;
margin-bottom: 0;
}
.icon-resize-full, .icon-resize-small {
float: right;
opacity: .3;
}
.span4.ani {
transition: width 1s;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari and Chrome */
-o-transition: width 1s; /* Opera */
}
.span8.ani {
transition: width 1s;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari and Chrome */
-o-transition: width 1s; /* Opera */
}
.main {
height: 400px;
overflow: hidden;
padding : 10px;
margin-bottom: 10px;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>
</head>
<body>
<h3 class="test-head"><a href="../../index.html">ECharts</a> - test all <button onclick="refreshAll()">Refresh All</button></h3>
<div class="container-fluid" idx='0'>
<div class="row-fluid">
<div md="sidebar-code" class="span4">
<div class="well sidebar-nav">
<div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize" ></a>option</div>
<textarea md="code" name="code">
option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','直接访问','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'邮件营销',
type:'line',
stack: '总量',
symbol: 'none',
itemStyle: {
normal: {
areaStyle: {
// 区域图，纵向渐变填充
color : (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 200, 0, 400,
[[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,255,0.1)']]
)
})()
}
}
},
data:[
120, 132, 301, 134,
{value:90, symbol:'droplet',symbolSize:5},
230, 210
]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
smooth: true,
symbol: 'image://../../doc/asset/ico/favicon.png', // 系列级个性化拐点图形
symbolSize: 8,
data:[
120, 82,
{
value:201,
symbol: 'star', // 数据级个性化拐点图形
symbolSize : 15,
itemStyle : { normal: {label : {
show: true,
textStyle : {
fontSize : '20',
fontFamily : '微软雅黑',
fontWeight : 'bold'
}
}}}
},
{
value:134,
symbol: 'none'
},
190,
{
value : 230,
symbol: 'emptypin',
symbolSize: 8
},
110
]
},
{
name:'直接访问',
type:'line',
stack: '总量',
symbol: 'arrow',
symbolSize: 6,
symbolRotate: -45,
itemStyle: {
normal: {
color: 'red',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'dashed'
}
},
emphasis: {
color: 'blue'
}
},
data:[
320, 332, '-', 334,
{
value: 390,
symbol: 'star6',
symbolSize : 20,
symbolRotate : 10,
itemStyle: { // 数据级个性化折线样式
normal: {
color: 'yellowgreen'
},
emphasis: {
color: 'orange',
label : {
show: true,
position: 'inside',
textStyle : {
fontSize : '20'
}
}
}
}
},
330, 320
]
},
{
name:'搜索引擎',
type:'line',
symbol:'emptyCircle',
itemStyle: {
normal: {
lineStyle: { // 系列级个性化折线样式，横向渐变描边
width: 2,
color: (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0, 1000, 0,
[[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,0,0.8)']]
)
})(),
shadowColor : 'rgba(0,0,0,0.5)',
shadowBlur: 10,
shadowOffsetX: 8,
shadowOffsetY: 8
}
},
emphasis : {
label : {show: true}
}
},
data:[
620, 732, 791,
{value:734, symbol:'emptyHeart',symbolSize:10},
890, 930, 820
]
}
]
};
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div md="graphic" class="span8">
<div md="main" class="main"></div>
<div>
<button onclick="refresh(true, 0)">Refresh ~</button>
<span md='wrong-message' style="color:red"></span>
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
<!--------1--------->
<div class="container-fluid" idx="1">
<div class="row-fluid">
<div md="sidebar-code" class="span4">
<div class="well sidebar-nav">
<div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" md ="icon-resize"></a>option</div>
<textarea md="code" name="code">
option = {
tooltip : {
show: true,
trigger: 'item'
},
legend: {
data:['邮件营销','联盟广告','直接访问','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'邮件营销',
type:'bar',
itemStyle: { // 系列级个性化样式，纵向渐变填充
normal: {
borderColor:'red',
color : (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 400, 0, 300,
[[0, 'green'],[1, 'yellow']]
)
})()
},
emphasis: {
borderWidth: 5,
borderColor:'green',
color: (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 400, 0, 300,
[[0, 'red'],[1, 'orange']]
)
})(),
label : {
show : true,
position : 'top',
formatter : "{a} {b} {c}",
textStyle : {
color: 'blue'
}
}
}
},
data:[220, 232, 101, 234, 190, 330, 210]
},
{
name:'联盟广告',
type:'bar',
stack: '总量',
data:[120, '-', 451, 134, 190, 230, 110]
},
{
name:'直接访问',
type:'bar',
stack: '总量',
itemStyle: { // 系列级个性化
normal: {
borderWidth: 6,
borderColor:'tomato',
color: 'red'
},
emphasis: {
borderColor:'red',
color: 'blue'
}
},
data:[
320, 332, 100, 334,
{
value: 390,
symbolSize : 10, // 数据级个性化
itemStyle: {
normal: {
color :'lime'
},
emphasis: {
color: 'skyBlue'
}
}
},
330, 320
]
},
{
name:'搜索引擎',
type:'bar',
barWidth: 40, // 系列级个性化，柱形宽度
itemStyle: {
normal: { // 系列级个性化，横向渐变填充
borderRadius: 5,
color : (function(){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0, 1000, 0,
[[0, 'rgba(30,144,255,0.8)'],[1, 'rgba(138,43,226,0.8)']]
)
})(),
label : {
show : true,
textStyle : {
fontSize : '20',
fontFamily : '微软雅黑',
fontWeight : 'bold'
}
}
}
},
data:[
620, 732,
{
value: 701,
itemStyle : { normal: {label : {position: 'inside'}}}
},
734, 890, 930, 820]
}
]
};
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div md="graphic" class="span8">
<div md="main" class="main"></div>
<div>
<button onclick="refresh(true, 1)">Refresh ~</button>
<span md='wrong-message' style="color:red"></span>
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
<script src="../../doc/asset/js/jquery.js"></script>
<script src="all.js"></script>
</body>
</html>
\ No newline at end of file
test/allchart/all.js 0 → 100644
浏览文件 @ 678e6a55
var myChart = [];
var domCode = $("[md='sidebar-code']");
var domGraphic = $("[md='graphic']");
var domMain = $("[md='main']");
var domMessage = $("[md='wrong-message']");
var iconResize = $("[md='icon-resize']");
var needRefresh = false;
function findIdxFromEvent(event) {
event = event || window.event;
return findIdx(event.target || event.srcElement);
}
function findIdx(d) {
var p = d;
while (p.className != 'container-fluid') {
p = p.parentElement;
}
return $(p).attr('idx');
}
var idx;
function autoResize(event) {
idx = findIdxFromEvent(event);
if (iconResize[idx].className == 'icon-resize-full') {
focusCode();
iconResize[idx].className = 'icon-resize-small';
}
else {
focusGraphic();
iconResize[idx].className = 'icon-resize-full';
}
}
function focusCode() {
domCode[idx].className = 'span8 ani';
domGraphic[idx].className = 'span4 ani';
}
function focusGraphic() {
domCode[idx].className = 'span4 ani';
domGraphic[idx].className = 'span8 ani';
if (needRefresh) {
myChart[idx].showLoading();
setTimeout(refresh, 1000);
}
}
var domTextarea = $("[md='code']");
var editor = [];
for (var i = 0, l = domTextarea.length; i < l; i++) {
editor[i] = CodeMirror.fromTextArea(
domTextarea[i],
{ lineNumbers: true }
);
editor[i].setOption("theme", 'monokai');
editor[i].on('change', function(){needRefresh = true;});
}
function refresh(isBtnRefresh, idd){
if (isBtnRefresh) {
idx = idd;
needRefresh = true;
focusGraphic();
return;
}
needRefresh = false;
if (myChart[idx] && myChart[idx].dispose) {
myChart[idx].dispose();
}
myChart[idx] = echarts.init(domMain[idx]);
(new Function(editor[idx].doc.getValue().replace(
'option', 'option[' + idx + ']'))
)()
myChart[idx].setOption(option[idx], true);
domMessage[idx].innerHTML = '';
}
function refreshAll() {
for (var i = 0, l = myChart.length; i < l; i++) {
(new Function(editor[i].doc.getValue().replace(
'option', 'option[' + i + ']'))
)();
myChart[i].setOption(option[i], true);
domMessage[i].innerHTML = '';
}
}
var developMode = true;
if (developMode) {
// for develop
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
//location: 'http://ecomfe.github.io/zrender/src',
location: '../../../zrender/src',
main: 'zrender'
}
]
});
}
else {
// for echarts online home page
var fileLocation = './www/js/echarts-map';
require.config({
paths:{
echarts: fileLocation,
'echarts/chart/line': fileLocation,
'echarts/chart/bar': fileLocation,
'echarts/chart/scatter': fileLocation,
'echarts/chart/k': fileLocation,
'echarts/chart/pie': fileLocation,
'echarts/chart/radar': fileLocation,
'echarts/chart/map': fileLocation,
'echarts/chart/chord': fileLocation,
'echarts/chart/force': fileLocation
}
});
}
// 按需加载
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/scatter',
'echarts/chart/k',
'echarts/chart/pie',
'echarts/chart/radar',
'echarts/chart/force',
'echarts/chart/chord',
'echarts/chart/map'
],
requireCallback
);
var echarts;
var option = {};
function requireCallback (ec) {
echarts = ec;
if (myChart.length > 0) {
for (var i = 0, l = myChart.length; i < l; i++) {
myChart[i].dispose && myChart[i].dispose();
}
}
myChart = [];
for (var i = 0, l = domMain.length; i < l; i++) {
myChart[i] = echarts.init(domMain[i]);
}
refreshAll();
window.onresize = function(){
for (var i = 0, l = myChart.length; i < l; i++) {
myChart[i].resize && myChart[i].resize();
}
};
}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或