1131 lines
32 KiB
HTML
Generated
1131 lines
32 KiB
HTML
Generated
|
|
<!--
|
|
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>
|
|
<script src="lib/draggable.js"></script>
|
|
<link rel="stylesheet" href="lib/reset.css">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
h1 {
|
|
line-height: 60px;
|
|
height: 60px;
|
|
background: #146402;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: #eee;
|
|
font-size: 14px;
|
|
}
|
|
.chart {
|
|
height: 300px;
|
|
}
|
|
</style>
|
|
|
|
<div class="chart" id="plain"></div>
|
|
<h1>No scroll, width 300, right: 10</h1>
|
|
<div class="chart" id="plain2"></div>
|
|
<h1>No scroll, has '\n' after 'line3', bottom: 20</h1>
|
|
<div class="chart" id="plain3"></div>
|
|
<h1>No scroll, vertical, has '\n' after 'line3', right 20</h1>
|
|
<div class="chart" id="plain-v"></div>
|
|
<h1>No scroll, vertical, top 'middle', left: 20, height: 150</h1>
|
|
<div class="chart" id="plain-v2"></div>
|
|
<h1>Scroll</h1>
|
|
<div class="chart" id="scroll"></div>
|
|
<h1>Scroll auto: try to change window size (width: 80%, right: 30)</h1>
|
|
<div class="chart" id="scroll-auto"></div>
|
|
<h1>Scroll auto: left: 30, right: 30, bottom: 0, position: 'start'</h1>
|
|
<div class="chart" id="scroll-lr"></div>
|
|
<h1>Scroll vertically</h1>
|
|
<div class="chart" id="scroll-v"></div>
|
|
<h1>Scroll vertically, left: 10, top: 'center', position: 'start', height: 50% (Turn the second page and resize it until page button disappear)</h1>
|
|
<div class="chart" id="scroll-v2"></div>
|
|
|
|
<div id="legendHoverLink"></div>
|
|
<div id="multi-pie"></div>
|
|
<div id="icon-circle"></div>
|
|
<div id="only-single-item"></div>
|
|
<div id="vary-size"></div>
|
|
<div id="index-to-no-name"></div>
|
|
<h1>Legend page text color should be light in dark mode</h1>
|
|
<div class="chart" id="dark-pageTextStyle"></div>
|
|
|
|
<script>
|
|
|
|
function makeSeries(seriesCount, categoryCount) {
|
|
var series = [];
|
|
var legendData = [];
|
|
var xAxisData = [];
|
|
|
|
for (var j = 0; j < categoryCount; j++) {
|
|
xAxisData.push('category' + j);
|
|
}
|
|
|
|
for (var i = 0; i < seriesCount; i++) {
|
|
var data = [];
|
|
for (var j = 0; j < categoryCount; j++) {
|
|
data.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
var seriesName = 'line' + i;
|
|
series.push({
|
|
name: seriesName,
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbol: 'circle',
|
|
symbolSize: 10,
|
|
data: data,
|
|
step: 'end'
|
|
});
|
|
legendData.push(seriesName);
|
|
}
|
|
|
|
return {
|
|
series: series,
|
|
legendData: legendData,
|
|
xAxisData: xAxisData
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
if (i < 5 && i > 1) {
|
|
data1.push(0);
|
|
}
|
|
else {
|
|
data1.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
data2.push(+(Math.random() + 0.5).toFixed(3));
|
|
data3.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
|
|
var seriesInfo = makeSeries(5, 3);
|
|
|
|
var option = {
|
|
legend: {
|
|
selector: true,
|
|
selectorLabel: {
|
|
color: 'yellow',
|
|
borderColor: 'green',
|
|
backgroundColor: 'blue'
|
|
},
|
|
emphasis: {
|
|
selectorLabel: {
|
|
backgroundColor: 'red'
|
|
}
|
|
},
|
|
data: seriesInfo.legendData,
|
|
// backgroundColor: 'rgba(0,100,50,0.2)'
|
|
},
|
|
tooltip: {
|
|
},
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
series: seriesInfo.series
|
|
};
|
|
|
|
testHelper.create(echarts, 'plain', {
|
|
title: [
|
|
'No scroll, left not set (should be center)',
|
|
'color: yellow, borderColor: green, backgroundColor: blue, emphasis backgroundColor: red'
|
|
],
|
|
option: option
|
|
});
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
if (i < 5 && i > 1) {
|
|
data1.push(0);
|
|
}
|
|
else {
|
|
data1.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
data2.push(+(Math.random() + 0.5).toFixed(3));
|
|
data3.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
|
|
var seriesInfo = makeSeries(10, 3);
|
|
|
|
var option = {
|
|
legend: {
|
|
right: 10,
|
|
width: 300,
|
|
selector: true,
|
|
data: seriesInfo.legendData,
|
|
backgroundColor: 'rgba(0,100,50,0.2)'
|
|
},
|
|
tooltip: {
|
|
},
|
|
grid: {
|
|
top: 100,
|
|
},
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
series: seriesInfo.series
|
|
};
|
|
|
|
testHelper.createChart(echarts, 'plain2', option);
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
if (i < 5 && i > 1) {
|
|
data1.push(0);
|
|
}
|
|
else {
|
|
data1.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
data2.push(+(Math.random() + 0.5).toFixed(3));
|
|
data3.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
|
|
var seriesInfo = makeSeries(10, 3);
|
|
seriesInfo.legendData.splice(4, 0, '\n');
|
|
|
|
var option = {
|
|
legend: {
|
|
bottom: 20,
|
|
selector: true,
|
|
data: seriesInfo.legendData,
|
|
backgroundColor: 'rgba(0,100,50,0.2)'
|
|
},
|
|
tooltip: {
|
|
},
|
|
grid: {
|
|
bottom: 100
|
|
},
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
series: seriesInfo.series
|
|
};
|
|
|
|
testHelper.createChart(echarts, 'plain3', option);
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
if (i < 5 && i > 1) {
|
|
data1.push(0);
|
|
}
|
|
else {
|
|
data1.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
data2.push(+(Math.random() + 0.5).toFixed(3));
|
|
data3.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
|
|
var seriesInfo = makeSeries(20, 3);
|
|
seriesInfo.legendData.splice(4, 0, '\n');
|
|
|
|
var option = {
|
|
legend: {
|
|
orient: 'vertical',
|
|
right: 20,
|
|
selector: true,
|
|
data: seriesInfo.legendData,
|
|
backgroundColor: 'rgba(0,100,50,0.2)'
|
|
},
|
|
tooltip: {
|
|
},
|
|
grid: {
|
|
right: 240
|
|
},
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
series: seriesInfo.series
|
|
};
|
|
|
|
testHelper.createChart(echarts, 'plain-v', option);
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
if (i < 5 && i > 1) {
|
|
data1.push(0);
|
|
}
|
|
else {
|
|
data1.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
data2.push(+(Math.random() + 0.5).toFixed(3));
|
|
data3.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
|
|
var seriesInfo = makeSeries(20, 3);
|
|
|
|
var option = {
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 20,
|
|
top: 'center',
|
|
selector: true,
|
|
height: 150,
|
|
data: seriesInfo.legendData,
|
|
backgroundColor: 'rgba(0,100,50,0.2)'
|
|
},
|
|
tooltip: {
|
|
},
|
|
grid: {
|
|
left: 280
|
|
},
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
series: seriesInfo.series
|
|
};
|
|
|
|
testHelper.createChart(echarts, 'plain-v2', option);
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
if (i < 5 && i > 1) {
|
|
data1.push(0);
|
|
}
|
|
else {
|
|
data1.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
data2.push(+(Math.random() + 0.5).toFixed(3));
|
|
data3.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
|
|
var seriesInfo = makeSeries(50, 3);
|
|
|
|
var option = {
|
|
legend: [{
|
|
type: 'scroll',
|
|
selector: true,
|
|
data: seriesInfo.legendData,
|
|
backgroundColor: 'rgba(0,100,50,0.2)'
|
|
}, {
|
|
type: 'scroll',
|
|
bottom: 0,
|
|
selector: true,
|
|
data: seriesInfo.legendData,
|
|
backgroundColor: 'rgba(0,100,50,0.2)',
|
|
pageButtonPosition: 'start'
|
|
}],
|
|
tooltip: {
|
|
},
|
|
grid: {
|
|
left: 280
|
|
},
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
series: seriesInfo.series
|
|
};
|
|
|
|
testHelper.createChart(echarts, 'scroll', option, {draggable: true});
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
if (i < 5 && i > 1) {
|
|
data1.push(0);
|
|
}
|
|
else {
|
|
data1.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
data2.push(+(Math.random() + 0.5).toFixed(3));
|
|
data3.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
|
|
var seriesInfo = makeSeries(5, 3);
|
|
|
|
var option = {
|
|
legend: {
|
|
type: 'scroll',
|
|
width: '80%',
|
|
right: 30,
|
|
selector: true,
|
|
data: seriesInfo.legendData,
|
|
pageIconSize: 50,
|
|
pageIconColor: 'red',
|
|
pageIconInactiveColor: 'green',
|
|
backgroundColor: 'rgba(0,100,50,0.2)',
|
|
pageTextStyle: {
|
|
color: 'yellow',
|
|
fontSize: 22
|
|
}
|
|
},
|
|
tooltip: {
|
|
},
|
|
grid: {
|
|
left: 280
|
|
},
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
series: seriesInfo.series
|
|
};
|
|
|
|
testHelper.createChart(echarts, 'scroll-auto', option, {draggable: true, width: 400});
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
if (i < 5 && i > 1) {
|
|
data1.push(0);
|
|
}
|
|
else {
|
|
data1.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
data2.push(+(Math.random() + 0.5).toFixed(3));
|
|
data3.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
|
|
var seriesInfo = makeSeries(55, 3);
|
|
|
|
var option = {
|
|
legend: {
|
|
type: 'scroll',
|
|
bottom: 0,
|
|
right: 30,
|
|
left: 30,
|
|
data: seriesInfo.legendData,
|
|
selector: true,
|
|
pageIconSize: 5,
|
|
pageIconColor: 'red',
|
|
pageIconInactiveColor: 'green',
|
|
backgroundColor: 'rgba(0,100,50,0.2)',
|
|
pageButtonPosition: 'start',
|
|
pageButtonGap: 20,
|
|
pageTextStyle: {
|
|
fontSize: 9
|
|
}
|
|
},
|
|
tooltip: {
|
|
},
|
|
grid: {
|
|
left: 280
|
|
},
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
series: seriesInfo.series
|
|
};
|
|
|
|
testHelper.createChart(echarts, 'scroll-lr', option, {draggable: true, width: 400});
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
if (i < 5 && i > 1) {
|
|
data1.push(0);
|
|
}
|
|
else {
|
|
data1.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
data2.push(+(Math.random() + 0.5).toFixed(3));
|
|
data3.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
|
|
var seriesInfo = makeSeries(55, 3);
|
|
|
|
var option = {
|
|
legend: {
|
|
type: 'scroll',
|
|
orient: 'vertical',
|
|
selector: true,
|
|
bottom: 0,
|
|
right: 30,
|
|
data: seriesInfo.legendData
|
|
},
|
|
tooltip: {
|
|
},
|
|
grid: {
|
|
right: 180
|
|
},
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
series: seriesInfo.series
|
|
};
|
|
|
|
testHelper.createChart(echarts, 'scroll-v', option, {draggable: true, width: 400});
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
|
|
for (var i = 0; i < 100; i++) {
|
|
xAxisData.push('类目' + i);
|
|
if (i < 5 && i > 1) {
|
|
data1.push(0);
|
|
}
|
|
else {
|
|
data1.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
data2.push(+(Math.random() + 0.5).toFixed(3));
|
|
data3.push(+(Math.random() + 0.5).toFixed(3));
|
|
}
|
|
|
|
var seriesInfo = makeSeries(5, 3);
|
|
|
|
var option = {
|
|
legend: {
|
|
type: 'scroll',
|
|
orient: 'vertical',
|
|
selector: true,
|
|
top: 'middle',
|
|
left: 10,
|
|
height: '50%',
|
|
borderColor: '#819356',
|
|
borderWidth: 2,
|
|
borderRadius: 4,
|
|
data: seriesInfo.legendData,
|
|
pageButtonPosition: 'start'
|
|
},
|
|
tooltip: {
|
|
},
|
|
grid: {
|
|
left: 180
|
|
},
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
series: seriesInfo.series
|
|
};
|
|
|
|
testHelper.createChart(echarts, 'scroll-v2', option, {draggable: true, width: 400});
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var chart;
|
|
var myChart;
|
|
var option;
|
|
|
|
require([
|
|
'echarts'/*, 'map/js/china' */
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
},
|
|
legend: {
|
|
data: ['AAA']
|
|
},
|
|
xAxis: {
|
|
data: ['A', 'B', 'C']
|
|
},
|
|
yAxis: {
|
|
},
|
|
grid: {
|
|
right: '50%'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'AAA',
|
|
type: 'bar',
|
|
data: [12, 33, 11]
|
|
},
|
|
{
|
|
name: 'AAA',
|
|
type: 'pie',
|
|
legendHoverLink: false,
|
|
center: ['75%', '50%'],
|
|
label: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true
|
|
}
|
|
},
|
|
data: [
|
|
{ value: 0, name: 'A' },
|
|
{ value: 367, name: 'B' },
|
|
{ value: 20, name: 'C' }
|
|
]
|
|
}
|
|
]
|
|
}
|
|
|
|
chart = myChart = testHelper.create(echarts, 'legendHoverLink', {
|
|
title: 'legendHoverLink is disabled on pie',
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var chart;
|
|
var myChart;
|
|
var option;
|
|
|
|
require([
|
|
'echarts'/*, 'map/js/china' */
|
|
], function (echarts) {
|
|
|
|
var option = {
|
|
tooltip: {
|
|
},
|
|
legend: {
|
|
data: ['a', 'b', 'c'],
|
|
selector: true
|
|
},
|
|
series: [
|
|
{
|
|
name: 'AAA',
|
|
type: 'pie',
|
|
center: ['75%', '50%'],
|
|
radius: '30%',
|
|
data: [
|
|
{name: 'a', value: 12},
|
|
{name: 'b', value: 34},
|
|
{name: 'c', value: 56}
|
|
]
|
|
},
|
|
{
|
|
name: 'BBB',
|
|
type: 'pie',
|
|
center: ['25%', '50%'],
|
|
radius: '30%',
|
|
data: [
|
|
{name: 'a', value: 12},
|
|
{name: 'b', value: 34},
|
|
{name: 'c', value: 56}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
|
|
chart = myChart = testHelper.create(echarts, 'multi-pie', {
|
|
title: 'Hover legend, the segments of BOTH pie should be hightlighted',
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var chart;
|
|
var myChart;
|
|
var option;
|
|
|
|
require([
|
|
'echarts'/*, 'map/js/china' */
|
|
], function (echarts) {
|
|
var data = [];
|
|
for (var i = 0; i < 30; i++) {
|
|
data.push({name: i + '', value: Math.random()});
|
|
}
|
|
|
|
var option = {
|
|
tooltip: {
|
|
},
|
|
legend: {
|
|
type: 'scroll',
|
|
selector: true,
|
|
top: 10,
|
|
left: 0,
|
|
data: echarts.util.map(data, function (item) {
|
|
return {
|
|
name: item.name,
|
|
icon: 'circle'
|
|
};
|
|
})
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
data: data
|
|
}]
|
|
};
|
|
|
|
testHelper.create(echarts, 'icon-circle', {
|
|
title: 'The first icon should not be overflow',
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var chart;
|
|
var myChart;
|
|
var option;
|
|
|
|
require([
|
|
'echarts'/*, 'map/js/china' */
|
|
], function (echarts) {
|
|
var data = [];
|
|
for (var i = 0; i < 6; i++) {
|
|
data.push({name: i + '哈哈哈嘿嘿嘿', value: Math.random()});
|
|
}
|
|
|
|
var option = {
|
|
tooltip: {
|
|
},
|
|
legend: {
|
|
type: 'scroll',
|
|
top: 10,
|
|
left: 50,
|
|
width: 105,
|
|
data: echarts.util.map(data, function (item) {
|
|
return {
|
|
name: item.name,
|
|
icon: 'circle'
|
|
};
|
|
})
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
radius: 20,
|
|
label: {show: false},
|
|
labelLine: {show: false},
|
|
data: data
|
|
}]
|
|
};
|
|
|
|
testHelper.create(echarts, 'only-single-item', {
|
|
title: 'Page up/down should be normal when only single item displayed',
|
|
option: option,
|
|
draggable: true
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts',
|
|
], function (echarts) {
|
|
var data = [];
|
|
for (var i = 0; i < 26; i++) {
|
|
var name = '';
|
|
var nameNumber = Math.floor(Math.random() * 10);
|
|
for (var j = 0; j < nameNumber; j++) {
|
|
name += j;
|
|
}
|
|
data.push({
|
|
name: name,
|
|
value: Math.random()
|
|
});
|
|
}
|
|
|
|
var option = {
|
|
legend: [{
|
|
type: 'scroll',
|
|
selector: true,
|
|
itemGap: 30,
|
|
backgroundColor: 'rgba(0,100,50,0.2)'
|
|
}],
|
|
tooltip: {
|
|
},
|
|
grid: {
|
|
left: 280
|
|
},
|
|
series: {
|
|
type: 'pie',
|
|
label: {show: false},
|
|
labelLine: {show: false},
|
|
radius: 30,
|
|
data: data
|
|
}
|
|
};
|
|
|
|
testHelper.create(echarts, 'vary-size', {
|
|
option: option,
|
|
draggable: true
|
|
});
|
|
})
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require([
|
|
'echarts',
|
|
], function (echarts) {
|
|
|
|
var seriesInfo = makeSeries(50, 3);
|
|
var series = seriesInfo.series.slice();
|
|
series.shift();
|
|
|
|
var option = {
|
|
legend: [{
|
|
type: 'scroll',
|
|
selector: true,
|
|
data: seriesInfo.legendData
|
|
}],
|
|
tooltip: {
|
|
},
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {
|
|
},
|
|
series: series
|
|
};
|
|
|
|
testHelper.create(echarts, 'index-to-no-name', {
|
|
option: option,
|
|
title: [
|
|
'Pager should be OK when legend 0 (legendData index 0) is not be displayed.',
|
|
'should be at **page 1** at the beginning'
|
|
],
|
|
draggable: true
|
|
});
|
|
})
|
|
</script>
|
|
|
|
<script>
|
|
require([
|
|
'echarts',
|
|
], function (echarts) {
|
|
|
|
var seriesInfo = makeSeries(5, 3);
|
|
|
|
var option = {
|
|
legend: [{
|
|
type: 'scroll',
|
|
width: 200,
|
|
data: seriesInfo.legendData
|
|
}],
|
|
series: seriesInfo.series,
|
|
xAxis: {
|
|
data: seriesInfo.xAxisData
|
|
},
|
|
yAxis: {}
|
|
};
|
|
var chart = echarts.init(document.getElementById('dark-pageTextStyle'), 'dark', {
|
|
renderer: 'svg'
|
|
});
|
|
chart.setOption(option);
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|