418 lines
15 KiB
HTML
Generated
418 lines
15 KiB
HTML
Generated
<!DOCTYPE html>
|
|
<!--
|
|
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>
|
|
</style>
|
|
|
|
|
|
<div id="main-eventful"></div>
|
|
<div id="main-clip-by-system"></div>
|
|
<div id="main-clip-by-self"></div>
|
|
<div id="main-SVG-Path"></div>
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'/*, 'map/js/china' */
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
xAxis: {},
|
|
yAxis: {},
|
|
dataZoom: [{}, {type: 'inside'}],
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
return {
|
|
type: 'group',
|
|
position: api.coord([api.value(0), api.value(1)]),
|
|
children: [{
|
|
type: 'rect',
|
|
shape: {
|
|
x: -100,
|
|
y: -100,
|
|
width: 200,
|
|
height: 200,
|
|
r: 10
|
|
},
|
|
style: {
|
|
fill: 'rgba(102,241,98,0.4)'
|
|
},
|
|
silent: true,
|
|
styleEmphasis: false
|
|
}, {
|
|
type: 'group',
|
|
name: 'innerGroup',
|
|
children: [{
|
|
type: 'circle',
|
|
shape: {
|
|
r: 30,
|
|
cx: 0,
|
|
cy: 0
|
|
},
|
|
info: 0,
|
|
style: {
|
|
fill: 'red',
|
|
text: 'dataIndex: ' + params.dataIndex,
|
|
textFill: '#000',
|
|
textStroke: '#fff',
|
|
textStrokeWidth: 1
|
|
}
|
|
}, {
|
|
type: 'rect',
|
|
shape: {
|
|
x: 50,
|
|
y: 60,
|
|
width: 80,
|
|
height: 80
|
|
},
|
|
style: {
|
|
fill: '#ff3391'
|
|
}
|
|
}]
|
|
}]
|
|
};
|
|
},
|
|
data: [[121, 333], [29, 212]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main-eventful', {
|
|
title: [
|
|
'Eventful: ',
|
|
'Only this el trigger events: **red circle** and **red rect** of **dataIndex: 1**',
|
|
' Others not (green rect not)',
|
|
'Events (click, mousedown, mousemove, mouseup) are printed in console log.',
|
|
'red circle: params.info = 0, red rect: params.info = undefined'
|
|
],
|
|
option: option
|
|
});
|
|
|
|
chart && echarts.util.each(['click', 'mousedown', 'mousemove', 'mouseup'], function (eventName) {
|
|
chart.on(eventName, {dataIndex: 1, element: 'innerGroup'}, function (params) {
|
|
console.log(params.type, params);
|
|
console.log('params.info: ', params.info);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'/*, 'map/js/china' */
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
xAxis: {
|
|
min: 90,
|
|
max: 120,
|
|
scale: true
|
|
},
|
|
yAxis: {
|
|
min: 50,
|
|
max: 500,
|
|
scale: true
|
|
},
|
|
dataZoom: [
|
|
{type: 'inside', filterMode: 'none'},
|
|
{type: 'slider', filterMode: 'none'},
|
|
{type: 'slider', filterMode: 'none', orient: 'vertical'},
|
|
],
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
return {
|
|
type: 'polygon',
|
|
position: api.coord([api.value(0), api.value(1)]),
|
|
shape: {
|
|
points: [
|
|
[0, 0],
|
|
[50, -50],
|
|
[90, -50],
|
|
[140, 0],
|
|
[90, 50]
|
|
]
|
|
},
|
|
style: {
|
|
fill: 'green'
|
|
}
|
|
}
|
|
},
|
|
clip: true,
|
|
data: [[100, 300]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main-clip-by-system', {
|
|
title: [
|
|
'The shape should be **clipped** by the grid (by series.clip).',
|
|
],
|
|
option: option
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'/*, 'map/js/china' */
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
xAxis: {
|
|
min: 90,
|
|
max: 120,
|
|
scale: true
|
|
},
|
|
yAxis: {
|
|
min: 50,
|
|
max: 500,
|
|
scale: true
|
|
},
|
|
dataZoom: [
|
|
{type: 'inside', filterMode: 'none'},
|
|
{type: 'slider', filterMode: 'none'},
|
|
{type: 'slider', filterMode: 'none', orient: 'vertical'},
|
|
],
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
return {
|
|
type: 'group',
|
|
children: [{
|
|
type: 'polygon',
|
|
position: api.coord([api.value(0), api.value(1)]),
|
|
shape: {
|
|
points: [
|
|
[0, 0],
|
|
[50, -50],
|
|
[90, -50],
|
|
[140, 0],
|
|
[90, 50]
|
|
]
|
|
},
|
|
style: {
|
|
fill: 'blue'
|
|
}
|
|
}],
|
|
clipPath: {
|
|
type: 'rect',
|
|
shape: {
|
|
x: params.coordSys.x,
|
|
y: params.coordSys.y,
|
|
width: params.coordSys.width,
|
|
height: params.coordSys.height
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data: [[100, 300]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main-clip-by-self', {
|
|
title: [
|
|
'The shape should be **clipped** by the grid (by custom clipPath).',
|
|
],
|
|
option: option
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
// deprecated: this case would be wrong.
|
|
|
|
var data = [];
|
|
var data0 = [];
|
|
for (var i = 0; i < 100; i++) {
|
|
data.push(i);
|
|
data0.push([i, 10]);
|
|
}
|
|
|
|
var option = {
|
|
tooltip: {
|
|
},
|
|
dataZoom: [{
|
|
type: 'slider',
|
|
yAxisIndex: 0,
|
|
zoomLock: true,
|
|
width: 10,
|
|
right: 10,
|
|
top: 70,
|
|
bottom: 20,
|
|
start: 94,
|
|
end: 100,
|
|
handleSize: 0,
|
|
showDetail: false,
|
|
}, {
|
|
type: 'inside',
|
|
yAxisIndex: 0,
|
|
start: 94,
|
|
end: 100,
|
|
zoomOnMouseWheel: false,
|
|
moveOnMouseMove: true,
|
|
moveOnMouseWheel: true
|
|
}],
|
|
grid: {
|
|
show: true,
|
|
top: 70,
|
|
bottom: 20,
|
|
left: 100,
|
|
right: 20,
|
|
backgroundColor: '#fff',
|
|
borderWidth: 0
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
position: 'top',
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: ['#E9EDFF']
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#929ABA'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#929ABA',
|
|
inside: false,
|
|
align: 'center'
|
|
}
|
|
},
|
|
yAxis: {
|
|
},
|
|
series: [{
|
|
type: 'scatter',
|
|
data: data0,
|
|
encode: {x: 1, y: 0}
|
|
}, {
|
|
type: 'custom',
|
|
renderItem: renderAxisLabelItem,
|
|
encode: {
|
|
x: -1, // Then this series will not controlled by x.
|
|
y: 0
|
|
},
|
|
data: data
|
|
}]
|
|
};
|
|
|
|
function renderAxisLabelItem(params, api) {
|
|
// Get the height corresponds to length 1 on y axis.
|
|
var x0 = 0;
|
|
var x1 = 30;
|
|
var x3 = 90;
|
|
var blockHeight = api.size([0, 1])[1] - 26;
|
|
|
|
return {
|
|
type: 'group',
|
|
position: [
|
|
10,
|
|
api.coord([0, api.value(0)])[1]
|
|
// blockHeight
|
|
],
|
|
children: [{
|
|
type: 'path',
|
|
shape: {
|
|
d: 'M0,0 L0,-20 L30,-20 C40,-20 40,-1 50,-1 L90,-1 L90,0 Z',
|
|
x: 0,
|
|
y: -blockHeight,
|
|
width: 90,
|
|
height: blockHeight,
|
|
layout: 'cover'
|
|
},
|
|
style: {
|
|
fill: '#03b292'
|
|
}
|
|
}, {
|
|
type: 'text',
|
|
style: {
|
|
x: (x0 + x1) / 2,
|
|
y: -blockHeight / 2,
|
|
text: api.value(1),
|
|
textFill: '#fff',
|
|
textAlign: 'center',
|
|
textVerticalAlign: 'middle'
|
|
}
|
|
}]
|
|
};
|
|
}
|
|
|
|
var chart = testHelper.create(echarts, 'main-SVG-Path', {
|
|
title: [
|
|
'Test SVG path data auto fit to rect: ',
|
|
'the y axis label (made by custom series) should be center',
|
|
],
|
|
option: option
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|