426 lines
14 KiB
HTML
Generated
426 lines
14 KiB
HTML
Generated
<!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">
|
|
<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="ut/lib/canteen.js"></script> -->
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
</style>
|
|
|
|
|
|
|
|
<div id="main0"></div>
|
|
<div id="main1"></div>
|
|
<div id="main2"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
function makeToggleChartButtons(changeFocus) {
|
|
return [{
|
|
text: 'Set focus: series',
|
|
onclick: function () {
|
|
changeFocus({ focus: 'series' });
|
|
}
|
|
}, {
|
|
text: 'Set focus: self',
|
|
onclick: function () {
|
|
changeFocus({ focus: 'self' });
|
|
}
|
|
}, {
|
|
text: 'Set blurScope: series',
|
|
onclick: function () {
|
|
changeFocus({ blurScope: 'series' });
|
|
}
|
|
}, {
|
|
text: 'Set blurScope: coordinateSystem',
|
|
onclick: function () {
|
|
changeFocus({ blurScope: 'coordinateSystem' });
|
|
}
|
|
}, {
|
|
text: 'Set blurScope: global',
|
|
onclick: function () {
|
|
changeFocus({ blurScope: 'global' });
|
|
}
|
|
}];
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
grid: {
|
|
right: '20%'
|
|
},
|
|
legend: {
|
|
data: ['蒸发量', '降水量', '平均温度']
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '蒸发量',
|
|
min: 0,
|
|
max: 250,
|
|
position: 'right',
|
|
axisLabel: {
|
|
formatter: '{value} ml'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '降水量',
|
|
min: 0,
|
|
max: 250,
|
|
position: 'right',
|
|
offset: 80,
|
|
axisLabel: {
|
|
formatter: '{value} ml'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '温度',
|
|
min: 0,
|
|
max: 25,
|
|
position: 'left',
|
|
axisLabel: {
|
|
formatter: '{value} °C'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '蒸发量',
|
|
type: 'bar',
|
|
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
|
|
},
|
|
{
|
|
name: '降水量',
|
|
type: 'bar',
|
|
yAxisIndex: 1,
|
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
|
},
|
|
{
|
|
name: '平均温度',
|
|
type: 'line',
|
|
yAxisIndex: 2,
|
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
var chart = testHelper.create(echarts, 'main0', {
|
|
title: [
|
|
'Multiple series on same grid'
|
|
],
|
|
buttons: makeToggleChartButtons(function (newOpt) {
|
|
option.series.forEach(function (seriesOpt) {
|
|
seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt)
|
|
});
|
|
chart.setOption(option);
|
|
}),
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var dataAll = [
|
|
[
|
|
[10.0, 8.04],
|
|
[8.0, 6.95],
|
|
[13.0, 7.58],
|
|
[9.0, 8.81],
|
|
[11.0, 8.33],
|
|
[14.0, 9.96],
|
|
[6.0, 7.24],
|
|
[4.0, 4.26],
|
|
[12.0, 10.84],
|
|
[7.0, 4.82],
|
|
[5.0, 5.68]
|
|
],
|
|
[
|
|
[10.0, 9.14],
|
|
[8.0, 8.14],
|
|
[13.0, 8.74],
|
|
[9.0, 8.77],
|
|
[11.0, 9.26],
|
|
[14.0, 8.10],
|
|
[6.0, 6.13],
|
|
[4.0, 3.10],
|
|
[12.0, 9.13],
|
|
[7.0, 7.26],
|
|
[5.0, 4.74]
|
|
],
|
|
[
|
|
[10.0, 7.46],
|
|
[8.0, 6.77],
|
|
[13.0, 12.74],
|
|
[9.0, 7.11],
|
|
[11.0, 7.81],
|
|
[14.0, 8.84],
|
|
[6.0, 6.08],
|
|
[4.0, 5.39],
|
|
[12.0, 8.15],
|
|
[7.0, 6.42],
|
|
[5.0, 5.73]
|
|
],
|
|
[
|
|
[8.0, 6.58],
|
|
[8.0, 5.76],
|
|
[8.0, 7.71],
|
|
[8.0, 8.84],
|
|
[8.0, 8.47],
|
|
[8.0, 7.04],
|
|
[8.0, 5.25],
|
|
[19.0, 12.50],
|
|
[8.0, 5.56],
|
|
[8.0, 7.91],
|
|
[8.0, 6.89]
|
|
]
|
|
];
|
|
|
|
var markLineOpt = {
|
|
animation: false,
|
|
label: {
|
|
formatter: 'y = 0.5 * x + 3',
|
|
align: 'right'
|
|
},
|
|
lineStyle: {
|
|
type: 'solid'
|
|
},
|
|
tooltip: {
|
|
formatter: 'y = 0.5 * x + 3'
|
|
},
|
|
data: [[{
|
|
coord: [0, 3],
|
|
symbol: 'none'
|
|
}, {
|
|
coord: [20, 13],
|
|
symbol: 'none'
|
|
}]]
|
|
};
|
|
|
|
option = {
|
|
title: {
|
|
text: 'Anscombe\'s quartet',
|
|
left: 'center',
|
|
top: 0
|
|
},
|
|
grid: [
|
|
{x: '7%', y: '7%', width: '38%', height: '38%'},
|
|
{x2: '7%', y: '7%', width: '38%', height: '38%'},
|
|
{x: '7%', y2: '7%', width: '38%', height: '38%'},
|
|
{x2: '7%', y2: '7%', width: '38%', height: '38%'}
|
|
],
|
|
tooltip: {
|
|
formatter: 'Group {a}: ({c})'
|
|
},
|
|
xAxis: [
|
|
{gridIndex: 0, min: 0, max: 20},
|
|
{gridIndex: 1, min: 0, max: 20},
|
|
{gridIndex: 2, min: 0, max: 20},
|
|
{gridIndex: 3, min: 0, max: 20}
|
|
],
|
|
yAxis: [
|
|
{gridIndex: 0, min: 0, max: 15},
|
|
{gridIndex: 1, min: 0, max: 15},
|
|
{gridIndex: 2, min: 0, max: 15},
|
|
{gridIndex: 3, min: 0, max: 15}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'I',
|
|
type: 'scatter',
|
|
xAxisIndex: 0,
|
|
yAxisIndex: 0,
|
|
data: dataAll[0],
|
|
symbolSize: 20,
|
|
markLine: markLineOpt
|
|
},
|
|
{
|
|
name: 'II',
|
|
type: 'scatter',
|
|
xAxisIndex: 1,
|
|
yAxisIndex: 1,
|
|
data: dataAll[1],
|
|
symbolSize: 20,
|
|
markLine: markLineOpt
|
|
},
|
|
{
|
|
name: 'III',
|
|
type: 'scatter',
|
|
xAxisIndex: 2,
|
|
yAxisIndex: 2,
|
|
data: dataAll[2],
|
|
symbolSize: 20,
|
|
markLine: markLineOpt
|
|
},
|
|
{
|
|
name: 'IV',
|
|
type: 'scatter',
|
|
xAxisIndex: 3,
|
|
yAxisIndex: 3,
|
|
data: dataAll[3],
|
|
symbolSize: 20,
|
|
markLine: markLineOpt
|
|
}
|
|
]
|
|
};
|
|
var chart = testHelper.create(echarts, 'main1', {
|
|
title: [
|
|
'Multiple grid'
|
|
],
|
|
buttons: makeToggleChartButtons(function (newOpt) {
|
|
option.series.forEach(function (seriesOpt) {
|
|
seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt)
|
|
});
|
|
chart.setOption(option);
|
|
}),
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
|
var option;
|
|
|
|
option = {
|
|
xAxis: {
|
|
data: ['a', 'b', 'c']
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
type: 'bar',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [1212, 3232, 2525]
|
|
}, {
|
|
type: 'bar',
|
|
emphasis: {
|
|
// itemStyle: {
|
|
// color: 'red'
|
|
// },
|
|
focus: 'series'
|
|
},
|
|
data: [1212, 3232, 2525]
|
|
}]
|
|
};
|
|
|
|
var buttons = makeToggleChartButtons(function (newOpt) {
|
|
option.series.forEach(function (seriesOpt) {
|
|
seriesOpt.emphasis = Object.assign(seriesOpt.emphasis || {}, newOpt)
|
|
});
|
|
chart.setOption(option);
|
|
});
|
|
|
|
buttons.push({
|
|
text: 'highlight seriesIndex: 0, dataIndex: 1',
|
|
onclick: function () {
|
|
chart.dispatchAction({
|
|
type: 'highlight',
|
|
seriesIndex: 0,
|
|
dataIndex: 1
|
|
});
|
|
}
|
|
}, {
|
|
text: 'highlight seriesIndex: 1, dataIndex: 1',
|
|
onclick: function () {
|
|
chart.dispatchAction({
|
|
type: 'highlight',
|
|
seriesIndex: 1,
|
|
dataIndex: 1
|
|
});
|
|
}
|
|
}, {
|
|
text: 'downplay seriesIndex: 1, dataIndex: 1',
|
|
onclick: function () {
|
|
chart.dispatchAction({
|
|
type: 'downplay',
|
|
seriesIndex: 1,
|
|
dataIndex: 1
|
|
});
|
|
}
|
|
}, {
|
|
text: 'downplay all',
|
|
onclick: function () {
|
|
chart.dispatchAction({
|
|
type: 'downplay'
|
|
});
|
|
}
|
|
}, {
|
|
text: 'Highlight all',
|
|
onclick: function () {
|
|
chart.dispatchAction({
|
|
type: 'highlight',
|
|
seriesIndex: [0, 1],
|
|
});
|
|
}
|
|
});
|
|
|
|
var chart = testHelper.create(echarts, 'main2', {
|
|
title: [
|
|
'API trigger highlight'
|
|
],
|
|
option: option,
|
|
// height: 300,
|
|
buttons: buttons
|
|
// recordCanvas: true,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|