329 lines
13 KiB
HTML
Generated
329 lines
13 KiB
HTML
Generated
|
|
<!--
|
|
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>
|
|
|
|
<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',
|
|
large: true,
|
|
largeThreshold: 10,
|
|
data: data[0]
|
|
}, {
|
|
show: false,
|
|
name: 'bar2',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
large: true,
|
|
largeThreshold: 10,
|
|
data: data[1]
|
|
}, {
|
|
name: 'bar3',
|
|
type: 'bar',
|
|
stack: 'two',
|
|
large: true,
|
|
largeThreshold: 10,
|
|
data: data[2]
|
|
}, {
|
|
name: 'bar4',
|
|
type: 'bar',
|
|
stack: 'two',
|
|
large: true,
|
|
largeThreshold: 10,
|
|
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,
|
|
showBackground: true,
|
|
data: [
|
|
['mm', 33],
|
|
['yy', -44],
|
|
['tt', 55],
|
|
['rr', 66]
|
|
]
|
|
}, {
|
|
type: 'bar',
|
|
large: true,
|
|
largeThreshold: 2,
|
|
showBackground: true,
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
encode: {
|
|
x: 1,
|
|
y: 0
|
|
},
|
|
data: [
|
|
['mm', 33],
|
|
['yy', -44],
|
|
['tt', 55],
|
|
['rr', 66]
|
|
]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main1', {
|
|
option: option,
|
|
title: [
|
|
'bar in large mode with background',
|
|
'click bar should alert',
|
|
'tooltip should be ok'
|
|
]
|
|
});
|
|
|
|
chart.on('click', function (param) {
|
|
alert('seriesIndex: ' + param.seriesIndex + ' dataIndex: ' + param.dataIndex);
|
|
console.log(param);
|
|
});
|
|
});
|
|
|
|
</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,
|
|
progressive: 1,
|
|
progressiveThreshold: 2,
|
|
data: [
|
|
['mm', 33],
|
|
['yy', -44],
|
|
['tt', 55],
|
|
['rr', 66]
|
|
]
|
|
}, {
|
|
type: 'bar',
|
|
large: true,
|
|
largeThreshold: 2,
|
|
progressive: 1,
|
|
progressiveThreshold: 2,
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
encode: {
|
|
x: 1,
|
|
y: 0
|
|
},
|
|
data: [
|
|
['mm', 33],
|
|
['yy', -44],
|
|
['tt', 55],
|
|
['rr', 66]
|
|
]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main2', {
|
|
option: option,
|
|
title: [
|
|
'progressive bar in large mode',
|
|
'click bar should alert',
|
|
'tooltip should be ok'
|
|
]
|
|
});
|
|
|
|
chart.on('click', function (param) {
|
|
alert('seriesIndex: ' + param.seriesIndex + ' dataIndex: ' + param.dataIndex);
|
|
console.log(param);
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |