| <!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/draggable.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="main1_b"></div> |
| <div id="main2"></div> |
| <div id="main3"></div> |
| <div id="main4"></div> |
| <div id="main_tiny_cartesians"></div> |
| <div id="main_grid_layout"></div> |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'map/js/china', |
| // './data/nutrients.json' |
| ], function (echarts) { |
| const label = { |
| fontSize: 16, |
| color: '#555' |
| }; |
| const option = { |
| matrix: { |
| x: { |
| data: ['Positive', 'Negative'], |
| label |
| }, |
| y: { |
| data: ['Positive', 'Negative'], |
| label |
| }, |
| top: 80, |
| width: 600, |
| left: 'center' |
| }, |
| series: { |
| type: 'custom', |
| coordinateSystem: 'matrix', |
| data: [ |
| ['Positive', 'Positive', 10], |
| ['Positive', 'Negative', 2], |
| ['Negative', 'Positive', 3], |
| ['Negative', 'Negative', 5] |
| ], |
| label: { |
| show: true, |
| formatter: params => { |
| const value = params.value[2]; |
| return '{name|' |
| + (params.value[0] === params.value[1] |
| ? 'True ' : 'False ') |
| + params.value[1] + '}\n{value|' |
| + value + '}'; |
| }, |
| rich: { |
| name: { |
| color: '#fff', |
| backgroundColor: '#999', |
| textBorderColor: '#333', |
| padding: 5, |
| fontSize: 18 |
| }, |
| value: { |
| color: '#444', |
| textBorderWidth: 0, |
| padding: 5, |
| fontSize: 16, |
| align: 'center' |
| } |
| } |
| }, |
| renderItem: function (params, api) { |
| const x = api.value(0); |
| const y = api.value(1); |
| const rect = api.layout([x, y]).rect; |
| return { |
| type: 'rect', |
| shape: rect, |
| style: api.style({ |
| fill: x === y ? '#8f8' : '#f88', |
| }), |
| } |
| } |
| }, |
| graphic: { |
| elements: [{ |
| type: 'text', |
| style: { |
| text: 'True Class', |
| fill: '#333', |
| font: 'bold 24px serif', |
| textAlign: 'center' |
| }, |
| x: (window.innerWidth - 600) / 2 + 600 / 6 * 4, |
| y: 40, |
| }, { |
| type: 'text', |
| style: { |
| text: 'Predicted Class', |
| fill: '#333', |
| font: 'bold 24px serif', |
| textAlign: 'center' |
| }, |
| x: (window.innerWidth - 600) / 2 - 50, |
| y: 270, |
| rotation: Math.PI / 2 |
| }] |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main0', { |
| title: [ |
| 'Confusion Matrix' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'map/js/china', |
| // './data/nutrients.json' |
| ], function (echarts) { |
| const xCnt = 10; |
| const yCnt = 6; |
| const xData = []; |
| const yData = []; |
| for (let i = 0; i < xCnt; ++i) { |
| xData.push({ |
| value: 'X' + (i + 1) |
| }); |
| } |
| |
| for (let i = 0; i < yCnt; ++i) { |
| yData.push({ |
| value: 'Y' + (i + 1) |
| }); |
| } |
| |
| const data = []; |
| for (let i = 1; i <= xCnt; ++i) { |
| for (let j = 1; j <= yCnt; ++j) { |
| data.push([ |
| 'X' + i, |
| 'Y' + j, |
| Math.random() * 2 - 1 |
| ]); |
| } |
| } |
| |
| const option = { |
| matrix: { |
| x: { |
| data: xData |
| }, |
| y: { |
| data: yData |
| }, |
| top: 80 |
| }, |
| visualMap: { |
| type: 'continuous', |
| min: -1, |
| max: 1, |
| dimension: 2, |
| calculable: true, |
| orient: 'horizontal', |
| top: 5, |
| left: 'center', |
| inRange: { |
| color: [ |
| '#313695', |
| '#4575b4', |
| '#74add1', |
| '#abd9e9', |
| '#e0f3f8', |
| '#ffffbf', |
| '#fee090', |
| '#fdae61', |
| '#f46d43', |
| '#d73027', |
| '#a50026' |
| ], |
| symbolSize: [15, 40] |
| } |
| }, |
| series: { |
| type: 'scatter', |
| coordinateSystem: 'matrix', |
| data, |
| itemStyle: { |
| opacity: 1 |
| }, |
| label: { |
| show: true, |
| formatter: params => params.value[2].toFixed(2) |
| } |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main1', { |
| title: [ |
| 'Correlation Matrix (Scatter)' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| const makeRenderItem = (xDim, yDim, valDim, dataExtent) => (params, api) => { |
| const xval = api.value(xDim); |
| const yval = api.value(yDim); |
| const labelVal = api.value(valDim); |
| const rect = api.layout([xval, yval]).rect; |
| const height = rect.height * 0.3; |
| const y = rect.y + (rect.height - height) / 2; |
| const x = rect.x + rect.width * 0.3; |
| const widthMax = rect.width * 0.5; |
| const width = linearMap(labelVal, dataExtent, [0, widthMax]) |
| return { |
| type: 'group', |
| children: [{ |
| type: 'rect', |
| shape: {x, y, width, height}, |
| style: api.style({ |
| fill: '#47f', |
| }), |
| }, { |
| type: 'text', |
| x: rect.x + 15, |
| y: rect.y + rect.height / 2, |
| style: { |
| text: labelVal + '', |
| fill: '#333', |
| textVerticalAlign: 'middle', |
| }, |
| }] |
| }; |
| }; |
| |
| function linearMap(val, domain, range) { |
| const d0 = domain[0]; |
| const d1 = domain[1]; |
| const r0 = range[0]; |
| const r1 = range[1]; |
| const subDomain = d1 - d0; |
| const subRange = r1 - r0; |
| |
| return subDomain === 0 ? subRange === 0 ? r0 : (r0 + r1) / 2 |
| : val === d0 ? r0 |
| : val === d1 ? r1 |
| : (val - d0) / subDomain * subRange + r0; |
| } |
| |
| const _dataExtent = [0, 10000]; |
| |
| var option = { |
| dataset: { |
| source: [ |
| ['2021-02-01', 0, 1212, 1, 2321, 2, 1412], |
| ['2021-02-02', 0, 7181, 1, 2114, 2, 1402], |
| ['2021-02-03', 0, 2763, 1, 4212, 2, 8172], |
| ['2021-02-04', 0, 6122, 1, 2942, 2, 6121], |
| ['2021-02-05', 0, 4221, 1, 3411, 2, 1987], |
| ['2021-02-06', 0, 7221, 1, 5121, 2, 1303], |
| ] |
| }, |
| matrix: { |
| x: { |
| data: ['Operation Count', 'File Count', 'Total Size'], |
| itemStyle: { |
| color: '#333', |
| }, |
| label: { |
| color: '#eee', |
| } |
| }, |
| y: { |
| levelSize: 100, |
| }, |
| corner: { |
| itemStyle: { |
| color: '#333', |
| }, |
| label: { |
| color: '#eee', |
| }, |
| data: [{coord: [-1, -1], value: 'Date'}] |
| } |
| }, |
| series: [{ |
| type: 'custom', |
| coordinateSystem: 'matrix', |
| encode: {x: 1, y: 0}, |
| renderItem: makeRenderItem(1, 0, 2, _dataExtent), |
| }, { |
| type: 'custom', |
| coordinateSystem: 'matrix', |
| symbol: 'rect', |
| encode: {x: 3, y: 0}, |
| renderItem: makeRenderItem(3, 0, 4, _dataExtent), |
| }, { |
| type: 'custom', |
| coordinateSystem: 'matrix', |
| encode: {x: 5, y: 0}, |
| renderItem: makeRenderItem(5, 0, 6, _dataExtent), |
| }], |
| }; |
| |
| var chart = testHelper.create(echarts, 'main1_b', { |
| title: [ |
| 'custom series, tiny bar.' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'map/js/china', |
| // './data/nutrients.json' |
| ], function (echarts) { |
| const xCnt = 8; |
| const yCnt = xCnt; |
| const xData = []; |
| const yData = []; |
| for (let i = 0; i < xCnt; ++i) { |
| xData.push({ |
| value: 'X' + (i + 1) |
| }); |
| } |
| |
| for (let i = 0; i < yCnt; ++i) { |
| yData.push({ |
| value: 'Y' + (i + 1) |
| }); |
| } |
| |
| const data = []; |
| for (let i = 1; i <= xCnt; ++i) { |
| for (let j = 1; j <= yCnt; ++j) { |
| if (i >= j) { |
| data.push([ |
| 'X' + i, |
| 'Y' + j, |
| i === j ? 1 : Math.random() * 2 - 1 |
| ]); |
| } |
| } |
| } |
| |
| const option = { |
| matrix: { |
| x: { |
| data: xData |
| }, |
| y: { |
| data: yData |
| }, |
| top: 80 |
| }, |
| visualMap: { |
| type: 'continuous', |
| min: -1, |
| max: 1, |
| dimension: 2, |
| calculable: true, |
| orient: 'horizontal', |
| top: 5, |
| left: 'center', |
| inRange: { |
| color: [ |
| '#313695', |
| '#4575b4', |
| '#74add1', |
| '#abd9e9', |
| '#e0f3f8', |
| '#ffffbf', |
| '#fee090', |
| '#fdae61', |
| '#f46d43', |
| '#d73027', |
| '#a50026' |
| ] |
| } |
| }, |
| series: { |
| type: 'heatmap', |
| coordinateSystem: 'matrix', |
| data, |
| label: { |
| show: true, |
| formatter: params => params.value[2].toFixed(2) |
| } |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main2', { |
| title: [ |
| 'Correlation Matrix (Heatmap)' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| <script> |
| require([ |
| 'echarts', |
| ], function (echarts) { |
| const xData = []; |
| const yData = []; |
| for (let i = 0; i < 5; ++i) { |
| const children = []; |
| for (let j = 0; j < 5; ++j) { |
| children.push(i * 5 + j + 1 + ''); |
| } |
| xData.push({ |
| value: 'X' + (i + 1), |
| children |
| }); |
| yData.push({ |
| value: 'Y' + (i + 1), |
| children |
| }); |
| } |
| |
| const data = []; |
| const size = 25; |
| let temp = {}; |
| |
| for (let i = 1; i <= size; ++i) { |
| for (let j = 1; j <= size; ++j) { |
| let base = i === j ? 100 : 20; |
| const iGroup = Math.ceil(i / 5); |
| const jGroup = Math.ceil(j / 5); |
| base += (3 - Math.abs(iGroup - jGroup)) * 35; |
| if (i % 5 === j % 5) { |
| base += 20; |
| } |
| if (Math.random() > 0.9) { |
| base += Math.random() * 40; |
| } |
| |
| if (i > j) { |
| // Use the previously calculated value to ensure symmetry |
| data.push([ |
| i + '', |
| j + '', |
| temp[j + '_' + i] |
| ]); |
| } else { |
| // Calculate a new value and save it for future use |
| let value = (Math.random() * 0.5 + 0.5) * base; |
| data.push([ |
| i + '', |
| j + '', |
| value |
| ]); |
| temp[i + '_' + j] = value; |
| } |
| } |
| } |
| |
| const option = { |
| matrix: { |
| x: { |
| data: xData, |
| // show: false |
| }, |
| y: { |
| data: yData, |
| // show: false |
| }, |
| width: 500, |
| height: 500, |
| left: (window.innerWidth - 500) / 2 |
| }, |
| tooltip: { |
| show: true, |
| valueFormatter: value => Math.round(value) |
| }, |
| visualMap: { |
| type: 'continuous', |
| min: 15, |
| max: 120, |
| dimension: 2, |
| calculable: true, |
| orient: 'horizontal', |
| top: 5, |
| left: 'center', |
| inRange: { |
| color: [ |
| '#313695', |
| '#4575b4', |
| '#74add1', |
| '#abd9e9', |
| '#e0f3f8', |
| '#ffffbf', |
| '#fee090', |
| '#fdae61', |
| '#f46d43', |
| '#d73027', |
| '#a50026' |
| ] |
| } |
| }, |
| series: { |
| type: 'heatmap', |
| coordinateSystem: 'matrix', |
| data |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main3', { |
| title: [ |
| 'Covariance Matrix' |
| ], |
| option: option, |
| height: 600 |
| }); |
| }); |
| </script> |
| |
| <script> |
| require([ |
| 'echarts', |
| ], function (echarts) { |
| const colors = { |
| red: '#f88', |
| green: '#8f8', |
| blue: '#8bf', |
| yellow: '#ff8', |
| } |
| const option = { |
| matrix: { |
| x: { |
| data: Array.from({length: 19}, (_, i) => i + 1 + ''), |
| label: { |
| show: false |
| }, |
| itemStyle: { |
| borderWidth: 0 |
| }, |
| dividerLineStyle: { |
| width: 0, |
| }, |
| }, |
| y: { |
| data: Array.from({length: 10}, (_, i) => i + 1 + ''), |
| label: { |
| show: false |
| }, |
| itemStyle: { |
| borderWidth: 0 |
| }, |
| dividerLineStyle: { |
| width: 0, |
| }, |
| }, |
| left: 'center', |
| width: 900, |
| backgroundStyle: { |
| borderWidth: 0 |
| }, |
| body: { |
| itemStyle: { |
| borderWidth: 0 |
| } |
| }, |
| }, |
| series: { |
| type: 'custom', |
| coordinateSystem: 'matrix', |
| data: [ |
| ['1', '1', '1', 'H', colors.red], |
| ['19', '1', '2', 'He', colors.red], |
| ['1', '2', '3', 'Li', colors.red], |
| ['2', '2', '4', 'Be', colors.red], |
| ['14', '2', '5', 'B', colors.yellow], |
| ['15', '2', '6', 'C', colors.yellow], |
| ['16', '2', '7', 'N', colors.yellow], |
| ['17', '2', '8', 'O', colors.yellow], |
| ['18', '2', '9', 'F', colors.yellow], |
| ['19', '2', '10', 'Ne', colors.yellow], |
| ['1', '3', '11', 'Na', colors.red], |
| ['2', '3', '12', 'Mg', colors.red], |
| ['14', '3', '13', 'Al', colors.yellow], |
| ['15', '3', '14', 'Si', colors.yellow], |
| ['16', '3', '15', 'P', colors.yellow], |
| ['17', '3', '16', 'S', colors.yellow], |
| ['18', '3', '17', 'Cl', colors.yellow], |
| ['19', '3', '18', 'Ar', colors.yellow], |
| ['1', '4', '19', 'K', colors.red], |
| ['2', '4', '20', 'Ca', colors.red], |
| ['4', '4', '21', 'Sc', colors.blue], |
| ['5', '4', '22', 'Ti', colors.blue], |
| ['6', '4', '23', 'V', colors.blue], |
| ['7', '4', '24', 'Cr', colors.blue], |
| ['8', '4', '25', 'Mn', colors.blue], |
| ['9', '4', '26', 'Fe', colors.blue], |
| ['10', '4', '27', 'Co', colors.blue], |
| ['11', '4', '28', 'Ni', colors.blue], |
| ['12', '4', '29', 'Cu', colors.blue], |
| ['13', '4', '30', 'Zn', colors.blue], |
| ['14', '4', '31', 'Ga', colors.yellow], |
| ['15', '4', '32', 'Ge', colors.yellow], |
| ['16', '4', '33', 'As', colors.yellow], |
| ['17', '4', '34', 'Se', colors.yellow], |
| ['18', '4', '35', 'Br', colors.yellow], |
| ['19', '4', '36', 'Kr', colors.yellow], |
| ['1', '5', '37', 'Rb', colors.red], |
| ['2', '5', '38', 'Sr', colors.red], |
| ['4', '5', '39', 'Y', colors.blue], |
| ['5', '5', '40', 'Zr', colors.blue], |
| ['6', '5', '41', 'Nb', colors.blue], |
| ['7', '5', '42', 'Mo', colors.blue], |
| ['8', '5', '43', 'Tc', colors.blue], |
| ['9', '5', '44', 'Ru', colors.blue], |
| ['10', '5', '45', 'Rh', colors.blue], |
| ['11', '5', '46', 'Pd', colors.blue], |
| ['12', '5', '47', 'Ag', colors.blue], |
| ['13', '5', '48', 'Cd', colors.blue], |
| ['14', '5', '49', 'In', colors.yellow], |
| ['15', '5', '50', 'Sn', colors.yellow], |
| ['16', '5', '51', 'Sb', colors.yellow], |
| ['17', '5', '52', 'Te', colors.yellow], |
| ['18', '5', '53', 'I', colors.yellow], |
| ['19', '5', '54', 'Xe', colors.yellow], |
| ['1', '6', '55', 'Cs', colors.red], |
| ['2', '6', '56', 'Ba', colors.red], |
| ['4', '9', '57', 'La', colors.green], |
| ['5', '9', '58', 'Ce', colors.green], |
| ['6', '9', '59', 'Pr', colors.green], |
| ['7', '9', '60', 'Nd', colors.green], |
| ['8', '9', '61', 'Pm', colors.green], |
| ['9', '9', '62', 'Sm', colors.green], |
| ['10', '9', '63', 'Eu', colors.green], |
| ['11', '9', '64', 'Gd', colors.green], |
| ['12', '9', '65', 'Tb', colors.green], |
| ['13', '9', '66', 'Dy', colors.green], |
| ['14', '9', '67', 'Ho', colors.green], |
| ['15', '9', '68', 'Er', colors.green], |
| ['16', '9', '69', 'Tm', colors.green], |
| ['17', '9', '70', 'Yb', colors.green], |
| ['4', '6', '71', 'Lu', colors.blue], |
| ['5', '6', '72', 'Hf', colors.blue], |
| ['6', '6', '73', 'Ta', colors.blue], |
| ['7', '6', '74', 'W', colors.blue], |
| ['8', '6', '75', 'Re', colors.blue], |
| ['9', '6', '76', 'Os', colors.blue], |
| ['10', '6', '77', 'Ir', colors.blue], |
| ['11', '6', '78', 'Pt', colors.blue], |
| ['12', '6', '79', 'Au', colors.blue], |
| ['13', '6', '80', 'Hg', colors.blue], |
| ['14', '6', '81', 'Tl', colors.yellow], |
| ['15', '6', '82', 'Pb', colors.yellow], |
| ['16', '6', '83', 'Bi', colors.yellow], |
| ['17', '6', '84', 'Po', colors.yellow], |
| ['18', '6', '85', 'At', colors.yellow], |
| ['19', '6', '86', 'Rn', colors.yellow], |
| ['1', '7', '87', 'Fr', colors.red], |
| ['2', '7', '88', 'Ra', colors.red], |
| ['4', '10', '89', 'Ac', colors.green], |
| ['5', '10', '90', 'Th', colors.green], |
| ['6', '10', '91', 'Pa', colors.green], |
| ['7', '10', '92', 'U', colors.green], |
| ['8', '10', '93', 'Np', colors.green], |
| ['9', '10', '94', 'Pu', colors.green], |
| ['10', '10', '95', 'Am', colors.green], |
| ['11', '10', '96', 'Cm', colors.green], |
| ['12', '10', '97', 'Bk', colors.green], |
| ['13', '10', '98', 'Cf', colors.green], |
| ['14', '10', '99', 'Es', colors.green], |
| ['15', '10', '100', 'Fm', colors.green], |
| ['16', '10', '101', 'Md', colors.green], |
| ['17', '10', '102', 'No', colors.green], |
| ['4', '7', '103', 'Lr', colors.blue], |
| ['5', '7', '104', 'Rf', colors.blue], |
| ['6', '7', '105', 'Db', colors.blue], |
| ['7', '7', '106', 'Sg', colors.blue], |
| ['8', '7', '107', 'Bh', colors.blue], |
| ['9', '7', '108', 'Hs', colors.blue], |
| ['10', '7', '109', 'Mt', colors.blue], |
| ['11', '7', '110', 'Ds', colors.blue], |
| ['12', '7', '111', 'Rg', colors.blue], |
| ['13', '7', '112', 'Cn', colors.blue], |
| ['14', '7', '113', 'Nh', colors.yellow], |
| ['15', '7', '114', 'Fl', colors.yellow], |
| ['16', '7', '115', 'Mc', colors.yellow], |
| ['17', '7', '116', 'Lv', colors.yellow], |
| ['18', '7', '117', 'Ts', colors.yellow], |
| ['19', '7', '118', 'Og', colors.yellow], |
| |
| ['3', '6', null, 'La~Yb', colors.green], |
| ['3', '7', null, 'Ac~No', colors.green], |
| ], |
| label: { |
| show: true, |
| formatter: params => { |
| if (params.value[2] == null) { |
| return '{small|' + params.value[3] + '}'; |
| } |
| return params.value[2] + '\n' + params.value[3]; |
| }, |
| rich: { |
| small: { |
| fontSize: 12, |
| color: '#777' |
| } |
| }, |
| textStyle: { |
| fontSize: 14, |
| color: '#555', |
| align: 'center' |
| } |
| }, |
| renderItem: function (params, api) { |
| const x = api.value(0); |
| const y = api.value(1); |
| const rect = api.layout([x, y]).rect; |
| const isElement = !isNaN(api.value(2)); |
| const margin = 2; |
| return { |
| type: 'rect', |
| shape: { |
| x: rect.x + margin, |
| y: rect.y + margin, |
| width: rect.width - margin * 2, |
| height: rect.height - margin * 2 |
| }, |
| style: api.style({ |
| fill: api.value(4), |
| stroke: '#aaa', |
| lineWidth: isElement ? 1 : 0, |
| opacity: isElement ? 1 : 0.5 |
| }), |
| } |
| } |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main4', { |
| title: [ |
| 'Periodic Table' |
| ], |
| option: option, |
| height: 600 |
| }); |
| |
| if (!chart) { |
| return; |
| } |
| |
| const elements = [ |
| ['2', '9', 'Lanthanides', 20], |
| ['2', '10', 'Actinides', 20], |
| ['1', '1', 'Nonmetals', -70], |
| ['1', '2', 'Metals', -70], |
| ['19', '1', 'Noble gases', 0, -40], |
| ['9', '3', 'Transition metals\n(somtimes excl. group 12)', -25], |
| ['1', '8', 's-block\n(incl. He)', 20, -3], |
| ['3', '8', 'f-block', 0, -10], |
| ['9', '8', 'd-block', -25, -10], |
| ['17', '8', 'p-block (excl. He)', -25, -10], |
| ['16', '1', 'Some elements near\nthe dashed staircase are\nsometimes called metalloids'] |
| ].map(row => { |
| const center = chart.convertToPixel({ |
| matrixIndex: 0 |
| }, row.slice(0, 2)); |
| return { |
| type: 'text', |
| style: { |
| text: row[2], |
| fill: '#333', |
| font: 'italic bold 14px sans-serif', |
| textAlign: 'center', |
| textVerticalAlign: 'middle' |
| }, |
| x: center[0] + (row[3] || 0), |
| y: center[1] + (row[4] || 0), |
| }; |
| }); |
| |
| chart.setOption({ |
| graphic: { |
| elements |
| } |
| }); |
| }); |
| </script> |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| ], function (echarts) { |
| |
| const _matrixDimensionData = { |
| x: [ |
| 'Mon', 'Tue', 'Wed', 'Thu', 'Fri' |
| ], |
| y: [ |
| '8:00 - 10:00', |
| '10:00 - 12:00', |
| '12:00 - 14:00', |
| '14:00 - 16:00', |
| '16:00 - 18:00', |
| '18:00 - 20:00', |
| ] |
| }; |
| const _yBreakTimeIndex = 2; // '12:00 - 14:00', |
| |
| function eachMatrixCell(cb) { |
| _matrixDimensionData.y.forEach((yval, yidx) => { |
| if (yidx === _yBreakTimeIndex) { |
| return; |
| } |
| _matrixDimensionData.x.forEach((xval, xidx) => { |
| cb(xval, yval, xidx, yidx); |
| }); |
| }); |
| } |
| |
| function generateSeriesData(dayCount) { |
| const dataSource = {}; |
| let allDataMax = 0; |
| let allDataMin = 0; |
| |
| eachMatrixCell((xval, yval, xidx, yidx) => { |
| const dayStart = new Date('2025-05-05T00:00:00.000Z'); // Monday |
| dayStart.setDate(xidx + 5); |
| const timeStart = dayStart.getTime(); |
| const sevenDay = 7 * 1000 * 3600 * 24; |
| const cellData = dataSource[makeId(xidx, yidx)] = []; |
| let lastVal = +(Math.random() * 300).toFixed(0); |
| |
| let turnCount = null; |
| let sign = -1; |
| for (let idx = 0; idx < dayCount; idx++) { |
| |
| if (turnCount == null || idx >= turnCount) { |
| turnCount = idx + Math.round(dayCount / 4 * ((Math.random() - 0.5) * 0.1)); |
| sign = -sign; |
| } |
| const deltaMag = 50; |
| const delta = +(Math.random() * deltaMag - deltaMag / 2 + sign * deltaMag / 3).toFixed(0); |
| const val = Math.max(0, lastVal += delta); |
| const xTime = timeStart + idx * sevenDay; |
| const dataXVal = echarts.time.format(xTime, '{yyyy}-{MM}-{dd}'); |
| cellData.push([dataXVal, val]); |
| allDataMax = Math.max(val, allDataMax); |
| } |
| }); |
| |
| const {axisMin, axisMax} = uniformAxisMinMax([allDataMin, allDataMax]); |
| return {dataSource, axisMax, axisMin}; |
| } |
| |
| function uniformAxisMinMax(dataExtent) { |
| if (dataExtent[0] > dataExtent[1]) { |
| dataExtent = dataExtent.slice(); |
| dataExtent.reverse(); |
| } |
| function getMinMax(idx) { |
| const methods = ['floor', 'ceil']; |
| const exponent = echarts.number.quantityExponent(dataExtent[idx]); |
| const multiplier = Math.pow(10, exponent); |
| return Math[methods[idx]](dataExtent[idx] / multiplier) * multiplier; |
| } |
| return { |
| axisMin: getMinMax(0), |
| axisMax: getMinMax(1), |
| }; |
| } |
| |
| const _data = generateSeriesData(365); |
| |
| function makeId(xidx, yidx) { |
| return `${xidx}|${yidx}`; |
| } |
| |
| const option = { |
| matrix: { |
| x: { |
| data: _matrixDimensionData.x, |
| label: { |
| fontSize: 18, |
| color: '#555' |
| }, |
| }, |
| y: { |
| data: _matrixDimensionData.y, |
| label: { |
| fontSize: 16, |
| color: '#777' |
| }, |
| }, |
| corner: { |
| data: [{ |
| coord: [-1, -1], |
| value: 'Time', |
| }], |
| label: { |
| fontSize: 16, |
| color: '#777' |
| }, |
| }, |
| body: { |
| data: [{ |
| coord: [null, _yBreakTimeIndex], |
| mergeCells: true, |
| value: 'Break', |
| label: { |
| color: '#999', |
| fontSize: 16, |
| } |
| }], |
| }, |
| top: 30, |
| bottom: 80, |
| width: '80%', |
| left: 'center' |
| }, |
| tooltip: { |
| trigger: 'axis', |
| }, |
| grid: (function () { |
| const optionList = []; |
| eachMatrixCell((xval, yval, xidx, yidx) => { |
| optionList.push({ |
| id: makeId(xidx, yidx), |
| coordinateSystem: 'matrix', |
| coord: [xval, yval], |
| top: 10, |
| bottom: 10, |
| left: 'center', |
| width: '90%', |
| containLabel: true, |
| }); |
| }); |
| return optionList; |
| })(), |
| xAxis: (function () { |
| const optionList = []; |
| eachMatrixCell((xval, yval, xidx, yidx) => { |
| optionList.push({ |
| type: 'category', |
| id: makeId(xidx, yidx), |
| gridId: makeId(xidx, yidx), |
| scale: true, |
| axisTick: {show: false}, |
| axisLabel: {show: false}, |
| axisLine: {show: false}, |
| splitLine: {show: false}, |
| }); |
| }); |
| return optionList; |
| })(), |
| yAxis: (function () { |
| const optionList = []; |
| eachMatrixCell((xval, yval, xidx, yidx) => { |
| optionList.push({ |
| id: makeId(xidx, yidx), |
| gridId: makeId(xidx, yidx), |
| // interval: _data.axisMax - _data.axisMin, |
| interval: Number.MAX_SAFE_INTEGER, |
| // min: _data.axisMin, |
| // max: _data.axisMax, |
| scale: true, |
| axisLabel: { |
| showMaxLabel: true, |
| fontSize: 9, |
| }, |
| axisLine: {show: false}, |
| axisTick: {show: false}, |
| }); |
| }); |
| return optionList; |
| })(), |
| dataZoom: { |
| type: 'slider', |
| xAxisIndex: 'all', |
| left: '10%', |
| right: '10%', |
| bottom: 30, |
| height: 30, |
| throttle: 120, |
| }, |
| series: (function () { |
| const optionList = []; |
| eachMatrixCell((xval, yval, xidx, yidx) => { |
| optionList.push({ |
| xAxisId: makeId(xidx, yidx), |
| yAxisId: makeId(xidx, yidx), |
| type: 'line', |
| symbol: 'none', |
| lineStyle: { |
| lineWidth: 1, |
| }, |
| data: _data.dataSource[makeId(xidx, yidx)], |
| }); |
| }); |
| return optionList; |
| })(), |
| }; |
| |
| var chart = testHelper.create(echarts, 'main_tiny_cartesians', { |
| title: [ |
| 'Cartesians in matrix' |
| ], |
| option: option, |
| height: 500, |
| }); |
| }); |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| ], function (echarts) { |
| |
| const _contentDefList = [{ |
| option: { |
| title: { |
| id: 'header_1', |
| text: 'Header section', |
| textStyle: {fontSize: 14}, |
| left: 'center', |
| top: 15, |
| }, |
| xAxis: { |
| type: 'time', |
| id: 'header_1', |
| gridId: 'header_1', |
| }, |
| yAxis: { |
| id: 'header_1', |
| gridId: 'header_1', |
| }, |
| grid: { |
| id: 'header_1', |
| containLabel: true, |
| top: 50, |
| bottom: 10, |
| left: 10, |
| right: 10, |
| }, |
| series: { |
| type: 'line', |
| id: 'header_1', |
| xAxisId: 'header_1', |
| yAxisId: 'header_1', |
| symbol: 'none', |
| data: generateSingleSeriesData(100), |
| }, |
| }, |
| }, { |
| option: { |
| title: { |
| id: 'sidebar_1', |
| text: 'Sidebar section', |
| textStyle: {fontSize: 14}, |
| left: 'center', |
| top: 15, |
| }, |
| xAxis: { |
| id: 'sidebar_1', |
| gridId: 'sidebar_1', |
| axisLabel: { |
| hideOverlap: true, |
| }, |
| }, |
| yAxis: { |
| type: 'time', |
| id: 'sidebar_1', |
| gridId: 'sidebar_1', |
| axisLabel: { |
| hideOverlap: true, |
| }, |
| }, |
| grid: { |
| id: 'sidebar_1', |
| top: 50, |
| bottom: 30, |
| left: 40, |
| right: 30, |
| }, |
| series: { |
| type: 'bar', |
| id: 'sidebar_1', |
| xAxisId: 'sidebar_1', |
| yAxisId: 'sidebar_1', |
| data: generateSingleSeriesData(10, true), |
| }, |
| }, |
| }, { |
| option: { |
| title: { |
| id: 'main_content_area_1', |
| text: 'Main Content Area', |
| textStyle: {fontSize: 14}, |
| left: 'center', |
| top: 15, |
| }, |
| xAxis: { |
| type: 'time', |
| id: 'main_content_area_1', |
| gridId: 'main_content_area_1', |
| }, |
| yAxis: { |
| id: 'main_content_area_1', |
| gridId: 'main_content_area_1' |
| }, |
| grid: { |
| id: 'main_content_area_1', |
| containLabel: true, |
| top: 50, |
| bottom: 10, |
| left: 10, |
| right: 10, |
| }, |
| series: { |
| type: 'line', |
| id: 'main_content_area_1', |
| xAxisId: 'main_content_area_1', |
| yAxisId: 'main_content_area_1', |
| symbol: 'none', |
| data: generateSingleSeriesData(100), |
| }, |
| }, |
| }, { |
| option: { |
| title: { |
| id: 'footer_1', |
| text: 'Footer section', |
| textStyle: {fontSize: 14}, |
| left: 'center', |
| top: 15, |
| }, |
| xAxis: { |
| type: 'time', |
| id: 'footer_1', |
| gridId: 'footer_1', |
| }, |
| yAxis: { |
| id: 'footer_1', |
| gridId: 'footer_1' |
| }, |
| grid: { |
| id: 'footer_1', |
| containLabel: true, |
| top: 50, |
| bottom: 10, |
| left: 10, |
| right: 10, |
| }, |
| series: { |
| type: 'bar', |
| id: 'footer_1', |
| xAxisId: 'footer_1', |
| yAxisId: 'footer_1', |
| data: generateSingleSeriesData(10), |
| }, |
| }, |
| }]; |
| |
| const _option = { |
| matrix: { |
| x: {show: false, data: []}, |
| y: {show: false, data: []}, |
| body: { |
| itemStyle: {borderColor: 'none'} |
| }, |
| top: 0, |
| bottom: 0, |
| left: 0, |
| right: 0, |
| }, |
| tooltip: { |
| trigger: 'axis', |
| }, |
| |
| media: (function () { |
| const mediaList = [{ |
| query: {maxWidth: 500}, |
| matrix: { |
| x: {data: Array(1).fill(null)}, |
| y: {data: Array(4).fill(null)}, |
| }, |
| coordList: [{ |
| id: 'header_1', |
| coord: [0, 0], |
| }, { |
| id: 'sidebar_1', |
| coord: [0, 1], |
| }, { |
| id: 'main_content_area_1', |
| coord: [0, 2], |
| }, { |
| id: 'footer_1', |
| coord: [0, 3], |
| }] |
| }, { |
| // default with no query, |
| matrix: { |
| x: {data: Array(4).fill(null)}, |
| y: {data: Array(3).fill(null)}, |
| }, |
| coordList: [{ |
| id: 'header_1', |
| coord: [[0, 3], 0], |
| }, { |
| id: 'sidebar_1', |
| coord: [0, [1, 2]], |
| }, { |
| id: 'main_content_area_1', |
| coord: [[1, 3], 1], |
| }, { |
| id: 'footer_1', |
| coord: [[1, 3], 2], |
| }] |
| }]; |
| |
| const mediaOption = mediaList.map(({query, matrix, coordList}) => ({ |
| query, |
| option: { |
| matrix: matrix, |
| title: coordList.map(({id, coord}) => ({id, coord, coordinateSystem: 'matrix'})), |
| grid: coordList.map(({id, coord}) => ({id, coord, coordinateSystem: 'matrix'})), |
| }, |
| })); |
| console.log('mediaOption', mediaOption); |
| return mediaOption; |
| })(), |
| |
| // Other components and series: |
| ...(function () { |
| const partialOption = {}; |
| for (const def of _contentDefList) { |
| if (!def.option) { |
| continue; |
| } |
| Object.keys(def.option).forEach(componentName => { |
| partialOption[componentName] = partialOption[componentName] || []; |
| if (Array.isArray(def.option[componentName])) { |
| partialOption[componentName] = |
| partialOption[componentName].concat(def.option[componentName]); |
| } |
| else { |
| partialOption[componentName].push(def.option[componentName]); |
| } |
| }) |
| } |
| return partialOption; |
| })() |
| }; // End of _option |
| |
| console.log(_option); |
| |
| function generateSingleSeriesData(dayCount, inverseXY) { |
| const dayStart = new Date('2025-05-05T00:00:00.000Z'); // Monday |
| const timeStart = dayStart.getTime(); |
| const sevenDay = 7 * 1000 * 3600 * 24; |
| const seriesData = []; |
| let lastVal = +(Math.random() * 300).toFixed(0); |
| |
| let turnCount = null; |
| let sign = -1; |
| for (let idx = 0; idx < dayCount; idx++) { |
| if (turnCount == null || idx >= turnCount) { |
| turnCount = idx + Math.round(dayCount / 4 * ((Math.random() - 0.5) * 0.1)); |
| sign = -sign; |
| } |
| const deltaMag = 50; |
| const delta = +(Math.random() * deltaMag - deltaMag / 2 + sign * deltaMag / 3).toFixed(0); |
| const val = Math.max(0, lastVal += delta); |
| const xTime = timeStart + idx * sevenDay; |
| const dataXVal = echarts.time.format(xTime, '{yyyy}-{MM}-{dd}'); |
| const item = [dataXVal, val]; |
| if (inverseXY) { |
| item.reverse(); |
| } |
| seriesData.push(item); |
| } |
| |
| return seriesData; |
| } |
| |
| var chart = testHelper.create(echarts, 'main_grid_layout', { |
| title: [ |
| 'Responsive grid layout', |
| 'Using media query; resize to change the layout', |
| ], |
| option: _option, |
| width: 700, |
| height: 400, |
| inputsStyle: 'compact', |
| draggable: true, |
| inputs: [{ |
| type: 'select', |
| text: 'show frame lines:', |
| values: [false, true], |
| onchange() { |
| const shouldShow = this.value; |
| chart.setOption({ |
| matrix: { |
| body: {itemStyle: {borderColor: shouldShow ? '#ccc' : 'none'}} |
| } |
| }); |
| } |
| }] |
| }); |
| }); |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| </body> |
| </html> |
| |
