| <!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="main0-1"></div> | |
| <div id="main0-2"></div> | |
| <div id="main-dark"></div> | |
| <div id="main1"></div> | |
| <div id="main2"></div> | |
| <div id="main4"></div> | |
| <div id="main_collect"></div> | |
| <div id="main_series_data_use_ordinal_number"></div> | |
| <div id="main_x_y_length"></div> | |
| <div id="main_events_on_text"></div> | |
| <script> | |
| require([ | |
| 'echarts', | |
| ], function (echarts) { | |
| var option; | |
| option = { | |
| matrix: { | |
| x: { | |
| data: [{ | |
| value: 'A', | |
| children: ['A1', 'A2', { | |
| value: 'A3', | |
| children: ['A31', 'A32'] | |
| }] | |
| }], | |
| }, | |
| y: { | |
| data: ['U', 'V', 'W'] | |
| }, | |
| body: { | |
| itemStyle: { | |
| // borderColor: '#333', | |
| }, | |
| data: [{ | |
| coord: [['A2', 'A31', 'A32'], 'V'], | |
| mergeCells: true, | |
| }, { | |
| coord: [null, 'W'], | |
| clamp: true, | |
| mergeCells: true, | |
| }] | |
| } | |
| }, | |
| textStyle: { | |
| fontSize: 25, | |
| color: 'red' | |
| }, | |
| visualMap: { | |
| type: 'continuous', | |
| min: 0, | |
| max: 80, | |
| top: 'middle', | |
| dimension: 2, | |
| color: ['rgba(100,204,105,0.4)', 'rgba(3,4,5,0.4)'], | |
| calculable: true | |
| }, | |
| series: { | |
| type: 'heatmap', | |
| coordinateSystem: 'matrix', | |
| itemStyle: { | |
| borderRadius: 10, | |
| }, | |
| data: [ | |
| ['A1', 'U', 10], ['A1', 'V', 200], ['A2', 'U', 300], | |
| ['A2', 'V', 40], ['A31', 'U', 50], ['A3', 'V', 60], ['A1', 'W', 80] | |
| ], | |
| label: { | |
| show: true | |
| } | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'main0', { | |
| title: [ | |
| 'Heatmap with Matrix' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| ], function (echarts) { | |
| var option; | |
| option = { | |
| matrix: { | |
| x: { | |
| show: false, | |
| data: [{ | |
| value: 'A', | |
| children: ['A1', 'A2', { | |
| value: 'A3', | |
| children: ['A31', 'A32'] | |
| }] | |
| }] | |
| }, | |
| y: { | |
| show: false, | |
| data: ['U', 'V'] | |
| } | |
| }, | |
| visualMap: { | |
| type: 'continuous', | |
| min: 0, | |
| max: 80, | |
| top: 'middle', | |
| dimension: 2, | |
| calculable: true | |
| }, | |
| series: { | |
| type: 'heatmap', | |
| coordinateSystem: 'matrix', | |
| data: [ | |
| ['A1', 'U', 10], ['A1', 'V', 20], ['A2', 'U', 30], | |
| ['A2', 'V', 40], ['A31', 'U', 50], ['A3', 'V', 60] | |
| ], | |
| label: { | |
| show: true | |
| } | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'main0-1', { | |
| title: [ | |
| 'no header', | |
| 'x.show: false, y.show: false' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| // 'map/js/china', | |
| // './data/nutrients.json' | |
| ], function (echarts) { | |
| var option; | |
| option = { | |
| dataset: { | |
| source: [ | |
| ['A1', 'U', 10], ['A1', 'V', 20], ['A2', 'U', 30], | |
| ['A2', 'V', 40], ['A31', 'U', 50], ['A3', 'V', 60] | |
| ] | |
| }, | |
| matrix: { | |
| x: { | |
| data: [{ | |
| value: 'A', | |
| children: ['A1', 'A2', { | |
| value: 'A3', | |
| children: ['A31', 'A32'] | |
| }] | |
| }] | |
| }, | |
| y: { | |
| data: ['U', 'V'] | |
| } | |
| }, | |
| visualMap: { | |
| type: 'continuous', | |
| min: 0, | |
| max: 80, | |
| top: 'middle', | |
| dimension: 2, | |
| calculable: true | |
| }, | |
| series: { | |
| type: 'heatmap', | |
| coordinateSystem: 'matrix', | |
| label: { | |
| show: true | |
| } | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'main0-2', { | |
| title: [ | |
| 'Heatmap with Matrix (dataset)' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| // 'map/js/china', | |
| // './data/nutrients.json' | |
| ], function (echarts) { | |
| var option; | |
| option = { | |
| dataset: { | |
| source: [] | |
| }, | |
| matrix: { | |
| x: { | |
| data: [{ | |
| value: 'A', | |
| children: ['A1', 'A2', { | |
| value: 'A3', | |
| children: ['A31', 'A32'] | |
| }] | |
| }] | |
| }, | |
| y: { | |
| data: ['U', 'V'] | |
| } | |
| }, | |
| visualMap: { | |
| type: 'continuous', | |
| min: 0, | |
| max: 80, | |
| top: 'middle', | |
| dimension: 2, | |
| calculable: true | |
| }, | |
| series: { | |
| type: 'heatmap', | |
| coordinateSystem: 'matrix', | |
| label: { | |
| show: true | |
| } | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'main-dark', { | |
| title: [ | |
| 'Matrix with darkMode' | |
| ], | |
| option: option, | |
| theme: 'dark' | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| // 'map/js/china', | |
| // './data/nutrients.json' | |
| ], function (echarts) { | |
| var option; | |
| option = { | |
| matrix: { | |
| x: { | |
| data: [{ | |
| value: 'A', | |
| children: ['A1', 'A2', { | |
| value: 'A3', | |
| children: ['A31', 'A32'] | |
| }] | |
| }] | |
| }, | |
| y: { | |
| data: ['U', 'V'] | |
| } | |
| }, | |
| series: [{ | |
| type: 'pie', | |
| coordinateSystem: 'matrix', | |
| center: ['A1', 'U'], | |
| radius: 18, | |
| data: [ | |
| { | |
| value: 12, | |
| name: 'x' | |
| }, { | |
| value: 24, | |
| name: 'y' | |
| }, { | |
| value: 23, | |
| name: 'z' | |
| } | |
| ], | |
| label: { | |
| show: true | |
| } | |
| }, { | |
| type: 'pie', | |
| coordinateSystem: 'matrix', | |
| center: ['A31', 'V'], | |
| radius: 18, | |
| data: [ | |
| { | |
| value: 18, | |
| name: 'x' | |
| }, { | |
| value: 44, | |
| name: 'y' | |
| }, { | |
| value: 43, | |
| name: 'z' | |
| } | |
| ], | |
| label: { | |
| show: true | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main1', { | |
| title: [ | |
| 'Pie with Matrix' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| ], function (echarts) { | |
| var option; | |
| option = { | |
| matrix: { | |
| x: { | |
| data: [{ | |
| value: 'A', | |
| children: ['A1', 'A2', { | |
| value: 'A3', | |
| children: ['A31', 'A32'] | |
| }] | |
| }] | |
| }, | |
| y: { | |
| data: ['U', 'V'] | |
| }, | |
| body: { | |
| data: [{ | |
| // coord: ['A31', 'V'] | |
| coord: ['A3', 'V'], | |
| mergeCells: true, | |
| }] | |
| } | |
| }, | |
| series: [{ | |
| type: 'graph', | |
| coordinateSystem: 'matrix', | |
| edgeSymbol: ['none', 'arrow'], | |
| symbolSize: 30, | |
| links: [{ | |
| source: 0, | |
| target: 1 | |
| }, { | |
| source: 1, | |
| target: 2 | |
| }], | |
| data: [ | |
| ['A1', 'U', 10], ['A1', 'V', 20], ['A2', 'U', 30], | |
| ['A2', 'V', 40], ['A31', 'U', 50], ['A3', 'V', 60] | |
| ], | |
| label: { | |
| show: true, | |
| formatter: params => { | |
| return params.data[2]; | |
| } | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main2', { | |
| title: [ | |
| 'Graph with Matrix' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| ], function (echarts) { | |
| var option; | |
| option = { | |
| matrix: { | |
| x: { | |
| data: [{ | |
| value: 'A', | |
| children: ['A1', 'A2', { | |
| value: 'A3', | |
| children: ['A31', 'A32'] | |
| }] | |
| }] | |
| }, | |
| y: { | |
| data: ['U', 'V'] | |
| } | |
| }, | |
| series: [{ | |
| type: 'custom', | |
| coordinateSystem: 'matrix', | |
| data: [ | |
| ['A1', 'U', 89, '😄'], ['A31', 'V', 95, '😍'], ['A2', 'U', 45, '😠'] | |
| ], | |
| encode: { | |
| x: 0, | |
| y: 1, | |
| value: 2, | |
| label: 3 | |
| }, | |
| renderItem: function (params, api) { | |
| const x = api.value(0); | |
| const y = api.value(1); | |
| const rect = api.layout([x, y]).rect; | |
| const fontSize = 20; | |
| const padding = 10; | |
| const value = api.value(2); | |
| return { | |
| type: 'group', | |
| children: [{ | |
| type: 'rect', | |
| shape: { | |
| x: rect.x + padding, | |
| y: rect.y + padding, | |
| width: (rect.width - padding * 2) / 100 * value, | |
| height: rect.height - padding * 2 | |
| }, | |
| style: { | |
| fill: value > 90 ? 'green' | |
| : value > 60 ? 'orange' | |
| : 'red', | |
| } | |
| }, { | |
| type: 'text', | |
| style: { | |
| x: rect.x + (rect.width - padding * 2) / 100 * value - padding, | |
| y: rect.y + rect.height / 2 - fontSize / 2, | |
| text: api.value(3), | |
| fontSize: fontSize, | |
| textBaseline: 'middle', | |
| textAlign: 'center' | |
| } | |
| }, { | |
| type: 'text', | |
| style: { | |
| x: rect.x + 30, | |
| y: rect.y + rect.height / 2 - fontSize / 2, | |
| text: api.value(2), | |
| fontSize: fontSize, | |
| textBaseline: 'middle', | |
| textAlign: 'center', | |
| fill: 'white' | |
| } | |
| }] | |
| }; | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main4', { | |
| title: [ | |
| 'Custom series with Matrix' | |
| ], | |
| 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', 'amount', 1212, 'file', 2321, 'Q', 1412], | |
| ['2021-02-02', 'amount', 7181, 'file', 2114, 'Q', 1402], | |
| ['2021-02-03', 'amount', 2763, 'file', 4212, 'Q', 8172], | |
| ['2021-02-04', 'amount', 6122, 'file', 2942, 'Q', 6121], | |
| ['2021-02-05', 'amount', 4221, 'file', 3411, 'Q', 1987], | |
| ['2021-02-06', 'amount', 7221, 'file', 5121, 'Q', 1303], | |
| ] | |
| }, | |
| matrix: {}, | |
| 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, 'main_collect', { | |
| title: [ | |
| 'No matrix.x.data, matrix.y.data declared, collect form dataset.' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| ], function (echarts) { | |
| var option = { | |
| matrix: { | |
| x: {data: ['fruit', 'bread', 'milk']}, | |
| y: {data: ['good', 'medium', 'bad']}, | |
| }, | |
| series: { | |
| type: 'scatter', | |
| coordinateSystem: 'matrix', | |
| label: {show: true}, | |
| encode: {label: 2}, | |
| symbolSize: 20, | |
| data: [ | |
| [0, 0, 1223], | |
| [1, 0, 323], | |
| [2, 0, 142], | |
| [0, 1, 63], | |
| [1, 1, 91], | |
| [2, 1, 45], | |
| [0, 2, 55], | |
| [1, 2, 15], | |
| [2, 2, 53], | |
| ] | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'main_series_data_use_ordinal_number', { | |
| title: [ | |
| 'series.data specify ordinal number rather than text' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| ], function (echarts) { | |
| var option = { | |
| matrix: { | |
| x: {length: 4}, | |
| y: {length: 3}, | |
| }, | |
| series: { | |
| type: 'scatter', | |
| coordinateSystem: 'matrix', | |
| label: {show: true}, | |
| encode: {label: 2}, | |
| symbolSize: 20, | |
| data: [ | |
| [0, 0, 1223], | |
| [1, 0, 323], | |
| [2, 0, 142], | |
| [0, 1, 63], | |
| [1, 1, 91], | |
| [2, 1, 45], | |
| [0, 2, 55], | |
| [1, 2, 15], | |
| [2, 2, 53], | |
| ] | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'main_x_y_length', { | |
| title: [ | |
| 'matrix.x/y.length' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| ], function (echarts) { | |
| var option = { | |
| matrix: { | |
| x: {data: ['A', 'B', 'C']}, | |
| y: {data: ['U', 'V', 'W']}, | |
| body: { | |
| data: [ | |
| {coord: [0, 0], value: 1 }, | |
| {coord: [0, 1], value: 2 }, | |
| {coord: [0, 2], value: 3 }, | |
| {coord: [1, 0], value: 4 }, | |
| {coord: [1, 1], value: 5, itemStyle: {color: 'orange'} }, | |
| {coord: [1, 2], value: 6 }, | |
| {coord: [2, 0], value: null }, | |
| {coord: [2, 1], value: null }, | |
| {coord: [2, 2], value: null }, | |
| ], | |
| }, | |
| corner: { | |
| data: [ | |
| {coord: [-1, -1], value: 'Corner' }, | |
| ], | |
| }, | |
| triggerEvent: true, | |
| }, | |
| }; | |
| var chart = testHelper.create(echarts, 'main_events_on_text', { | |
| title: [ | |
| 'Events on matrix cell text' | |
| ], | |
| option: option, | |
| inputsStyle: 'compact', | |
| inputs: [{ | |
| type: 'select', | |
| text: 'matrix.body.silent:', | |
| values: [undefined, true, false], | |
| onchange: function (value) { | |
| chart.setOption({ | |
| matrix: { | |
| body: { | |
| silent: this.value, | |
| } | |
| } | |
| }); | |
| } | |
| }, { | |
| type: 'select', | |
| text: 'matrix.body.label.silent:', | |
| values: [undefined, true, false], | |
| onchange: function (value) { | |
| chart.setOption({ | |
| matrix: { | |
| body: { | |
| label: { | |
| silent: this.value, | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| }] | |
| }); | |
| // Create event display div | |
| var eventDisplay = document.createElement('div'); | |
| eventDisplay.style.cssText = 'padding: 8px'; | |
| eventDisplay.textContent = 'Click on any cell to see event data'; | |
| var chartContainer = document.getElementById('main_events_on_text'); | |
| chartContainer.parentNode.insertBefore(eventDisplay, chartContainer); | |
| chart.on('click', function (params) { | |
| var eventInfo = { | |
| componentType: params.componentType, | |
| coord: params.coord, | |
| name: params.name, | |
| targetType: params.targetType, | |
| }; | |
| eventDisplay.textContent = 'Clicked: ' + JSON.stringify(eventInfo); | |
| eventDisplay.style.color = ''; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |