This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/echarts-bar-racing.git
commit 115f33214c127ea9c11019751d5ef7a721424f43 Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Mon Jun 7 17:12:18 2021 +0800 chart and table --- package-lock.json | 100 +++++++++++++++++++ package.json | 5 + src/components/BTable.vue | 66 +++++++++---- src/components/btable.ts | 243 ++++++++++++++++++++++++++++++++++++++++++++++ tsconfig.json | 4 +- 5 files changed, 398 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index d067e4d..c489f7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,16 @@ "resolved": "https://registry.nlark.com/@babel/parser/download/@babel/parser-7.14.3.tgz?cache=0&sync_timestamp=1621284389691&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fparser%2Fdownload%2F%40babel%2Fparser-7.14.3.tgz", "integrity": "sha1-m1MO7LBx/QyTUZ3yXF/58UdZ8pg=" }, + "@babel/polyfill": { + "version": "7.12.1", + "resolved": "https://registry.npm.taobao.org/@babel/polyfill/download/@babel/polyfill-7.12.1.tgz", + "integrity": "sha1-Hy1jcdEmG72WHzxdWQkVDhLQvZY=", + "dev": true, + "requires": { + "core-js": "^2.6.5", + "regenerator-runtime": "^0.13.4" + } + }, "@babel/types": { "version": "7.14.2", "resolved": "https://registry.nlark.com/@babel/types/download/@babel/types-7.14.2.tgz", @@ -403,6 +413,15 @@ "@types/node": "*" } }, + "@types/jquery": { + "version": "3.5.5", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz", + "integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==", + "dev": true, + "requires": { + "@types/sizzle": "*" + } + }, "@types/lodash": { "version": "4.14.169", "resolved": "https://registry.nlark.com/@types/lodash/download/@types/lodash-4.14.169.tgz", @@ -420,6 +439,12 @@ "integrity": "sha1-I6Brh+7bUkAWYW6IaxFrj9yxgK8=", "dev": true }, + "@types/sizzle": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", + "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==", + "dev": true + }, "@types/unist": { "version": "2.0.3", "resolved": "https://registry.nlark.com/@types/unist/download/@types/unist-2.0.3.tgz?cache=0&sync_timestamp=1621243829208&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Funist%2Fdownload%2F%40types%2Funist-2.0.3.tgz", @@ -790,6 +815,11 @@ "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=", "dev": true }, + "bignumber.js": { + "version": "8.1.1", + "resolved": "https://registry.npm.taobao.org/bignumber.js/download/bignumber.js-8.1.1.tgz", + "integrity": "sha1-Swcq5a6pwg9nMOTl1SnfEnHE2IU=" + }, "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npm.taobao.org/binary-extensions/download/binary-extensions-2.2.0.tgz?cache=0&sync_timestamp=1610299293319&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbinary-extensions%2Fdownload%2Fbinary-extensions-2.2.0.tgz", @@ -1278,6 +1308,12 @@ "@babel/types": "^7.6.1" } }, + "core-js": { + "version": "2.6.12", + "resolved": "https://registry.nlark.com/core-js/download/core-js-2.6.12.tgz", + "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw=", + "dev": true + }, "core-util-is": { "version": "1.0.2", "resolved": "http://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz", @@ -1500,6 +1536,15 @@ "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=", "dev": true }, + "echarts": { + "version": "5.1.1", + "resolved": "https://registry.nlark.com/echarts/download/echarts-5.1.1.tgz", + "integrity": "sha1-sYbxYvAXxVXP1nsS7eZ2K9w939o=", + "requires": { + "tslib": "2.0.3", + "zrender": "5.1.0" + } + }, "electron-to-chromium": { "version": "1.3.747", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.747.tgz", @@ -1861,6 +1906,16 @@ "integrity": "sha1-/wQLKwhTsjw9MQJ1I3BvGIXXa+4=", "dev": true }, + "handsontable": { + "version": "6.2.2", + "resolved": "https://registry.nlark.com/handsontable/download/handsontable-6.2.2.tgz?cache=0&sync_timestamp=1622544081773&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhandsontable%2Fdownload%2Fhandsontable-6.2.2.tgz", + "integrity": "sha1-8SUPPzdKvffUoAgJUEgtPt7qjwc=", + "requires": { + "moment": "2.20.1", + "numbro": "^2.0.6", + "pikaday": "1.5.1" + } + }, "has": { "version": "1.0.3", "resolved": "https://registry.npm.taobao.org/has/download/has-1.0.3.tgz", @@ -2275,6 +2330,11 @@ "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", "dev": true }, + "jquery": { + "version": "3.6.0", + "resolved": "https://registry.npm.taobao.org/jquery/download/jquery-3.6.0.tgz?cache=0&sync_timestamp=1614705221099&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjquery%2Fdownload%2Fjquery-3.6.0.tgz", + "integrity": "sha1-xyoJ8Vwb3OFC9J2/EXC9+K2sJHA=" + }, "js-stringify": { "version": "1.0.2", "resolved": "https://registry.npm.taobao.org/js-stringify/download/js-stringify-1.0.2.tgz", @@ -2575,6 +2635,11 @@ "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==", "dev": true }, + "moment": { + "version": "2.20.1", + "resolved": "https://registry.npm.taobao.org/moment/download/moment-2.20.1.tgz?cache=0&sync_timestamp=1601983320283&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.20.1.tgz", + "integrity": "sha1-1usaRsvMFKKy+UNBEsH/iQfzE/0=" + }, "ms": { "version": "2.1.3", "resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.3.tgz?cache=0&sync_timestamp=1607433905701&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.3.tgz", @@ -2680,6 +2745,14 @@ "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true }, + "numbro": { + "version": "2.3.2", + "resolved": "https://registry.npm.taobao.org/numbro/download/numbro-2.3.2.tgz", + "integrity": "sha1-SWfGMbDqmbF91/iM3R6qSs5NSXE=", + "requires": { + "bignumber.js": "^8.1.1" + } + }, "object-assign": { "version": "4.1.1", "resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz", @@ -2887,6 +2960,14 @@ "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", "dev": true }, + "pikaday": { + "version": "1.5.1", + "resolved": "https://registry.npm.taobao.org/pikaday/download/pikaday-1.5.1.tgz", + "integrity": "sha1-CkhUm8GhTqHQjEQHTXYbwvK/z9M=", + "requires": { + "moment": "2.x" + } + }, "pinkie": { "version": "2.0.4", "resolved": "http://registry.npm.taobao.org/pinkie/download/pinkie-2.0.4.tgz", @@ -3492,6 +3573,12 @@ } } }, + "regenerator-runtime": { + "version": "0.13.7", + "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz", + "integrity": "sha1-ysLazIoepnX+qrrriugziYrkb1U=", + "dev": true + }, "registry-auth-token": { "version": "4.2.1", "resolved": "https://registry.npm.taobao.org/registry-auth-token/download/registry-auth-token-4.2.1.tgz", @@ -3976,6 +4063,11 @@ "integrity": "sha1-uLY5zvrX0LsqvTfUM/+Ck++l9AY=", "dev": true }, + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npm.taobao.org/tslib/download/tslib-2.0.3.tgz?cache=0&sync_timestamp=1617647074515&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-2.0.3.tgz", + "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw=" + }, "type-fest": { "version": "0.3.1", "resolved": "https://registry.nlark.com/type-fest/download/type-fest-0.3.1.tgz?cache=0&sync_timestamp=1621402383646&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftype-fest%2Fdownload%2Ftype-fest-0.3.1.tgz", @@ -5031,6 +5123,14 @@ "requires": { "camelcase": "^4.1.0" } + }, + "zrender": { + "version": "5.1.0", + "resolved": "https://registry.nlark.com/zrender/download/zrender-5.1.0.tgz", + "integrity": "sha1-tqhMOqfMxmQu4FGZAcpMCDXE2F4=", + "requires": { + "tslib": "2.0.3" + } } } } diff --git a/package.json b/package.json index cd90565..9d4a02a 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ "serve": "vite preview" }, "devDependencies": { + "@babel/polyfill": "^7.12.1", "@tailwindcss/postcss7-compat": "^2.1.4", + "@types/jquery": "^3.5.5", "@vitejs/plugin-vue": "^1.2.2", "@vue/compiler-sfc": "^3.0.11", "autoprefixer": "^9.8.6", @@ -28,7 +30,10 @@ "yargs": "^6.6.0" }, "dependencies": { + "echarts": "^5.1.1", "element-plus": "^1.0.2-beta.44", + "handsontable": "^6.2.2", + "jquery": "^3.6.0", "lodash": "^4.17.19", "vue": "^3.0.11", "vue-i18n": "^9.1.6" diff --git a/src/components/BTable.vue b/src/components/BTable.vue index ea64fd7..9f6fc36 100644 --- a/src/components/BTable.vue +++ b/src/components/BTable.vue @@ -1,34 +1,58 @@ <template> <div class="w-full h-full"> - <div class="grid grid-cols-3 h-full"> - <div id="el-table" class="col-span-2 h-full" style="border: 1px solid red;"></div> - <div id="el-config" class="p-3 align-middle"> - <div> - <el-button type="button" onclick="run()" size="medium">运行</el-button> - <el-button type="button" size="medium">导出</el-button> + <div class="grid grid-cols-12 h-full text-sm"> + <el-card class="box-card col-span-3"> + <h1 slot="header" class="clearfix text-xl"> + Apache ECharts Bar-Race 生成器 + </h1> + <div id="el-config" class="align-middle"> + <!-- <div class="my-3"> + <el-button onclick="run()" size="medium">运行</el-button> + <el-button size="medium">导出</el-button> + </div> --> + <el-form ref="form"> + <div class="grid grid-cols-3 form-row"> + <label class="col-span-1">标题</label> + <el-input id="input-title" value="汽车产量动态排名" size="medium" class="col-span-2"></el-input> + </div> + <div class="grid grid-cols-3 form-row"> + <label class="col-span-1">显示排名上限</label> + <el-input id="input-max" type="number" value="10" size="medium" class="col-span-2"></el-input> + </div> + </el-form> </div> - <el-form ref="form"> - <div class="grid grid-cols-2 form-row"> - <label>标题</label> - <el-input id="input-title" value="汽车产量动态排名" size="medium"></el-input> - </div> - <div class="grid grid-cols-2 form-row"> - <label>显示排名上限</label> - <el-input id="input-max" type="number" value="10" size="medium"></el-input> - </div> - </el-form> - </div> + </el-card> + <el-card class="box-card col-span-4 relative" body-style="height: 100%"> + <div slot="header" class="clearfix text-base"> + 数据 + </div> + <div id="table-panel" class="overflow-auto absolute bottom-4 top-14 left-5 right-5 border"> + </div> + </el-card> + <el-card class="box-card col-span-5 relative" body-style="height: 100%"> + <div slot="header" class="clearfix text-base"> + 预览 + <a href="#"> + <i class="el-icon-refresh"></i> + </a> + </div> + <div id="bar-race-preview" class="absolute bottom-4 top-14 left-5 right-5 border"> + </div> + </el-card> </div> </div> </template> <script lang="ts"> -import {defineComponent} from 'vue' +import {defineComponent} from 'vue'; +import btable from './btable'; + export default defineComponent({ name: 'BTable', props: { }, - setup: () => { + mounted: () => { + btable.initTable(); } }) </script> @@ -42,5 +66,9 @@ export default defineComponent({ @apply py-1; } } + + .box-card { + @apply m-1; + } } </style> diff --git a/src/components/btable.ts b/src/components/btable.ts new file mode 100644 index 0000000..43eafec --- /dev/null +++ b/src/components/btable.ts @@ -0,0 +1,243 @@ +import * as $ from 'jquery'; +import Handsontable from 'handsontable'; +import * as echarts from 'echarts'; + +const headerLength = 2; + +let chart: echarts.ECharts; +const data = [ + ["Name", "Ford", "Tesla", "Toyota", "Honda"], + ["Color", "", "", "", ""], + ["2017", 10, 11, 12, 13], + ["2018", 20, 11, 14, 13], + ["2019", 30, 15, 12, 13] +]; + +function initTable() { + for (let i = 0; i < data.length; ++i) { + for (let j = data[i].length; j < 50; ++j) { + data[i].push(''); + } + } + for (let i = data.length; i < 100; ++i) { + const row = []; + for (let j = 0; j < 50; ++j) { + row.push(''); + } + data.push(row); + } + + // function colorRenderer(instance, td, row, col) { + // //- console.log(instance); + + // } + + const container = document.getElementById('table-panel') as Element; + console.log(container) + + const table = new Handsontable(container, { + data: data, + rowHeaders: true, + colHeaders: true, + filters: true, + dropdownMenu: true, + // cell: [{ + // row: 0, + // col: 0, + // readOnly: true + // }, { + // row: 1, + // col: 0, + // readOnly: true + // }], + //- cells: function (row, col) { + //- if (row === 1) { + //- return { + //- renderer: colorRenderer + //- } + //- } + //- else { + //- return {}; + //- } + //- } + }); + table.updateSettings({ + afterChange: function () { + run(); + } + }); + + chart = echarts.init($('#bar-race-preview')[0]); + run(); +} + +const timeoutHandlers: number[] = []; + +function clearTimeoutHandlers() { + for (let i = 0; i < timeoutHandlers.length; ++i) { + clearTimeout(timeoutHandlers[i]); + timeoutHandlers.splice(i, 1); + } +} +function removeTimeoutHandlers(handler: number) { + for (let i = 0; i < timeoutHandlers.length; ++i) { + if (timeoutHandlers[i] === handler) { + timeoutHandlers.splice(i, 1); + } + } +} + +function initEvents() { + $('.form-group').change(function () { + run(); + }); +} + + +function run() { + clearTimeoutHandlers(); + + const title = $('#input-title').val(); + const max = $('#input-max').val(); + chart.setOption({ + title: [{ + text: getDataName(0), + textStyle: { + fontFamily: 'monospace', + fontSize: 80, + color: 'rgba(100, 100, 100, 0.2)' + }, + bottom: 60, + right: 20 + }, { + text: title + }], + grid: { + right: 20 + }, + yAxis: { + type: 'category', + data: getYData(), + inverse: true, + max: max, + animationDuration: 0, + animationDurationUpdate: 0 + }, + xAxis: {}, + series: [{ + type: 'bar', + data: getChartData(0), + realtimeSort: true, + colorBy: 'item', + label: { + show: true, + position: 'insideRight' + } + }], + animationDurationUpdate: 5000, + animationEasing: 'linear', + animationEasingUpdate: 'linear' + }, true); + + const rows = trimRows(); + for (let i = 1; i < rows.length; ++i) { + (function (i) { + var dataRow = getChartData(i); + let timeout: number; + const timeoutCb = function () { + chart.setOption({ + title: [{ + text: getDataName(i) + }], + yAxis: { + animationDuration: 300, + animationDurationUpdate: 300, + }, + series: [{ + type: 'bar', + data: dataRow + }] + }); + removeTimeoutHandlers(timeout); + }; + timeout = window.setTimeout(timeoutCb, (i - 1) * 5000); + timeoutHandlers.push(timeout); + })(i); + } +} + +const trimColumns = function (rowData: (string | number)[]) { + for (let i = rowData.length - 1; i > 0; --i) { + if (rowData[i] && rowData[i] !== '') { + return rowData.slice(1, i + 1); + } + } + return []; +}; + +const trimRows = function () { + if (data.length <= headerLength) { + return []; + } + for (let i = data.length - 1; i >= headerLength; --i) { + let isEmpty = true; + for (let j = 1; j < data[i].length; ++j) { + if (data[i][j] && data[i][j] !== '') { + isEmpty = false; + break; + } + } + if (!isEmpty) { + return data.slice(headerLength, i + 1); + } + } + return []; +}; + +const getYData = function () { + if (data.length <= headerLength) { + return []; + } + return trimColumns(data[0]); +}; + +const getChartData = function (id: number) { + if (data.length <= id + headerLength) { + return []; + } + return trimColumns(data[id + headerLength]); +}; + +const getDataName = function (id: number) { + if (data.length <= id + headerLength) { + return ''; + } + else { + return data[id + headerLength][0]; + } +} + +function download() { + // saveFile() +} + +function saveFile(name: string, type: string) { + // if (isSafari()) { + // window.open('data:text/plain;charset=utf-8,' + encodeURIComponent(data)); + // } else { + // try { + // var file = new Blob([data], {type: type}); + // saveAs(file, name); + // } catch(e) { + // console.error(e); + // window.open('data:text/plain;charset=utf-8,' + encodeURIComponent(data)); + // } + // } +} + +function isSafari() { + return navigator.userAgent.indexOf('Safari') > 0 && + navigator.userAgent.indexOf('Chrome') < 0; +} + +export default {initTable}; diff --git a/tsconfig.json b/tsconfig.json index 5f1b278..6823c9a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,5 +11,7 @@ "allowJs": true, }, "include": ["src/**/*"], - "exclude": ["node_modules"] + "exclude": ["node_modules"], + "esModuleInterop": true, + "allowSyntheticDefaultImports": true } \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org