896 lines
45 KiB
HTML
896 lines
45 KiB
HTML
|
<!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">
|
|||
|
|
<script src="lib/esl.js"></script>
|
|||
|
|
<script src="lib/config.js"></script>
|
|||
|
|
<script src="lib/jquery.min.js"></script>
|
|||
|
|
<script src="lib/facePrint.js"></script>
|
|||
|
|
<script src="lib/draggable.js"></script>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|||
|
|
<link rel="stylesheet" href="lib/reset.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
}
|
|||
|
|
.block {
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 200px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
background: #eee;
|
|||
|
|
}
|
|||
|
|
.chart {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 400px;
|
|||
|
|
float: left;
|
|||
|
|
margin-left: 20px;
|
|||
|
|
}
|
|||
|
|
textarea {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
float: right;
|
|||
|
|
width: 140px;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
h3 {
|
|||
|
|
font-size: 16px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function getMain(id) {
|
|||
|
|
var options = [];
|
|||
|
|
$('#' + id + ' textarea').each(function (idx, textarea) {
|
|||
|
|
options.push((new Function('return (' + $(textarea).val() + ')'))());
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
dom: $('#' + id + ' .chart')[0],
|
|||
|
|
option: options[0],
|
|||
|
|
options: options,
|
|||
|
|
buttons: $('#' + id + ' button')
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var imageURI = 'data:image/jpeg;base64,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
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3>Test group setOption(getOption) mapping.</h3>
|
|||
|
|
<h3>Test left/right/top/bottom in group.</h3>
|
|||
|
|
<h3>Test resize.</h3>
|
|||
|
|
<div class="block" id="main4" style="height: 300px">
|
|||
|
|
<div class="chart"></div>
|
|||
|
|
<textarea>
|
|||
|
|
{
|
|||
|
|
backgroundColor: '#bba',
|
|||
|
|
graphic: [{
|
|||
|
|
id: 'img',
|
|||
|
|
type: 'image',
|
|||
|
|
right: 20,
|
|||
|
|
top: 'center',
|
|||
|
|
style: {
|
|||
|
|
image: 'http://echarts.baidu.com/images/favicon.png',
|
|||
|
|
width: 50,
|
|||
|
|
height: 50,
|
|||
|
|
opacity: 0.5
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
id: 'uriimg',
|
|||
|
|
type: 'image',
|
|||
|
|
origin: [20, 20],
|
|||
|
|
left: 10,
|
|||
|
|
top: 10,
|
|||
|
|
style: {
|
|||
|
|
image: imageURI,
|
|||
|
|
width: 80,
|
|||
|
|
height: 80,
|
|||
|
|
opacity: 0.5
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
type: 'text',
|
|||
|
|
bottom: 0,
|
|||
|
|
right: 0,
|
|||
|
|
rotation: Math.PI / 4,
|
|||
|
|
style: {
|
|||
|
|
font: '24px Microsoft YaHei',
|
|||
|
|
text: '全屏右下角'
|
|||
|
|
},
|
|||
|
|
z: 100
|
|||
|
|
}, {
|
|||
|
|
type: 'text',
|
|||
|
|
bottom: 0,
|
|||
|
|
left: 'center',
|
|||
|
|
style: {
|
|||
|
|
font: '18px sans-serif',
|
|||
|
|
text: '全屏最下中间\n这是多行文字\n这是第三行'
|
|||
|
|
},
|
|||
|
|
z: 100
|
|||
|
|
}, {
|
|||
|
|
type: 'group',
|
|||
|
|
id: 'ggggg',
|
|||
|
|
right: 0,
|
|||
|
|
top: 0,
|
|||
|
|
bounding: 'raw',
|
|||
|
|
children: [{
|
|||
|
|
type: 'rect',
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'middle',
|
|||
|
|
shape: {
|
|||
|
|
width: 80,
|
|||
|
|
height: 60
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
fill: 'green'
|
|||
|
|
},
|
|||
|
|
z: 99
|
|||
|
|
}, {
|
|||
|
|
type: 'text',
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'middle',
|
|||
|
|
style: {
|
|||
|
|
font: '14px Microsoft YaHei',
|
|||
|
|
text: '居中定位\n文字居中\n应超出屏幕'
|
|||
|
|
},
|
|||
|
|
z: 100
|
|||
|
|
}]
|
|||
|
|
}, {
|
|||
|
|
type: 'group',
|
|||
|
|
id: 'gr',
|
|||
|
|
width: 230,
|
|||
|
|
height: 110,
|
|||
|
|
position: [70, 90],
|
|||
|
|
children: [{
|
|||
|
|
type: 'rect',
|
|||
|
|
shape: {
|
|||
|
|
width: 230,
|
|||
|
|
height: 80
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: 'red',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 2
|
|||
|
|
},
|
|||
|
|
z: 100
|
|||
|
|
}, {
|
|||
|
|
type: 'rect',
|
|||
|
|
shape: {
|
|||
|
|
width: 60,
|
|||
|
|
height: 110
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: 'red',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 2
|
|||
|
|
},
|
|||
|
|
z: 100
|
|||
|
|
}, {
|
|||
|
|
id: 'grouptext',
|
|||
|
|
type: 'text',
|
|||
|
|
bottom: 0,
|
|||
|
|
right: 0,
|
|||
|
|
rotation: 0.5,
|
|||
|
|
style: {
|
|||
|
|
font: '14px Microsoft YaHei',
|
|||
|
|
text: 'group最右下角'
|
|||
|
|
},
|
|||
|
|
z: 100
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
</textarea>
|
|||
|
|
<textarea>
|
|||
|
|
{
|
|||
|
|
graphic: [{
|
|||
|
|
id: 'img',
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'middle'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
</textarea>
|
|||
|
|
<script>
|
|||
|
|
require([
|
|||
|
|
'echarts'
|
|||
|
|
// 'echarts/chart/line',
|
|||
|
|
// 'echarts/component/graphic',
|
|||
|
|
// 'echarts/component/grid',
|
|||
|
|
// 'echarts/component/legend',
|
|||
|
|
// 'echarts/component/tooltip'
|
|||
|
|
], function (echarts) {
|
|||
|
|
var main = getMain('main4');
|
|||
|
|
if (!main.dom) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var chart = echarts.init(main.dom);
|
|||
|
|
draggable.init(main.dom, chart, {throttle: 70});
|
|||
|
|
|
|||
|
|
chart.setOption(main.option);
|
|||
|
|
|
|||
|
|
setTimeout(function () {
|
|||
|
|
chart.setOption(chart.getOption());
|
|||
|
|
|
|||
|
|
setTimeout(function () {
|
|||
|
|
chart.setOption(main.options[1]);
|
|||
|
|
}, 1200);
|
|||
|
|
|
|||
|
|
}, 1200);
|
|||
|
|
|
|||
|
|
var rotation = 0;
|
|||
|
|
setInterval(function () {
|
|||
|
|
rotation += Math.PI / 360;
|
|||
|
|
chart.setOption({
|
|||
|
|
graphic: [{
|
|||
|
|
id: 'img',
|
|||
|
|
rotation: rotation
|
|||
|
|
}, {
|
|||
|
|
id: 'uriimg',
|
|||
|
|
rotation: rotation
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
}, 17);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3>bounding</h3>
|
|||
|
|
<div class="block" id="main5" style="height: 400px">
|
|||
|
|
<div class="chart"></div>
|
|||
|
|
<textarea>
|
|||
|
|
{
|
|||
|
|
backgroundColor: 'rgba(0,0,255,0.08)',
|
|||
|
|
legend: {
|
|||
|
|
data:['高度(km)与气温(°C)变化关系']
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
|
|||
|
|
},
|
|||
|
|
graphic: [{
|
|||
|
|
type: 'image',
|
|||
|
|
id: 'img',
|
|||
|
|
z: -10,
|
|||
|
|
right: 0,
|
|||
|
|
top: 0,
|
|||
|
|
bounding: 'raw',
|
|||
|
|
origin: [75, 75],
|
|||
|
|
style: {
|
|||
|
|
fill: '#000',
|
|||
|
|
image: 'http://echarts.baidu.com/images/favicon.png',
|
|||
|
|
width: 150,
|
|||
|
|
height: 150,
|
|||
|
|
opacity: 0.4
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
type: 'group',
|
|||
|
|
id: 'rectgroup1',
|
|||
|
|
bottom: 0,
|
|||
|
|
right: 0,
|
|||
|
|
bounding: 'raw',
|
|||
|
|
children: [{
|
|||
|
|
type: 'rect',
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'center',
|
|||
|
|
shape: {
|
|||
|
|
width: 20,
|
|||
|
|
height: 80
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: 'green',
|
|||
|
|
fill: 'transparent'
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
type: 'rect',
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'center',
|
|||
|
|
shape: {
|
|||
|
|
width: 80,
|
|||
|
|
height: 20
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: 'green',
|
|||
|
|
fill: 'transparent'
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}, {
|
|||
|
|
type: 'rect',
|
|||
|
|
id: 'rect2',
|
|||
|
|
bottom: 0,
|
|||
|
|
right: 'center',
|
|||
|
|
shape: {
|
|||
|
|
width: 50,
|
|||
|
|
height: 80
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: 'green',
|
|||
|
|
fill: 'transparent'
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
type: 'group',
|
|||
|
|
id: 'textGroup1',
|
|||
|
|
left: '10%',
|
|||
|
|
top: 'center',
|
|||
|
|
scale: [1, .5],
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
type: 'rect',
|
|||
|
|
z: 100,
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'center',
|
|||
|
|
shape: {
|
|||
|
|
width: 170,
|
|||
|
|
height: 70
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
fill: '#fff',
|
|||
|
|
stroke: '#999',
|
|||
|
|
lineWidth: 2,
|
|||
|
|
shadowBlur: 8,
|
|||
|
|
shadowOffsetX: 3,
|
|||
|
|
shadowOffsetY: 3,
|
|||
|
|
shadowColor: 'rgba(0,0,0,0.3)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'text',
|
|||
|
|
z: 100,
|
|||
|
|
top: 'middle',
|
|||
|
|
left: 'center',
|
|||
|
|
style: {
|
|||
|
|
text: [
|
|||
|
|
'横轴表示温度，单位是°C',
|
|||
|
|
'纵轴表示高度，单位是km',
|
|||
|
|
'右上角有一个图片做的水印'
|
|||
|
|
].join('\n'),
|
|||
|
|
font: '12px Microsoft YaHei'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '高度(km)与气温(°C)变化关系',
|
|||
|
|
type: 'line',
|
|||
|
|
data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
</textarea>
|
|||
|
|
<script>
|
|||
|
|
require([
|
|||
|
|
'echarts'
|
|||
|
|
// 'echarts/chart/line',
|
|||
|
|
// 'echarts/component/graphic',
|
|||
|
|
// 'echarts/component/grid',
|
|||
|
|
// 'echarts/component/legend',
|
|||
|
|
// 'echarts/component/tooltip'
|
|||
|
|
], function (echarts) {
|
|||
|
|
var main = getMain('main5');
|
|||
|
|
if (!main.dom) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var chart = echarts.init(main.dom);
|
|||
|
|
draggable.init(main.dom, chart, {throttle: 70});
|
|||
|
|
chart.setOption(main.option);
|
|||
|
|
|
|||
|
|
var rotation = 0;
|
|||
|
|
setInterval(function () {
|
|||
|
|
rotation += Math.PI / 60;
|
|||
|
|
chart.setOption({
|
|||
|
|
graphic: [{
|
|||
|
|
id: 'img',
|
|||
|
|
bounding: 'raw',
|
|||
|
|
origin: [75, 75],
|
|||
|
|
rotation: rotation
|
|||
|
|
}, {
|
|||
|
|
id: 'rectgroup1',
|
|||
|
|
rotation: rotation
|
|||
|
|
}, {
|
|||
|
|
id: 'rect2',
|
|||
|
|
rotation: rotation
|
|||
|
|
}, {
|
|||
|
|
id: 'textGroup1',
|
|||
|
|
rotation: rotation
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
}, 17);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3>replace</h3>
|
|||
|
|
<div class="block" id="main0">
|
|||
|
|
<div class="chart"></div>
|
|||
|
|
<textarea>
|
|||
|
|
{
|
|||
|
|
graphic: {
|
|||
|
|
type: 'circle',
|
|||
|
|
shape: {
|
|||
|
|
cx: 50,
|
|||
|
|
cy: 50,
|
|||
|
|
r: 20,
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
fill: 'green',
|
|||
|
|
stroke: 'pink',
|
|||
|
|
lineWidth: 3
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</textarea>
|
|||
|
|
<textarea>
|
|||
|
|
{
|
|||
|
|
graphic: {
|
|||
|
|
type: 'rect',
|
|||
|
|
$action: 'replace',
|
|||
|
|
shape: {
|
|||
|
|
x: 50,
|
|||
|
|
y: 50,
|
|||
|
|
width: 20,
|
|||
|
|
height: 60
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
fill: 'green',
|
|||
|
|
stroke: 'pink',
|
|||
|
|
lineWidth: 3
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</textarea>
|
|||
|
|
<script>
|
|||
|
|
require([
|
|||
|
|
'echarts'
|
|||
|
|
// 'echarts/chart/line',
|
|||
|
|
// 'echarts/component/graphic',
|
|||
|
|
// 'echarts/component/grid',
|
|||
|
|
// 'echarts/component/legend',
|
|||
|
|
// 'echarts/component/tooltip'
|
|||
|
|
], function (echarts) {
|
|||
|
|
var main = getMain('main0');
|
|||
|
|
if (!main.dom) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var chart = echarts.init(main.dom);
|
|||
|
|
chart.setOption(main.option);
|
|||
|
|
setTimeout(function () {
|
|||
|
|
chart.setOption(chart.getOption());
|
|||
|
|
|
|||
|
|
setTimeout(function () {
|
|||
|
|
chart.setOption(main.options[1]);
|
|||
|
|
}, 1200);
|
|||
|
|
|
|||
|
|
}, 800);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="block" id="mainz">
|
|||
|
|
<div class="chart"></div>
|
|||
|
|
只有第一个 graphic 会生效。
|
|||
|
|
<textarea>
|
|||
|
|
{
|
|||
|
|
graphic: [{
|
|||
|
|
elements: [{
|
|||
|
|
type: 'circle',
|
|||
|
|
shape: {
|
|||
|
|
cx: 50,
|
|||
|
|
cy: 50,
|
|||
|
|
r: 20,
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
type: 'circle',
|
|||
|
|
shape: {
|
|||
|
|
cx: 150,
|
|||
|
|
cy: 150,
|
|||
|
|
r: 20,
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}, {
|
|||
|
|
elements: [{
|
|||
|
|
type: 'circle',
|
|||
|
|
shape: {
|
|||
|
|
cx: 100,
|
|||
|
|
cy: 100,
|
|||
|
|
r: 20,
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
</textarea>
|
|||
|
|
<script>
|
|||
|
|
require([
|
|||
|
|
'echarts'
|
|||
|
|
// 'echarts/chart/line',
|
|||
|
|
// 'echarts/component/graphic',
|
|||
|
|
// 'echarts/component/grid',
|
|||
|
|
// 'echarts/component/legend',
|
|||
|
|
// 'echarts/component/tooltip'
|
|||
|
|
], function (echarts) {
|
|||
|
|
var main = getMain('mainz');
|
|||
|
|
if (!main.dom) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var chart = echarts.init(main.dom);
|
|||
|
|
chart.setOption(main.option);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="block" id="main1">
|
|||
|
|
<div class="chart"></div>
|
|||
|
|
<textarea>
|
|||
|
|
{
|
|||
|
|
graphic: [{
|
|||
|
|
type: 'rect',
|
|||
|
|
shape: {
|
|||
|
|
x: 50,
|
|||
|
|
y: 50,
|
|||
|
|
width: 20,
|
|||
|
|
height: 80
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
fill: 'green',
|
|||
|
|
stroke: 'pink',
|
|||
|
|
lineWidth: 3
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
type: 'ring',
|
|||
|
|
shape: {
|
|||
|
|
cx: 150,
|
|||
|
|
cy: 150,
|
|||
|
|
r: 20,
|
|||
|
|
r0: 5
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
fill: 'green',
|
|||
|
|
stroke: 'pink',
|
|||
|
|
lineWidth: 3
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
</textarea>
|
|||
|
|
<script>
|
|||
|
|
require([
|
|||
|
|
'echarts'
|
|||
|
|
// 'echarts/chart/line',
|
|||
|
|
// 'echarts/component/graphic',
|
|||
|
|
// 'echarts/component/grid',
|
|||
|
|
// 'echarts/component/legend',
|
|||
|
|
// 'echarts/component/tooltip'
|
|||
|
|
], function (echarts) {
|
|||
|
|
var main = getMain('main1');
|
|||
|
|
if (!main.dom) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var chart = echarts.init(main.dom);
|
|||
|
|
chart.setOption(main.option);
|
|||
|
|
setTimeout(function () {
|
|||
|
|
chart.setOption(chart.getOption());
|
|||
|
|
}, 800);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="block" id="main2">
|
|||
|
|
<div class="chart"></div>
|
|||
|
|
<textarea>
|
|||
|
|
{
|
|||
|
|
graphic: [{
|
|||
|
|
type: 'text',
|
|||
|
|
style: {
|
|||
|
|
text: 'asdf哈呵',
|
|||
|
|
font: '40px sans-serif',
|
|||
|
|
x: 100,
|
|||
|
|
y: 40
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
id: 'rrr',
|
|||
|
|
type: 'ring',
|
|||
|
|
shape: {
|
|||
|
|
cx: 50,
|
|||
|
|
cy: 150,
|
|||
|
|
r: 20,
|
|||
|
|
r0: 5
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
id: 'xxx',
|
|||
|
|
type: 'rect',
|
|||
|
|
shape: {
|
|||
|
|
x: 250,
|
|||
|
|
y: 50,
|
|||
|
|
width: 20,
|
|||
|
|
height: 80
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
</textarea>
|
|||
|
|
<button>delete by $action</button>
|
|||
|
|
<button>delete by setOption({...}, true)</button>
|
|||
|
|
<button>delete by clear</button>
|
|||
|
|
<script>
|
|||
|
|
require([
|
|||
|
|
'echarts'
|
|||
|
|
// 'echarts/chart/line',
|
|||
|
|
// 'echarts/component/graphic',
|
|||
|
|
// 'echarts/component/grid',
|
|||
|
|
// 'echarts/component/legend',
|
|||
|
|
// 'echarts/component/tooltip'
|
|||
|
|
], function (echarts) {
|
|||
|
|
var main = getMain('main2');
|
|||
|
|
if (!main.dom) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var chart = echarts.init(main.dom);
|
|||
|
|
chart.setOption(main.option);
|
|||
|
|
|
|||
|
|
$(main.buttons[0]).on('click', function () {
|
|||
|
|
chart.setOption({
|
|||
|
|
graphic: {
|
|||
|
|
id: 'rrr',
|
|||
|
|
$action: 'remove'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
$(main.buttons[1]).on('click', function () {
|
|||
|
|
chart.setOption({
|
|||
|
|
graphic: {
|
|||
|
|
type: 'rect',
|
|||
|
|
shape: {
|
|||
|
|
y: 100,
|
|||
|
|
x: 250,
|
|||
|
|
width: 40,
|
|||
|
|
height: 140
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
fill: 'blue'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, true);
|
|||
|
|
});
|
|||
|
|
$(main.buttons[2]).on('click', function () {
|
|||
|
|
chart.clear();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="block" id="main3">
|
|||
|
|
<div class="chart"></div>
|
|||
|
|
<textarea>
|
|||
|
|
{
|
|||
|
|
xAxis: {
|
|||
|
|
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
|||
|
|
},
|
|||
|
|
yAxis: {},
|
|||
|
|
series: [{
|
|||
|
|
type: 'line',
|
|||
|
|
data:[220, 182, 191, 234, 290, 330, 310]
|
|||
|
|
}],
|
|||
|
|
graphic: [{
|
|||
|
|
type: 'text',
|
|||
|
|
style: {
|
|||
|
|
text: 'asdf哈呵',
|
|||
|
|
font: '40px sans-serif',
|
|||
|
|
x: 100,
|
|||
|
|
y: 40
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
id: 'rrr',
|
|||
|
|
type: 'ring',
|
|||
|
|
shape: {
|
|||
|
|
cx: 50,
|
|||
|
|
cy: 150,
|
|||
|
|
r: 20,
|
|||
|
|
r0: 5
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
type: 'rect',
|
|||
|
|
shape: {
|
|||
|
|
x: 250,
|
|||
|
|
y: 50,
|
|||
|
|
width: 20,
|
|||
|
|
height: 80
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
type: 'group',
|
|||
|
|
children: [{
|
|||
|
|
id: 'ing',
|
|||
|
|
type: 'rect',
|
|||
|
|
shape: {
|
|||
|
|
x: 30,
|
|||
|
|
y: 30,
|
|||
|
|
width: 10,
|
|||
|
|
height: 20
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
fill: 'yellow'
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
</textarea>
|
|||
|
|
<textarea>
|
|||
|
|
{
|
|||
|
|
graphic: [{
|
|||
|
|
style: {
|
|||
|
|
font: '60px sans-serif',
|
|||
|
|
x: 200
|
|||
|
|
},
|
|||
|
|
z: 222
|
|||
|
|
}, {
|
|||
|
|
shape: {
|
|||
|
|
cx: 150
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
fill: 'green'
|
|||
|
|
},
|
|||
|
|
z: 222
|
|||
|
|
}, {
|
|||
|
|
shape: {
|
|||
|
|
x: 350
|
|||
|
|
},
|
|||
|
|
z: 222
|
|||
|
|
}, {
|
|||
|
|
id: 'ing',
|
|||
|
|
style: {
|
|||
|
|
fill: 'pink'
|
|||
|
|
},
|
|||
|
|
z: 222
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
</textarea>
|
|||
|
|
<script>
|
|||
|
|
require([
|
|||
|
|
'echarts'
|
|||
|
|
// 'echarts/chart/line',
|
|||
|
|
// 'echarts/component/graphic',
|
|||
|
|
// 'echarts/component/grid',
|
|||
|
|
// 'echarts/component/legend',
|
|||
|
|
// 'echarts/component/tooltip'
|
|||
|
|
], function (echarts) {
|
|||
|
|
var main = getMain('main3');
|
|||
|
|
if (!main.dom) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var chart = echarts.init(main.dom);
|
|||
|
|
chart.setOption(main.option);
|
|||
|
|
setTimeout(function () {
|
|||
|
|
chart.setOption(main.options[1]);
|
|||
|
|
}, 1200);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|