diff --git a/public/data/thumb-dark/matrix-confusion.png b/public/data/thumb-dark/matrix-confusion.png new file mode 100644 index 00000000..fdde08ea Binary files /dev/null and b/public/data/thumb-dark/matrix-confusion.png differ diff --git a/public/data/thumb-dark/matrix-confusion.webp b/public/data/thumb-dark/matrix-confusion.webp new file mode 100644 index 00000000..253a475d Binary files /dev/null and b/public/data/thumb-dark/matrix-confusion.webp differ diff --git a/public/data/thumb-dark/matrix-correlation-heatmap.png b/public/data/thumb-dark/matrix-correlation-heatmap.png new file mode 100644 index 00000000..8f0614c4 Binary files /dev/null and b/public/data/thumb-dark/matrix-correlation-heatmap.png differ diff --git a/public/data/thumb-dark/matrix-correlation-heatmap.webp b/public/data/thumb-dark/matrix-correlation-heatmap.webp new file mode 100644 index 00000000..d6e26fdb Binary files /dev/null and b/public/data/thumb-dark/matrix-correlation-heatmap.webp differ diff --git a/public/data/thumb-dark/matrix-correlation-scatter.png b/public/data/thumb-dark/matrix-correlation-scatter.png new file mode 100644 index 00000000..2742dd4a Binary files /dev/null and b/public/data/thumb-dark/matrix-correlation-scatter.png differ diff --git a/public/data/thumb-dark/matrix-correlation-scatter.webp b/public/data/thumb-dark/matrix-correlation-scatter.webp new file mode 100644 index 00000000..154a8851 Binary files /dev/null and b/public/data/thumb-dark/matrix-correlation-scatter.webp differ diff --git a/public/data/thumb-dark/matrix-covariance.png b/public/data/thumb-dark/matrix-covariance.png new file mode 100644 index 00000000..fa58ff50 Binary files /dev/null and b/public/data/thumb-dark/matrix-covariance.png differ diff --git a/public/data/thumb-dark/matrix-covariance.webp b/public/data/thumb-dark/matrix-covariance.webp new file mode 100644 index 00000000..f1eab1df Binary files /dev/null and b/public/data/thumb-dark/matrix-covariance.webp differ diff --git a/public/data/thumb-dark/matrix-graph.png b/public/data/thumb-dark/matrix-graph.png new file mode 100644 index 00000000..da7058ec Binary files /dev/null and b/public/data/thumb-dark/matrix-graph.png differ diff --git a/public/data/thumb-dark/matrix-graph.webp b/public/data/thumb-dark/matrix-graph.webp new file mode 100644 index 00000000..0cdc48a6 Binary files /dev/null and b/public/data/thumb-dark/matrix-graph.webp differ diff --git a/public/data/thumb-dark/matrix-periodic-table.png b/public/data/thumb-dark/matrix-periodic-table.png new file mode 100644 index 00000000..86759b4c Binary files /dev/null and b/public/data/thumb-dark/matrix-periodic-table.png differ diff --git a/public/data/thumb-dark/matrix-periodic-table.webp b/public/data/thumb-dark/matrix-periodic-table.webp new file mode 100644 index 00000000..82f72ef8 Binary files /dev/null and b/public/data/thumb-dark/matrix-periodic-table.webp differ diff --git a/public/data/thumb-dark/matrix-pie.png b/public/data/thumb-dark/matrix-pie.png new file mode 100644 index 00000000..a6716127 Binary files /dev/null and b/public/data/thumb-dark/matrix-pie.png differ diff --git a/public/data/thumb-dark/matrix-pie.webp b/public/data/thumb-dark/matrix-pie.webp new file mode 100644 index 00000000..69ff86c8 Binary files /dev/null and b/public/data/thumb-dark/matrix-pie.webp differ diff --git a/public/data/thumb-dark/matrix-simple.png b/public/data/thumb-dark/matrix-simple.png new file mode 100644 index 00000000..2a5cabda Binary files /dev/null and b/public/data/thumb-dark/matrix-simple.png differ diff --git a/public/data/thumb-dark/matrix-simple.webp b/public/data/thumb-dark/matrix-simple.webp new file mode 100644 index 00000000..81c813ac Binary files /dev/null and b/public/data/thumb-dark/matrix-simple.webp differ diff --git a/public/data/thumb/matrix-confusion.png b/public/data/thumb/matrix-confusion.png new file mode 100644 index 00000000..03a88f8a Binary files /dev/null and b/public/data/thumb/matrix-confusion.png differ diff --git a/public/data/thumb/matrix-confusion.webp b/public/data/thumb/matrix-confusion.webp new file mode 100644 index 00000000..9d18cce6 Binary files /dev/null and b/public/data/thumb/matrix-confusion.webp differ diff --git a/public/data/thumb/matrix-correlation-heatmap.png b/public/data/thumb/matrix-correlation-heatmap.png new file mode 100644 index 00000000..b97e0837 Binary files /dev/null and b/public/data/thumb/matrix-correlation-heatmap.png differ diff --git a/public/data/thumb/matrix-correlation-heatmap.webp b/public/data/thumb/matrix-correlation-heatmap.webp new file mode 100644 index 00000000..4912be34 Binary files /dev/null and b/public/data/thumb/matrix-correlation-heatmap.webp differ diff --git a/public/data/thumb/matrix-correlation-scatter.png b/public/data/thumb/matrix-correlation-scatter.png new file mode 100644 index 00000000..d9c573d2 Binary files /dev/null and b/public/data/thumb/matrix-correlation-scatter.png differ diff --git a/public/data/thumb/matrix-correlation-scatter.webp b/public/data/thumb/matrix-correlation-scatter.webp new file mode 100644 index 00000000..781809b4 Binary files /dev/null and b/public/data/thumb/matrix-correlation-scatter.webp differ diff --git a/public/data/thumb/matrix-covariance.png b/public/data/thumb/matrix-covariance.png new file mode 100644 index 00000000..4598845b Binary files /dev/null and b/public/data/thumb/matrix-covariance.png differ diff --git a/public/data/thumb/matrix-covariance.webp b/public/data/thumb/matrix-covariance.webp new file mode 100644 index 00000000..70a03d06 Binary files /dev/null and b/public/data/thumb/matrix-covariance.webp differ diff --git a/public/data/thumb/matrix-graph.png b/public/data/thumb/matrix-graph.png new file mode 100644 index 00000000..bf23b488 Binary files /dev/null and b/public/data/thumb/matrix-graph.png differ diff --git a/public/data/thumb/matrix-graph.webp b/public/data/thumb/matrix-graph.webp new file mode 100644 index 00000000..630a8a15 Binary files /dev/null and b/public/data/thumb/matrix-graph.webp differ diff --git a/public/data/thumb/matrix-periodic-table.png b/public/data/thumb/matrix-periodic-table.png new file mode 100644 index 00000000..60cdbbae Binary files /dev/null and b/public/data/thumb/matrix-periodic-table.png differ diff --git a/public/data/thumb/matrix-periodic-table.webp b/public/data/thumb/matrix-periodic-table.webp new file mode 100644 index 00000000..42d3e129 Binary files /dev/null and b/public/data/thumb/matrix-periodic-table.webp differ diff --git a/public/data/thumb/matrix-pie.png b/public/data/thumb/matrix-pie.png new file mode 100644 index 00000000..498d7935 Binary files /dev/null and b/public/data/thumb/matrix-pie.png differ diff --git a/public/data/thumb/matrix-pie.webp b/public/data/thumb/matrix-pie.webp new file mode 100644 index 00000000..212537f6 Binary files /dev/null and b/public/data/thumb/matrix-pie.webp differ diff --git a/public/data/thumb/matrix-simple.png b/public/data/thumb/matrix-simple.png new file mode 100644 index 00000000..e3cfbe8f Binary files /dev/null and b/public/data/thumb/matrix-simple.png differ diff --git a/public/data/thumb/matrix-simple.webp b/public/data/thumb/matrix-simple.webp new file mode 100644 index 00000000..73a56ff4 Binary files /dev/null and b/public/data/thumb/matrix-simple.webp differ diff --git a/public/examples/ts/matrix-confusion.ts b/public/examples/ts/matrix-confusion.ts new file mode 100644 index 00000000..51714f1d --- /dev/null +++ b/public/examples/ts/matrix-confusion.ts @@ -0,0 +1,111 @@ +/* +title: Confusion Matrix +category: matrix +titleCN: 混淆矩阵 +difficulty: 3 +*/ + +const label = { + fontSize: 16, + color: '#555' +}; +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 center = api.coord([x, y]); + const size = api.size([x, y]); + return { + type: 'rect', + shape: { + x: center[0] - size[0] / 2, + y: center[1] - size[1] / 2, + width: size[0], + height: size[1] + }, + 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 + } + ] + } +}; diff --git a/public/examples/ts/matrix-correlation-heatmap.ts b/public/examples/ts/matrix-correlation-heatmap.ts new file mode 100644 index 00000000..ab8351f6 --- /dev/null +++ b/public/examples/ts/matrix-correlation-heatmap.ts @@ -0,0 +1,66 @@ +/* +title: Correlation Matrix (Heatmap) +category: matrix +titleCN: 相关矩阵（热力图） +difficulty: 2 +*/ + +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 + ]); + } + } +} + +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' + }, + series: { + type: 'heatmap', + coordinateSystem: 'matrix', + data, + label: { + show: true, + formatter: params => params.value[2].toFixed(2) + } + } +}; diff --git a/public/examples/ts/matrix-correlation-scatter.ts b/public/examples/ts/matrix-correlation-scatter.ts new file mode 100644 index 00000000..bee116a7 --- /dev/null +++ b/public/examples/ts/matrix-correlation-scatter.ts @@ -0,0 +1,80 @@ +/* +title: Correlation Matrix (Scatter) +category: matrix +titleCN: 相关矩阵（散点图） +difficulty: 2 +*/ + +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]); + } +} + +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) + } + } +}; + diff --git a/public/examples/ts/matrix-covariance.ts b/public/examples/ts/matrix-covariance.ts new file mode 100644 index 00000000..e61a8fc3 --- /dev/null +++ b/public/examples/ts/matrix-covariance.ts @@ -0,0 +1,110 @@ +/* +title: Covariance Matrix +category: matrix +titleCN: 协方差矩阵 +difficulty: 5 +*/ + +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; + } + } +} + +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 + } +}; diff --git a/public/examples/ts/matrix-graph.ts b/public/examples/ts/matrix-graph.ts new file mode 100644 index 00000000..41f4aeb4 --- /dev/null +++ b/public/examples/ts/matrix-graph.ts @@ -0,0 +1,123 @@ +/* +title: Graph Chart in Matrix +category: matrix +titleCN: 矩阵布局下的关系图 +difficulty: 2 +*/ + +const margin = [150, 80]; +const width = myChart.getWidth() - margin[1] * 2; +const height = myChart.getHeight() - margin[0] * 2; + +option = { + title: { + text: 'Course Prerequisites' + }, + matrix: { + x: { + data: ['Data Analysis', 'Programming', 'Algorithms'] + }, + y: { + data: ['1st Year', '2nd Year', '3rd Year', '4th Year'] + }, + left: margin[1], + right: margin[1], + top: margin[0], + bottom: margin[0] + }, + series: [ + { + type: 'graph', + coordinateSystem: 'matrix', + edgeSymbol: ['none', 'arrow'], + symbolSize: 15, + links: [ + { + source: 1, + target: 0 + }, + { + source: 2, + target: 0 + }, + { + source: 3, + target: 0 + }, + { + source: 4, + target: 3 + }, + { + source: 4, + target: 2 + }, + { + source: 5, + target: 1 + }, + { + source: 6, + target: 3 + } + ], + data: [ + ['Programming', '1st Year', 1, 'Intro to Computer Science'], + ['Data Analysis', '2nd Year', 1, 'Intro to Data Analysis'], + ['Algorithms', '2nd Year', 1, 'Intro to Algorithms'], + ['Programming', '2nd Year', 1, 'Advanced Programming'], + ['Algorithms', '4th Year', 1, 'Data Structures\nand Algorithms'], + ['Data Analysis', '3rd Year', 1, 'Statistics for Data Analysis'], + ['Programming', '3rd Year', 1, 'Software Development'] + ], + label: { + show: true, + formatter: (params) => { + return params.data[3]; + }, + color: '#555', + borderWidth: 0, + fontSize: 15, + fontWeight: 'bold', + offset: [0, -15], + verticalAlign: 'bottom' + }, + lineStyle: { + color: '#9af', + width: 2, + opacity: 1 + } + } + ], + graphic: { + elements: [ + { + type: 'text', + x: (width / 4) * 2.5 + margin[1], + y: margin[0] - 15, + style: { + text: 'Course Categories', + textAlign: 'center', + textVerticalAlign: 'bottom', + fontSize: 18, + fontWeight: 'bold', + fill: '#333' + } + }, + { + type: 'text', + x: margin[1] - 15, + y: (height / 5) * 3 + margin[0], + style: { + text: 'Course Categories', + textAlign: 'center', + textVerticalAlign: 'bottom', + fontSize: 18, + fontWeight: 'bold', + fill: '#333' + }, + rotation: Math.PI / 2 + } + ] + } +}; diff --git a/public/examples/ts/matrix-periodic-table.ts b/public/examples/ts/matrix-periodic-table.ts new file mode 100644 index 00000000..5be8c109 --- /dev/null +++ b/public/examples/ts/matrix-periodic-table.ts @@ -0,0 +1,259 @@ +/* +title: Periodic Table +category: matrix +titleCN: 元素周期表 +difficulty: 10 +*/ + +const colors = { + red: '#f88', + green: '#8f8', + blue: '#8bf', + yellow: '#ff8' +}; + +option = { + matrix: { + x: { + data: Array.from({ length: 19 }, (_, i) => i + 1 + ''), + label: { + show: false + }, + itemStyle: { + borderWidth: 0 + } + }, + y: { + data: Array.from({ length: 10 }, (_, i) => i + 1 + ''), + label: { + show: false + }, + itemStyle: { + borderWidth: 0 + } + }, + left: 'center', + width: 900, + backgroundStyle: { + borderWidth: 0 + }, + innerBackgroundStyle: { + 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 center = api.coord([x, y]); + const size = api.size([x, y]); + const isElement = !isNaN(api.value(2)); + const margin = 2; + return { + type: 'rect', + shape: { + x: center[0] - size[0] / 2 + margin, + y: center[1] - size[1] / 2 + margin, + width: size[0] - margin * 2, + height: size[1] - margin * 2 + }, + style: api.style({ + fill: api.value(4), + stroke: '#aaa', + lineWidth: isElement ? 1 : 0, + opacity: isElement ? 1 : 0.5 + }) + }; + } + } +}; + +setTimeout(function () { + 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 = myChart.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) + }; + }); + + myChart.setOption({ + graphic: { + elements + } + }); +}); diff --git a/public/examples/ts/matrix-pie.ts b/public/examples/ts/matrix-pie.ts new file mode 100644 index 00000000..db888120 --- /dev/null +++ b/public/examples/ts/matrix-pie.ts @@ -0,0 +1,74 @@ +/* +title: Pie Charts in Matrix +category: matrix +titleCN: 矩阵布局下的饼图 +difficulty: 2 +*/ + +const xCnt = 9; +const yCnt = 6; +const series = []; +for (let i = 0; i < xCnt; ++i) { + for (let j = 0; j < yCnt; ++j) { + series.push({ + type: 'pie', + coordinateSystem: 'matrix', + center: [`Grade ${i + 1}`, `Class ${j + 1}`], + radius: 18, + data: [ + { + value: Math.round(Math.random() * 10) + 10, + name: 'Male' + }, + { + value: Math.round(Math.random() * 10) + 10, + name: 'Female' + } + ], + label: { + show: false + }, + emphasis: { + label: { + show: false + } + } + }); + } +} + +option = { + legend: { + show: true, + bottom: 40 + }, + matrix: { + x: { + data: [ + { + value: 'Primary School', + children: Array.from({ length: 5 }, (_, i) => { + return `Grade ${i + 1}`; + }) + }, + { + value: 'High School', + children: Array.from({ length: 4 }, (_, i) => { + return `Grade ${i + 6}`; + }) + } + ] + }, + y: { + data: Array.from({ length: 6 }, (_, i) => { + return `Class ${i + 1}`; + }) + }, + top: 80, + bottom: 80 + }, + series, + tooltip: { + show: true + } +}; diff --git a/public/examples/ts/matrix-simple.ts b/public/examples/ts/matrix-simple.ts new file mode 100644 index 00000000..fd826bfc --- /dev/null +++ b/public/examples/ts/matrix-simple.ts @@ -0,0 +1,54 @@ +/* +title: Simple Matrix +category: matrix +titleCN: 简单的矩阵图 +difficulty: 1 +*/ + +option = { + matrix: { + x: { + data: [ + { + value: 'A', + children: [ + 'A1', + 'A2', + { + value: 'A3', + children: ['A31', 'A32'] + } + ] + } + ] + }, + y: { + data: ['U', 'V'] + }, + top: 150, + bottom: 150 + }, + 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 + } + } +}; diff --git a/src/asset/icon/matrix.svg b/src/asset/icon/matrix.svg new file mode 100644 index 00000000..fc012f14 --- /dev/null +++ b/src/asset/icon/matrix.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/config.js b/src/common/config.js index 4cecae9c..77fe2999 100644 --- a/src/common/config.js +++ b/src/common/config.js @@ -20,6 +20,7 @@ export const EXAMPLE_CATEGORIES = [ 'pictorialBar', 'themeRiver', 'calendar', + 'matrix', 'custom', 'dataset', diff --git a/src/common/i18n.js b/src/common/i18n.js index f7389f65..ec62b5f6 100644 --- a/src/common/i18n.js +++ b/src/common/i18n.js @@ -108,6 +108,7 @@ export default { pictorialBar: 'PictorialBar', themeRiver: 'ThemeRiver', calendar: 'Calendar', + matrix: 'Matrix', custom: 'Custom', dataset: 'Dataset', @@ -237,6 +238,7 @@ export default { pictorialBar: '象形柱图', themeRiver: '主题河流图', calendar: '日历坐标系', + matrix: '矩阵坐标系', custom: '自定义系列', dataset: '数据集', diff --git a/src/data/chart-list-data.js b/src/data/chart-list-data.js index 14f79d06..7ba34642 100644 --- a/src/data/chart-list-data.js +++ b/src/data/chart-list-data.js @@ -293,6 +293,17 @@ export default [ "titleCN": "折线图堆叠", "difficulty": 1 }, + { + "category": [ + "matrix" + ], + "id": "matrix-simple", + "ts": true, + "tags": [], + "title": "Simple Matrix", + "titleCN": "简单的矩阵图", + "difficulty": 1 + }, { "category": [ "parallel" @@ -613,6 +624,50 @@ export default [ "titleCN": "未来一周气温变化", "difficulty": 2 }, + { + "category": [ + "matrix" + ], + "id": "matrix-correlation-heatmap", + "ts": true, + "tags": [], + "title": "Correlation Matrix (Heatmap)", + "titleCN": "相关矩阵（热力图）", + "difficulty": 2 + }, + { + "category": [ + "matrix" + ], + "id": "matrix-correlation-scatter", + "ts": true, + "tags": [], + "title": "Correlation Matrix (Scatter)", + "titleCN": "相关矩阵（散点图）", + "difficulty": 2 + }, + { + "category": [ + "matrix" + ], + "id": "matrix-graph", + "ts": true, + "tags": [], + "title": "Graph Chart in Matrix", + "titleCN": "矩阵布局下的关系图", + "difficulty": 2 + }, + { + "category": [ + "matrix" + ], + "id": "matrix-pie", + "ts": true, + "tags": [], + "title": "Pie Charts in Matrix", + "titleCN": "矩阵布局下的饼图", + "difficulty": 2 + }, { "category": [ "parallel" @@ -1070,6 +1125,17 @@ export default [ "titleCN": "一天用电量分布", "difficulty": 3 }, + { + "category": [ + "matrix" + ], + "id": "matrix-confusion", + "ts": true, + "tags": [], + "title": "Confusion Matrix", + "titleCN": "混淆矩阵", + "difficulty": 3 + }, { "category": [ "pie" @@ -1719,6 +1785,17 @@ export default [ "titleCN": "动态排序折线图", "difficulty": 5 }, + { + "category": [ + "matrix" + ], + "id": "matrix-covariance", + "ts": true, + "tags": [], + "title": "Covariance Matrix", + "titleCN": "协方差矩阵", + "difficulty": 5 + }, { "category": [ "pie", @@ -2655,6 +2732,17 @@ export default [ "titleCN": "自定义地图投影", "difficulty": 10 }, + { + "category": [ + "matrix" + ], + "id": "matrix-periodic-table", + "ts": true, + "tags": [], + "title": "Periodic Table", + "titleCN": "元素周期表", + "difficulty": 10 + }, { "category": [ "pictorialBar" diff --git a/src/explore/Explore.vue b/src/explore/Explore.vue index a0023e3c..2f9902b9 100644 --- a/src/explore/Explore.vue +++ b/src/explore/Explore.vue @@ -94,6 +94,7 @@ const icons = {}; 'pictorialBar', 'themeRiver', 'calendar', + 'matrix', 'custom', 'sunburst', 'tree',