209 lines
7.5 KiB
HTML
Generated
209 lines
7.5 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="lib/perlin.js"></script> -->
|
|
<!-- <script src="lib/dat.gui.min.js"></script> -->
|
|
<!-- <script src="ut/lib/canteen.js"></script> -->
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
body, #main, svg {
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
img {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
h2 {
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
|
|
<h2>
|
|
1. It should have initial animation<br>
|
|
2. It should use lighter color when hovering on the bars of a and b series<br>
|
|
3. It should toggle the series when clicking the legend<br>
|
|
4. It should update the series when clicking the bars<br>
|
|
5. The third series is silent so it cannot be lighter when hovering<br>
|
|
</h2>
|
|
<div id="main"></div>
|
|
|
|
<h2>Big data render time</h2>
|
|
<div id="big-data"></div>
|
|
|
|
<script>
|
|
require(['echarts', 'ssrClient'], function (echarts, ssrClient) {
|
|
console.log(ssrClient)
|
|
// During transition
|
|
const serverChart = echarts.init(null, null, {
|
|
width: 500,
|
|
height: 300,
|
|
renderer: 'svg',
|
|
ssr: true
|
|
});
|
|
|
|
const width = serverChart.getWidth();
|
|
const height = serverChart.getHeight();
|
|
|
|
const seriesData = [{
|
|
type: 'bar',
|
|
name: 'a',
|
|
data: [31, 43, 23, 54, 65, 23, 43]
|
|
}, {
|
|
type: 'bar',
|
|
name: 'b',
|
|
data: [63, 53, 73, 23, 43, 23, 43]
|
|
}, {
|
|
type: 'bar',
|
|
name: 'silent',
|
|
data: [32, 55, 31, 65, 54, 43, 65],
|
|
silent: true
|
|
}];
|
|
|
|
const option = {
|
|
legend: {
|
|
data: ['a', 'b']
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
// show: false
|
|
},
|
|
yAxis: {
|
|
// show: false
|
|
},
|
|
series: seriesData
|
|
};
|
|
|
|
serverChart.setOption(option);
|
|
|
|
const main = document.getElementById('main');
|
|
|
|
update();
|
|
|
|
function update() {
|
|
main.innerHTML = serverChart.renderToSVGString();
|
|
|
|
ssrClient.hydrate(main, {
|
|
on: {
|
|
mouseover: (params) => {
|
|
// console.log(params);
|
|
},
|
|
mouseout: (params) => {
|
|
// console.log(params);
|
|
},
|
|
click: (params) => {
|
|
// This is for demo only. In practice, the
|
|
// client should call API to get the new chart
|
|
// and `serverChart.dispatchAction` should be
|
|
// done on the server.
|
|
if (params.ssrType === 'legend') {
|
|
serverChart.dispatchAction({
|
|
type: 'legendToggleSelect',
|
|
name: ['a', 'b'][params.seriesIndex]
|
|
});
|
|
update();
|
|
}
|
|
else {
|
|
serverChart.setOption({
|
|
series: [{
|
|
name: 'a',
|
|
data: [31, 43, 23, 54, 65, 23, 43].map(v => v + Math.random() * 10)
|
|
}, {
|
|
name: 'b',
|
|
data: [63, 53, 73, 23, 43, 23, 43].map(v => v + Math.random() * 10)
|
|
}]
|
|
});
|
|
update();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
require(['echarts', 'ssrClient'], function (echarts, ssrClient) {
|
|
// During transition
|
|
const serverChart = echarts.init(null, null, {
|
|
width: 500,
|
|
height: 300,
|
|
renderer: 'svg',
|
|
ssr: true
|
|
})
|
|
|
|
const width = serverChart.getWidth();
|
|
const height = serverChart.getHeight();
|
|
|
|
const xData = [];
|
|
const data = [];
|
|
for (let i = 0; i < 1000; ++i) {
|
|
xData.push(i + '');
|
|
data.push(Math.ceil(Math.random() * 1000));
|
|
}
|
|
|
|
const seriesData = [{
|
|
type: 'line',
|
|
name: 'a',
|
|
data
|
|
}];
|
|
|
|
const option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xData
|
|
// show: false
|
|
},
|
|
yAxis: {
|
|
// show: false
|
|
},
|
|
series: seriesData
|
|
};
|
|
|
|
serverChart.setOption(option);
|
|
|
|
const main = document.getElementById('big-data');
|
|
|
|
console.time('renderToSVGString');
|
|
const html = serverChart.renderToSVGString();
|
|
main.innerHTML = html;
|
|
console.timeEnd('renderToSVGString');
|
|
const size = main.innerHTML.length;
|
|
console.log('SVG size:', size > 1e6 ? (size / 1e6).toFixed(1) + 'M' : (size / 1e3).toFixed(1) + 'K');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|