<!-- | |
Licensed to the Apache Software Foundation (ASF) under one | |
or more contributor license agreements. See the NOTICE file | |
distributed with this work for additional information | |
regarding copyright ownership. The ASF licenses this file | |
to you under the Apache License, Version 2.0 (the | |
"License"); you may not use this file except in compliance | |
with the License. You may obtain a copy of the License at | |
http://www.apache.org/licenses/LICENSE-2.0 | |
Unless required by applicable law or agreed to in writing, | |
software distributed under the License is distributed on an | |
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
KIND, either express or implied. See the License for the | |
specific language governing permissions and limitations | |
under the License. | |
--> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
<script src="lib/simpleRequire.js"></script> | |
<script src="lib/config.js"></script> | |
<script src="lib/jquery.min.js"></script> | |
<script src="lib/facePrint.js"></script> | |
<script src="lib/testHelper.js"></script> | |
<link rel="stylesheet" href="lib/reset.css" /> | |
</head> | |
<body> | |
<style> | |
html, body, #main { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
} | |
#main { | |
background: #fff; | |
} | |
</style> | |
<div id="main0"></div> | |
<div id="main1"></div> | |
<div id="main2"></div> | |
<div id="main3"></div> | |
<div id="main4"></div> | |
<div id="main5"></div> | |
<div id="main6"></div> | |
<div id="main7"></div> | |
<script> | |
require([ | |
'echarts' | |
], function (echarts) { | |
var xAxisData = []; | |
var data1 = []; | |
var data2 = []; | |
var data3 = []; | |
var data4 = []; | |
for (var i = 0; i < 100; i++) { | |
xAxisData.push('类目' + i); | |
data1.push((Math.random() * 5).toFixed(2)); | |
data2.push(Math.random().toFixed(2)); | |
data3.push((Math.random() + 0.5).toFixed(2)); | |
data4.push((Math.random() + 0.3).toFixed(2)); | |
} | |
var data = [["4.70","4.69","2.48","0.77","3.08","4.57","2.68","3.35","0.37","1.86","2.68","0.64","1.82","1.88","0.31","0.45","4.48","3.08","1.58","2.98","1.87","0.96","3.43","2.58","0.41","2.69","0.59","3.47","4.33","1.75","0.51","1.01","1.60","3.62","2.29","2.40","1.52","2.30","0.18","3.99","0.26","2.92","2.94","0.54","2.98","3.71","2.24","0.32","1.98","2.56","1.81","4.67","2.49","1.73","1.79","2.79","3.39","1.83","3.24","3.76","1.23","1.69","3.55","2.66","1.83","3.69","2.70","0.75","0.71","1.44","3.23","1.49","1.50","3.61","4.41","1.26","2.93","2.84","4.11","0.80","2.67","2.59","2.71","4.85","1.28","1.21","4.32","4.04","1.15","4.38","4.41","4.94","4.13","0.86","1.97","3.58","3.02","1.29","1.47","3.75"],["0.78","0.90","0.54","0.75","0.68","0.68","0.84","0.87","0.78","0.79","0.77","0.34","0.81","0.80","0.28","0.87","0.98","0.92","0.66","0.87","0.88","0.56","0.34","0.67","0.60","0.00","0.22","0.87","0.81","0.69","0.41","0.02","0.18","0.55","0.48","0.90","0.62","0.17","0.37","0.35","0.31","0.78","0.34","0.56","0.22","0.87","0.55","0.94","0.58","0.66","0.33","0.73","0.78","0.44","0.79","0.12","0.81","0.77","0.33","0.30","0.86","0.87","0.09","0.91","0.90","0.34","0.76","0.93","0.55","0.41","0.63","0.96","0.80","0.41","0.53","0.53","0.66","0.24","0.24","0.99","0.92","0.85","0.44","0.92","0.28","0.61","0.20","0.74","0.52","0.91","0.42","0.08","0.00","0.57","0.81","0.39","0.41","0.72","0.02","0.20"],["1.17","0.65","0.98","1.08","1.02","1.41","1.01","1.17","0.63","0.94","0.78","1.43","0.67","1.09","1.29","0.60","0.50","1.38","0.76","0.94","0.79","1.44","0.55","1.48","1.13","0.63","1.07","0.57","1.43","0.81","0.87","0.70","1.04","1.43","1.00","0.50","0.54","0.57","0.97","0.58","1.19","0.73","0.76","0.75","1.39","0.93","0.60","1.28","1.14","1.18","0.60","0.59","1.46","0.64","1.44","0.59","1.49","0.84","0.71","1.44","1.11","1.18","1.40","0.64","1.15","1.07","1.35","0.86","1.13","1.41","1.03","0.57","1.44","0.93","1.47","1.16","1.40","1.14","0.97","0.78","1.49","0.59","0.99","1.35","0.88","1.02","1.16","1.07","0.81","0.87","1.34","0.98","1.17","1.46","0.71","1.13","0.80","1.24","0.76","0.68"],["1.04","0.54","0.55","1.05","1.20","1.13","0.53","0.63","0.82","0.52","0.86","0.33","0.64","1.14","0.47","0.72","0.97","1.18","1.02","0.53","1.14","1.24","1.13","0.60","0.47","0.94","0.64","0.43","0.71","0.33","0.46","0.82","0.80","0.97","0.43","1.29","0.65","0.92","0.63","0.58","0.31","1.09","0.35","0.43","1.19","0.47","0.59","0.52","0.79","0.69","0.54","0.39","0.33","1.26","0.40","0.76","0.80","0.96","0.82","1.26","0.70","0.50","0.67","1.27","1.24","0.49","0.94","0.97","0.90","1.03","1.28","0.46","0.57","1.23","0.40","0.71","1.08","0.51","1.03","0.38","0.81","0.44","1.02","0.79","1.08","1.01","0.66","0.80","0.65","0.97","0.56","0.33","0.61","0.92","0.40","0.77","1.05","1.21","0.34","0.84"]]; | |
var option = { | |
legend: { | |
data: ['bar', 'bar2', 'bar3', 'bar4'], | |
align: 'left' | |
}, | |
toolbox: { | |
// y: 'bottom', | |
feature: { | |
magicType: { | |
type: ['line', 'bar', 'stack', 'tiled'] | |
}, | |
dataZoom: { | |
yAxisIndex: false | |
}, | |
dataView: {}, | |
saveAsImage: { | |
pixelRatio: 2 | |
} | |
} | |
}, | |
tooltip: {}, | |
dataZoom: [{ | |
startValue: 48, | |
endValue: 99, | |
type: 'inside' | |
}, { | |
startValue: 48, | |
endValue: 99, | |
type: 'slider' | |
}], | |
xAxis: { | |
data: xAxisData, | |
silent: false, | |
splitLine: { | |
show: false | |
}, | |
splitArea: { | |
show: false | |
} | |
}, | |
yAxis: { | |
splitArea: { | |
show: false | |
} | |
}, | |
series: [{ | |
name: 'bar', | |
type: 'bar', | |
stack: 'one', | |
data: data[0], | |
showBackground: true | |
}, { | |
show: false, | |
name: 'bar2', | |
type: 'bar', | |
stack: 'one', | |
data: data[1] | |
}, { | |
name: 'bar3', | |
type: 'bar', | |
stack: 'two', | |
data: data[2] | |
}, { | |
name: 'bar4', | |
type: 'bar', | |
stack: 'two', | |
data: data[3], | |
silent: true | |
}], | |
animationDelay: function (idx) { | |
return idx * 5; | |
}, | |
animationDelayUpdate: function (idx) { | |
return idx * 5; | |
} | |
} | |
var chart = testHelper.create(echarts, 'main0', { | |
option: option, | |
}); | |
chart.on('click', function (params) { | |
console.log(params); | |
}); | |
}); | |
</script> | |
<script> | |
require([ | |
'echarts'/*, 'map/js/china' */ | |
], function (echarts) { | |
var option = { | |
xAxis: [{ | |
type: 'category' | |
}, { | |
gridIndex: 1 | |
}], | |
yAxis: [{ | |
}, { | |
type: 'category', | |
gridIndex: 1 | |
}], | |
grid: [{ | |
containLabel: true, | |
left: 10, | |
right: '55%' | |
}, { | |
containLabel: true, | |
left: '55%', | |
right: 10 | |
}], | |
tooltip: {}, | |
series: [{ | |
type: 'bar', | |
large: true, | |
largeThreshold: 2, | |
data: [ | |
['mm', 33], | |
['yy', -44], | |
['tt', 55], | |
['rr', 66] | |
], | |
showBackground: true, | |
backgroundStyle: { | |
color: 'rgba(0, 0, 255, 0.2)' | |
} | |
}, { | |
type: 'bar', | |
large: true, | |
largeThreshold: 2, | |
xAxisIndex: 1, | |
yAxisIndex: 1, | |
encode: { | |
x: 1, | |
y: 0 | |
}, | |
data: [ | |
['mm', 33], | |
['yy', -44], | |
['tt', 55], | |
['rr', 66] | |
], | |
showBackground: true, | |
backgroundStyle: { | |
color: 'rgba(0, 0, 255, 0.2)' | |
} | |
}] | |
}; | |
var chart = testHelper.create(echarts, 'main1', { | |
option: option, | |
title: [ | |
'Background with large render mode.' | |
] | |
}); | |
}); | |
</script> | |
<script> | |
require([ | |
'echarts'/*, 'map/js/china' */ | |
], function (echarts) { | |
var option = { | |
xAxis: [{ | |
type: 'category' | |
}, { | |
gridIndex: 1 | |
}], | |
yAxis: [{ | |
}, { | |
type: 'category', | |
gridIndex: 1 | |
}], | |
grid: [{ | |
containLabel: true, | |
left: 10, | |
right: '55%' | |
}, { | |
containLabel: true, | |
left: '55%', | |
right: 10 | |
}], | |
tooltip: {}, | |
series: [{ | |
type: 'bar', | |
data: [ | |
['mm', 33], | |
['yy', -44], | |
['tt', 55], | |
['rr', 66] | |
], | |
showBackground: true, | |
backgroundStyle: { | |
color: 'rgba(0, 0, 255, 0.2)' | |
} | |
}, { | |
type: 'bar', | |
xAxisIndex: 1, | |
yAxisIndex: 1, | |
encode: { | |
x: 1, | |
y: 0 | |
}, | |
data: [ | |
['mm', 33], | |
['yy', -44], | |
['tt', 55], | |
['rr', 66] | |
], | |
showBackground: true, | |
backgroundStyle: { | |
color: 'rgba(0, 0, 255, 0.2)' | |
} | |
}] | |
}; | |
var chart = testHelper.create(echarts, 'main2', { | |
option: option, | |
title: [ | |
'Background with normal render mode.' | |
] | |
}); | |
}); | |
</script> | |
<script> | |
require(['echarts'], function (echarts) { | |
var chart = echarts.init(document.getElementById('main3')); | |
var option = { | |
angleAxis: { | |
type: 'category', | |
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], | |
z: 10 | |
}, | |
tooltip: { | |
}, | |
radiusAxis: { | |
}, | |
polar: { | |
center: ['50%', '50%'] | |
}, | |
series: [{ | |
type: 'bar', | |
data: [1, 2, '-', 3, 0, 5, 7], | |
coordinateSystem: 'polar', | |
barMaxWidth: '50%', | |
barMinHeight: 10, | |
showBackground: true | |
}] | |
}; | |
var chart = testHelper.create(echarts, 'main3', { | |
option: option, | |
title: [ | |
'Bar background on radial polar' | |
] | |
}); | |
}); | |
</script> | |
<script> | |
require(['echarts'], function (echarts) { | |
var chart = echarts.init(document.getElementById('main4')); | |
var option = { | |
angleAxis: { | |
triggerEvent: true | |
}, | |
radiusAxis: { | |
type: 'category', | |
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], | |
z: 10, | |
triggerEvent: true | |
}, | |
polar: { | |
}, | |
tooltip: {}, | |
series: [{ | |
type: 'bar', | |
data: [1, '-', 4, 3, '-', 5, 7], | |
coordinateSystem: 'polar', | |
itemStyle: { | |
normal: { | |
color: '#00f' | |
} | |
}, | |
barWidth: '50%', | |
showBackground: true | |
}] | |
}; | |
var chart = testHelper.create(echarts, 'main4', { | |
option: option, | |
title: [ | |
'Bar background on tangential polar' | |
] | |
}); | |
}); | |
</script> | |
<script> | |
require(['echarts'], function (echarts) { | |
var chart = echarts.init(document.getElementById('main5')); | |
var option = { | |
angleAxis: { | |
type: 'category', | |
data: ['周一', '周二', '周三', '周四'], | |
z: 10 | |
}, | |
radiusAxis: { | |
}, | |
polar: { | |
}, | |
series: [{ | |
type: 'bar', | |
data: [1, 2, 3, 4], | |
coordinateSystem: 'polar', | |
name: 'A', | |
showBackground: true | |
}, { | |
type: 'bar', | |
data: [2, 4, 6, 8], | |
coordinateSystem: 'polar', | |
name: 'B' | |
}, { | |
type: 'bar', | |
data: [1, 2, 3, 4], | |
coordinateSystem: 'polar', | |
name: 'C' | |
}], | |
legend: { | |
show: true, | |
data: ['A', 'B', 'C'] | |
} | |
}; | |
var chart = testHelper.create(echarts, 'main5', { | |
option: option, | |
title: [ | |
'Multiple bar series with background on radial polar' | |
] | |
}); | |
}); | |
</script> | |
<script> | |
require(['echarts'], function (echarts) { | |
var chart = echarts.init(document.getElementById('main6')); | |
var option = { | |
angleAxis: { | |
// clockwise: false | |
}, | |
radiusAxis: { | |
type: 'category', | |
data: ['周一', '周二', '周三', '周四'], | |
z: 10 | |
}, | |
polar: { | |
}, | |
series: [{ | |
type: 'bar', | |
data: [1, 2, 3, 4], | |
coordinateSystem: 'polar', | |
name: 'A', | |
showBackground: true | |
}, { | |
type: 'bar', | |
data: [2, 4, 6, 8], | |
coordinateSystem: 'polar', | |
name: 'B' | |
}, { | |
type: 'bar', | |
data: [1, 2, 3, 4], | |
coordinateSystem: 'polar', | |
name: 'C' | |
}], | |
legend: { | |
show: true, | |
data: ['A', 'B', 'C'] | |
} | |
}; | |
var chart = testHelper.create(echarts, 'main6', { | |
option: option, | |
title: [ | |
'polar bars' | |
] | |
}); | |
}); | |
</script> | |
<script> | |
require(['echarts'], function (echarts) { | |
var chart = echarts.init(document.getElementById('main7')); | |
var option = { | |
xAxis: { | |
type: 'category', | |
data: ['Mon', '1', '3', '4', '5', '6', '7', '8'] | |
}, | |
yAxis: { | |
type: 'value' | |
}, | |
series: [{ | |
data: [110, 120, 150, 250, 350, 400, 500, 600], | |
type: 'bar', | |
itemStyle: { | |
barBorderWidth: 20, | |
barBorderColor: 'rgba(50,50,50,0.3)' | |
}, | |
showBackground: true, | |
backgroundStyle: { | |
color: 'green', | |
barBorderRadius: [20, 20, 20, 20], | |
} | |
}] | |
}; | |
var chart = testHelper.create(echarts, 'main7', { | |
option: option, | |
title: [ | |
'background borderRadius' | |
], | |
buttons: [{ | |
text: 'update borderRadius to [30, 40, 0, 60]', | |
onclick: function () { | |
chart.setOption({ | |
series: { | |
backgroundStyle: { | |
borderRadius: [30, 40, 0, 60] | |
} | |
} | |
}); | |
} | |
}] | |
}); | |
}); | |
</script> | |
</body> | |
</html> |