di-echarts
Version:
Apache ECharts is a powerful, interactive charting and data visualization library for browser
820 lines (732 loc) • 26.6 kB
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/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>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<style>
.chart {
position: relative;
height: 500px;
max-width: 1000px;
margin: 0 auto;
}
h2 {
text-align: center;
font-size: 16px;
line-height: 40px;
font-weight: normal;
background: #078302;
color: #eee;
}
</style>
<h2>scatter</h2>
<div class="chart" id="main1"></div>
<h2>Test: (1) click zoom btn (2) select (3) click zoom btn, expect: not change</h2>
<div class="chart" id="main-test-y-range"></div>
<h2>Multiple Y axis (default)</h2>
<div class="chart" id="main-multiple-y-axis-default"></div>
<h2>Specify Y axis (yAxisIndex: [1, 2, 4], xAxisIndex: false, should be 'lineY' brush)</h2>
<div class="chart" id="main-specify-y-axis"></div>
<h2>Specify Y axis (yAxisIndex: false, should be 'lineX' brush)</h2>
<div class="chart" id="main-specify-x-axis"></div>
<div id="main0"></div>
<div id="main-refer-by-axis-id"></div>
<script>
var lastChart;
var globalColor = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
function makeChart(id, option, cb) {
require([
'echarts'
], function (echarts, globalDefault) {
var main = document.getElementById(id);
if (main) {
var chartMain = document.createElement('div');
chartMain.style.cssText = 'height:100%';
main.appendChild(chartMain);
var chart = lastChart = echarts.init(chartMain);
if (typeof option === 'function') {
option = option(echarts, globalDefault);
}
chart.setOption(option);
window.addEventListener('resize', chart.resize);
cb && cb(echarts, chart);
}
});
}
</script>
<script>
var data1 = [];
var data2 = [];
var data3 = [];
function random(max) {
return (Math.random() * max).toFixed(3);
};
for (var i = 0; i < 100; i++) {
data1.push([random(15), random(10), random(1)]);
// data1.push([i, 10, i]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
}
makeChart('main1', {
legend: {
data: ['scatter', 'scatter2', 'scatter3']
},
animationDuration: 1000,
animationDurationUpdate: 1000,
toolbox: {
feature: {
dataView: {},
dataZoom: {
show: true,
yAxisIndex: null,
// brushStyle: {
// borderWidth: 2,
// color: 'blue',
// opacity: 0.1,
// borderColor: '#596A76',
// }
},
restore: {show: true},
saveAsImage: {}
}
},
tooltip: {
},
xAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
dataZoom: [
{
show: true,
xAxisIndex: [0],
start: 10,
end: 70
},
{
show: true,
yAxisIndex: [0],
start: 0,
end: 20
},
{
type: 'inside',
xAxisIndex: [0],
start: 10,
end: 70
},
{
type: 'inside',
yAxisIndex: [0],
start: 0,
end: 20
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}
]
});
</script>
<script>
makeChart('main-test-y-range', function (echarts, globalDefault) {
return {
tooltip: {},
toolbox: {
feature: {
dataZoom: {},
restore: {}
}
},
legend: {
data: ['A1', 'A2', 'A3', 'B1', 'B2']
},
grid: [{
left: 40,
width: 300,
}],
xAxis: [{
data: ['z', 'y', 'x', 'w', 'v', 'u']
}],
yAxis: [{
type: 'value',
position: 'left',
axisLine: {
lineStyle: {
color: globalColor[0]
}
}
}, {
type: 'value',
position: 'right',
axisLine: {
lineStyle: {
color: globalColor[1]
}
}
}, {
type: 'value',
position: 'right',
offset: 80,
axisLine: {
lineStyle: {
color: globalColor[2]
}
}
}],
dataZoom: [{
type: 'slider',
height: 20
}, {
type: 'slider',
yAxisIndex: 1,
orient: 'vertical',
left: 365,
width: 20
}, {
type: 'slider',
yAxisIndex: 2,
orient: 'vertical',
left: 445,
width: 20
}],
series: [{
name: 'A1',
type: 'line',
data: [5, 1, 5, 1, 5, 10]
}, {
name: 'A2',
type: 'line',
yAxisIndex: 1,
data: [1, 5, 1, 5, 1, 10]
}, {
name: 'A3',
type: 'line',
yAxisIndex: 2,
data: [3, 8, 1, 4, 2, 5]
}]
};
});
</script>
<script>
makeChart('main-multiple-y-axis-default', function (echarts, globalDefault) {
return {
tooltip: {},
toolbox: {
feature: {
dataZoom: {},
restore: {}
}
},
legend: {
data: ['A1', 'A2', 'A3', 'B1', 'B2']
},
grid: [{
left: 40,
width: 300,
}, {
left: 550,
right: 40
}],
xAxis: [{
data: ['z', 'y', 'x', 'w', 'v', 'u']
}, {
data: ['z', 'y', 'x', 'w', 'v', 'u'],
gridIndex: 1
}],
yAxis: [{
type: 'value',
position: 'left',
axisLine: {
lineStyle: {
color: globalColor[0]
}
}
}, {
type: 'value',
position: 'right',
axisLine: {
lineStyle: {
color: globalColor[1]
}
}
}, {
type: 'value',
position: 'right',
offset: 80,
axisLine: {
lineStyle: {
color: globalColor[2]
}
}
}, {
type: 'value',
position: 'left',
gridIndex: 1,
boundaryGap: ['20%', '20%'],
axisLine: {
lineStyle: {
color: globalColor[3]
}
}
}, {
type: 'value',
position: 'right',
gridIndex: 1,
boundaryGap: ['20%', '20%'],
axisLine: {
lineStyle: {
color: globalColor[4]
}
}
}],
dataZoom: [{
type: 'slider',
height: 20
}, {
type: 'slider',
yAxisIndex: 1,
orient: 'vertical',
left: 365,
width: 20
}, {
type: 'slider',
yAxisIndex: 2,
orient: 'vertical',
left: 445,
width: 20
}],
series: [{
name: 'A1',
type: 'line',
data: [5, 1, 5, 1, 5, 10]
}, {
name: 'A2',
type: 'line',
yAxisIndex: 1,
data: [1, 5, 1, 5, 1, 10]
}, {
name: 'A3',
type: 'line',
yAxisIndex: 2,
data: [3, 8, 1, 4, 2, 5]
}, {
name: 'B1',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 3,
data: [5, 1, 5, 1, 5, 3]
}, {
name: 'B2',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 4,
data: [1, 5, 1, 5, 1, 10]
}]
};
});
</script>
<script>
makeChart('main-specify-y-axis', function (echarts, globalDefault) {
return {
tooltip: {},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: [1, 2, 4],
xAxisIndex: false
},
restore: {}
}
},
legend: {
data: ['A1', 'A2', 'A3', 'B1', 'B2']
},
grid: [{
left: 40,
width: 300,
}, {
left: 550,
right: 40
}],
xAxis: [{
data: ['z', 'y', 'x', 'w', 'v', 'u']
}, {
data: ['z', 'y', 'x', 'w', 'v', 'u'],
gridIndex: 1
}],
yAxis: [{
type: 'value',
position: 'left',
axisLine: {
lineStyle: {
color: globalColor[0]
}
}
}, {
type: 'value',
position: 'right',
axisLine: {
lineStyle: {
color: globalColor[1]
}
}
}, {
type: 'value',
position: 'right',
offset: 80,
axisLine: {
lineStyle: {
color: globalColor[2]
}
}
}, {
type: 'value',
position: 'left',
gridIndex: 1,
boundaryGap: ['20%', '20%'],
axisLine: {
lineStyle: {
color: globalColor[3]
}
}
}, {
type: 'value',
position: 'right',
gridIndex: 1,
boundaryGap: ['20%', '20%'],
axisLine: {
lineStyle: {
color: globalColor[4]
}
}
}],
series: [{
name: 'A1',
type: 'line',
data: [5, 1, 5, 1, 5, 10]
}, {
name: 'A2',
type: 'line',
yAxisIndex: 1,
data: [1, 5, 1, 5, 1, 10]
}, {
name: 'A3',
type: 'line',
yAxisIndex: 2,
data: [3, 8, 1, 4, 2, 5]
}, {
name: 'B1',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 3,
data: [5, 1, 5, 1, 5, 10]
}, {
name: 'B2',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 4,
data: [1, 5, 1, 5, 1, 10]
}]
};
});
</script>
<script>
makeChart('main-specify-x-axis', function (echarts, globalDefault) {
return {
tooltip: {},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: false
},
restore: {}
}
},
legend: {
data: ['A1', 'A2', 'A3', 'B1', 'B2']
},
grid: [{
left: 40,
width: 300,
}, {
left: 550,
right: 40
}],
xAxis: [{
data: ['z', 'y', 'x', 'w', 'v', 'u']
}, {
data: ['z', 'y', 'x', 'w', 'v', 'u'],
gridIndex: 1
}],
yAxis: [{
type: 'value',
position: 'left',
axisLine: {
lineStyle: {
color: globalColor[0]
}
}
}, {
type: 'value',
position: 'right',
axisLine: {
lineStyle: {
color: globalColor[1]
}
}
}, {
type: 'value',
position: 'right',
offset: 80,
axisLine: {
lineStyle: {
color: globalColor[2]
}
}
}, {
type: 'value',
position: 'left',
gridIndex: 1,
boundaryGap: ['20%', '20%'],
axisLine: {
lineStyle: {
color: globalColor[3]
}
}
}, {
type: 'value',
position: 'right',
gridIndex: 1,
boundaryGap: ['20%', '20%'],
axisLine: {
lineStyle: {
color: globalColor[4]
}
}
}],
series: [{
name: 'A1',
type: 'line',
data: [5, 1, 5, 1, 5, 10]
}, {
name: 'A2',
type: 'line',
yAxisIndex: 1,
data: [1, 5, 1, 5, 1, 10]
}, {
name: 'A3',
type: 'line',
yAxisIndex: 2,
data: [3, 8, 1, 4, 2, 5]
}, {
name: 'B1',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 3,
data: [5, 1, 5, 1, 5, 10]
}, {
name: 'B2',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 4,
data: [1, 5, 1, 5, 1, 10]
}]
};
});
</script>
<script>
require(['echarts'/*, 'map/js/china' */], function (echarts) {
var option;
option = {
toolbox: {
feature: {
dataZoom: {
// yAxisIndex: false
}
}
},
legend: {},
xAxis: {
data: ['I', 'II', 'III']
},
yAxis: {},
series: [{
name: 'x',
type: 'bar',
stack: 'a',
data: [11, 22, 33]
}, {
name: 'y',
type: 'bar',
stack: 'a',
data: [44, 33, 22]
}]
};
var chart = testHelper.create(echarts, 'main0', {
title: [
'(1) Use toolbox.dataZoom to brush a small rect in grid.',
'(2) Click a legend item to disappear a series and click again to show the series.',
'[Check]: the extent of yAxis: should be able to return to **the previous state after (1) did**.',
'(3) Click "back" in toolbox.dataZoom',
'[Check]: Back normally.'
],
option: option
// height: 300,
// buttons: [{text: 'btn-txt', onclick: function () {}}],
// recordCanvas: true,
});
});
</script>
<script>
require(['echarts'/*, 'map/js/china' */], function (echarts) {
var option;
option = {
toolbox: {
feature: {
dataZoom: {
xAxisId: 'xr',
yAxisId: ['yl0', 'yl1']
}
}
},
legend: {},
grid: [{
right: '60%',
bottom: '60%',
}, {
id: 'gr',
left: '60%',
bottom: '60%',
}, {
id: 'gb',
top: '60%',
}],
xAxis: [{
}, {
id: 'xr',
gridId: 'gr'
}, {
id: 'xb',
gridId: 'gb'
}],
yAxis: [{
id: 'yl0'
}, {
id: 'yl1'
}, {
id: 'yr',
gridId: 'gr'
}, {
id: 'yb',
gridId: 'gb'
}],
series: [{
type: 'line',
yAxisId: 'yl0',
data: [[11, 12], [22, 45], [33, 76]]
}, {
type: 'line',
yAxisId: 'yl1',
data: [[11, 2212], [22, 3345], [33, 4476]]
}, {
type: 'line',
xAxisId: 'xr',
yAxisId: 'yr',
data: [[45, 65], [13, 25], [56, 71]]
}, {
type: 'line',
xAxisId: 'xb',
yAxisId: 'yb',
data: [[123, 654], [234, 321], [345, 812]]
}]
};
var chart = testHelper.create(echarts, 'main-refer-by-axis-id', {
title: [
'Test toolbox datazoom refer with axis id',
'left grid: toolbox only work **on two yAxis**',
'right grid: toolbox only work **on xAxis**',
'bottom grid: toolbox **does not work**'
],
option: option
// height: 300,
// buttons: [{text: 'btn-txt', onclick: function () {}}],
// recordCanvas: true,
});
});
</script>
</body>
</html>