| <!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(); |
| |
| const clientChart = 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'); |
| main.innerHTML = serverChart.renderToSVGString(); |
| 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> |
