mirror of https://github.com/ColorlibHQ/gentelella
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
560 lines
19 KiB
560 lines
19 KiB
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="esl.js"></script>
|
|
<script src="config.js"></script>
|
|
<link rel="stylesheet" href="reset.css">
|
|
<script src="lib/jquery.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.main {
|
|
height: 400px;
|
|
margin: 10px 20px 80px 20px;
|
|
}
|
|
.label {
|
|
background: #ddd;
|
|
line-height: 30px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<div class="label">Color Alpha in scatter (using outOfRange as 'selected')</div>
|
|
<div class="main" id="main1"></div>
|
|
<div class="label">Opacity in bar (label color specified)</div>
|
|
<div class="main" id="main2"></div>
|
|
<div class="label">Opacity in scatter (label color specified)</div>
|
|
<div class="main" id="main3"></div>
|
|
<div class="label">Opacity in graph (label color specified)</div>
|
|
<div class="main" id="main4"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ALPHA SCATTER -->
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/scatter',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/visualMapPiecewise'
|
|
], function (echarts) {
|
|
|
|
var chart = echarts.init(document.getElementById('main1'), null, {
|
|
renderer: 'canvas'
|
|
});
|
|
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
var symbolCount = 6;
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
data1.push([
|
|
Math.random() * 5,
|
|
Math.random() * 4,
|
|
Math.random() * 20,
|
|
Math.round(Math.random() * (symbolCount - 1))
|
|
]);
|
|
data2.push([
|
|
Math.random() * 10,
|
|
Math.random() * 5,
|
|
Math.random() * 20,
|
|
Math.round(Math.random() * (symbolCount - 1))
|
|
]);
|
|
data3.push([
|
|
Math.random() * 15,
|
|
Math.random() * 10,
|
|
Math.random() * 20,
|
|
Math.round(Math.random() * (symbolCount - 1))
|
|
]);
|
|
}
|
|
|
|
chart.setOption({
|
|
color: ['#bcd3bb', '#928ea8', '#edc1a5'],
|
|
legend: {
|
|
data: ['scatter', 'scatter2', 'scatter3']
|
|
},
|
|
grid: {
|
|
top: 50,
|
|
bottom: 30
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
visualMap: [
|
|
{
|
|
type: 'piecewise',
|
|
splitNumber: 6,
|
|
left: 'right',
|
|
bottom: 30,
|
|
// selectedMode: 'single',
|
|
selectedMode: 'multiple',
|
|
selected: {
|
|
0: false, 1: false, 2: false, 3: false, 4: false, 5: false
|
|
},
|
|
dimension: 'z',
|
|
min: 0,
|
|
max: 24,
|
|
precision: 0,
|
|
inRange: { // visual for short cut
|
|
color: ['rgb(20,1,0)'],
|
|
symbolSize: [40, 5]
|
|
},
|
|
outOfRange: {
|
|
colorAlpha: [0.3, 1],
|
|
symbolSize: [40, 5]
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'scatter',
|
|
type: 'scatter',
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 0.8,
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
},
|
|
data: data1
|
|
},
|
|
{
|
|
name: 'scatter2',
|
|
type: 'scatter',
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 0.8,
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
},
|
|
data: data2
|
|
},
|
|
{
|
|
name: 'scatter3',
|
|
type: 'scatter',
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 0.8,
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
},
|
|
data: data3
|
|
}
|
|
]
|
|
});
|
|
|
|
window.addEventListener('resize', function () {
|
|
chart.resize();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- OPACITY BAR -->
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/bar',
|
|
'echarts/chart/line',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/toolbox',
|
|
'echarts/component/visualMap',
|
|
'zrender/vml/vml'
|
|
], function (echarts) {
|
|
|
|
var chart = echarts.init(document.getElementById('main2'));
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
var data4 = [];
|
|
|
|
var DATA_MAX = 5.5;
|
|
|
|
for (var i = 0; i < 10; i++) {
|
|
xAxisData.push('类目' + i);
|
|
data1.push((Math.random() * DATA_MAX).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 labelStyle = {
|
|
normal: {
|
|
show: true,
|
|
position: 'outside',
|
|
textStyle: {
|
|
color: '#333'
|
|
}
|
|
}
|
|
};
|
|
|
|
var itemStyle = {
|
|
normal: {
|
|
},
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowColor: 'rgba(0,0,0,0.5)'
|
|
}
|
|
};
|
|
|
|
chart.setOption({
|
|
legend: {
|
|
data: ['bar', 'bar2', 'bar3'],
|
|
align: 'left'
|
|
},
|
|
toolbox: {
|
|
// y: 'bottom',
|
|
feature: {
|
|
magicType: {
|
|
type: ['line', 'bar', 'stack', 'tiled']
|
|
},
|
|
dataView: {}
|
|
}
|
|
},
|
|
tooltip: {},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
axisLine: {
|
|
onZero: true
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
splitArea: {
|
|
show: false
|
|
},
|
|
max: 6,
|
|
min: -2
|
|
},
|
|
visualMap: [
|
|
{
|
|
type: 'continuous',
|
|
right: 0,
|
|
itemWidth: 15,
|
|
bottom: 30,
|
|
dimension: 1,
|
|
calculable: true,
|
|
min: -2,
|
|
max: DATA_MAX,
|
|
precision: 2,
|
|
inRange: {
|
|
opacity: [1, 1] // Using opacity when label color specified
|
|
},
|
|
controller: {
|
|
inRange: {
|
|
color: ['#888']
|
|
},
|
|
outOfRange: {
|
|
color: ['#888']
|
|
}
|
|
},
|
|
outOfRange: {
|
|
opacity: [0.2, 0.2] // Using opacity when label color specified
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'bar',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
itemStyle: itemStyle,
|
|
label: labelStyle,
|
|
data: data1
|
|
},
|
|
{
|
|
name: 'bar2',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
itemStyle: itemStyle,
|
|
label: labelStyle,
|
|
data: data2
|
|
},
|
|
{
|
|
name: 'bar3',
|
|
type: 'bar',
|
|
itemStyle: itemStyle,
|
|
label: labelStyle,
|
|
data: data3
|
|
}
|
|
]
|
|
});
|
|
|
|
window.addEventListener('resize', function () {
|
|
chart.resize();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- OPACITY SCATTER -->
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/scatter',
|
|
'echarts/component/legend',
|
|
'echarts/component/grid',
|
|
'echarts/component/visualMapPiecewise'
|
|
], function (echarts) {
|
|
|
|
var chart = echarts.init(document.getElementById('main3'), null, {
|
|
renderer: 'canvas'
|
|
});
|
|
|
|
var data1 = [];
|
|
|
|
var symbolCount = 6;
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
data1.push([
|
|
Math.random() * 5,
|
|
Math.random() * 4,
|
|
Math.random() * 20,
|
|
Math.round(Math.random() * (symbolCount - 1))
|
|
]);
|
|
}
|
|
|
|
chart.setOption({
|
|
legend: {
|
|
data: ['scatter', 'scatter2', 'scatter3']
|
|
},
|
|
grid: {
|
|
top: 50,
|
|
bottom: 30
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
visualMap: [
|
|
{
|
|
type: 'piecewise',
|
|
splitNumber: 6,
|
|
left: 'right',
|
|
bottom: 30,
|
|
selectedMode: 'multiple',
|
|
dimension: 'z',
|
|
min: 0,
|
|
max: 24,
|
|
precision: 0,
|
|
inRange: { // visual for short cut
|
|
opacity: [1, 1],
|
|
symbolSize: [15, 50]
|
|
},
|
|
outOfRange: {
|
|
opacity: [0.3, 0.3],
|
|
symbolSize: [15, 50]
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'scatter',
|
|
type: 'scatter',
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 0.8,
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'inside',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
data: data1
|
|
}
|
|
]
|
|
});
|
|
|
|
window.addEventListener('resize', function () {
|
|
chart.resize();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- OPACITY GRAPH -->
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts',
|
|
|
|
'extension/dataTool/gexf',
|
|
|
|
'echarts/chart/graph',
|
|
|
|
'echarts/component/title',
|
|
'echarts/component/legend',
|
|
'echarts/component/geo',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/visualMap',
|
|
|
|
'theme/vintage'
|
|
], function (echarts, gexf) {
|
|
|
|
var chart = echarts.init(document.getElementById('main4'));
|
|
|
|
$.get('./data/les-miserables.gexf', function (xml) {
|
|
var graph = gexf.parse(xml);
|
|
var categories = [];
|
|
for (var i = 0; i < 9; i++) {
|
|
categories[i] = {
|
|
name: '类目' + i
|
|
};
|
|
}
|
|
graph.nodes.forEach(function (node) {
|
|
delete node.itemStyle;
|
|
node.value = node.symbolSize;
|
|
node.label = {
|
|
normal: {
|
|
show: node.symbolSize > 30
|
|
}
|
|
};
|
|
node.category = node.attributes['modularity_class'];
|
|
});
|
|
graph.links.forEach(function (link) {
|
|
delete link.lineStyle;
|
|
});
|
|
var option = {
|
|
tooltip: {},
|
|
legend: [{
|
|
// selectedMode: 'single',
|
|
data: categories.map(function (a) {
|
|
return a.name;
|
|
})
|
|
}],
|
|
visualMap: {
|
|
min: 0,
|
|
max: 100,
|
|
dimension: 0,
|
|
calculable: true,
|
|
inRange: {
|
|
opacity: [1, 1],
|
|
symbolSize: [10, 100]
|
|
},
|
|
outOfRange: {
|
|
opacity: [0.2, 0.2],
|
|
symbolSize: [10, 100]
|
|
}
|
|
},
|
|
animationDurationUpdate: 1500,
|
|
animationEasingUpdate: 'quinticInOut',
|
|
series : [
|
|
{
|
|
name: 'Les Miserables',
|
|
type: 'graph',
|
|
layout: 'none',
|
|
data: graph.nodes,
|
|
links: graph.links,
|
|
categories: categories,
|
|
roam: true,
|
|
label: {
|
|
normal: {
|
|
textStyle: {
|
|
color: '#333'
|
|
},
|
|
position: 'right',
|
|
formatter: '{b}'
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
curveness: 0.3
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
chart.setOption(option);
|
|
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
</html> |