slides/arch-brief/asset/ec-demo/workflow-basic-mask.html (80 lines of code) (raw):
<html>
<head>
<meta charset="utf-8">
<script src="../common/echarts.min.js"></script>
<script src="../common/jquery.min.js"></script>
<link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<style>
</style>
<div id="main"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
function makeStrokedRect(opt, width, height, text, textPosition) {
var base = {
type: 'rect',
shape: {
width: width,
height: height
},
style: {
text: text,
textPosition: textPosition,
textFill: 'yellow',
font: '20px Arial',
fill: 'transparent',
stroke: 'yellow',
lineWidth: 2
}
};
return echarts.util.extend(base, opt);
}
function makeFilledRect(opt, width, height, text, textPosition) {
var base = {
type: 'rect',
shape: {
width: width,
height: height
},
style: {
text: text,
textPosition: textPosition,
textFill: 'yellow',
font: '20px Arial',
fill: 'rgba(221,221,0,0.15)',
stroke: 'rgba(221,221,0,0.3)',
lineWidth: 2
}
};
return echarts.util.extend(base, opt);
}
function makeText(opt, text) {
var base = {
type: 'text',
style: {
text: text,
fill: 'yellow',
font: '20px Arial'
}
};
return echarts.util.extend(base, opt);
}
myChart.setOption({
backgroundColor: 'rgba(0,0,0,0.6)',
series: [],
graphic: [
makeStrokedRect({left: 'center', top: 5}, 200, 30, 'legend', 'left'),
makeStrokedRect({left: 40, top: 30}, 50, 160, 'yAxis', 'top'),
makeStrokedRect({left: 90, bottom: 50}, 600, 30, 'xAxis', 'right'),
makeStrokedRect({left: 90, bottom: 10}, 600, 30, 'dataZoom', 'right'),
makeStrokedRect({right: 10, top: 5}, 100, 30, 'toolbox', 'left'),
makeStrokedRect({right: 10, top: 'middle'}, 90, 140, 'visualMap', 'top'),
makeFilledRect({left: 80, top: 50}, 620, 170, 'grid (cartesian)', 'insideTopRight'),
makeText({left: 'center', top: 110}, 'series I'),
makeText({left: 'center', top: 140}, 'series II')
]
});
</script>
</body>
</html>