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-wordcloud-generator.git
commit 67a05976c6730161384e602f5a9b92616110ac98 Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Wed Sep 29 10:25:22 2021 +0800 feat: style config --- package-lock.json | 36 ++++++++++++++++ package.json | 1 + src/App.vue | 24 ++++++++--- src/components/WChart.vue | 22 ++++++++++ src/components/WConfig.vue | 101 +++++++++++++++++++++++++++++++++++++++++++ src/components/WData.vue | 104 +++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 281 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index ae80466..49819bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -660,6 +660,11 @@ "integrity": "sha1-6D46fj8wCzTLnYf2FfoMvzV2kO4=", "dev": true }, + "bignumber.js": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-8.1.1.tgz", + "integrity": "sha512-QD46ppGintwPGuL1KqmwhR0O+N2cZUg8JG/VzwI2e28sM9TqHjQB10lI4QAaMHVbLzwVLLAwEglpKPViWX+5NQ==" + }, "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", @@ -1534,6 +1539,16 @@ "integrity": "sha1-5BK40z9eAGWTy9PO5t+fLOu+gCo=", "dev": true }, + "handsontable": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/handsontable/-/handsontable-6.2.2.tgz", + "integrity": "sha512-Z/sQa51OMHH4RoeBJeANYJMJYmx5SR+/xP8JCh5mzKJnAMKoQWF1zONPNgNCFZ/LdKFmI0f34XKtU0GHW0MG/Q==", + "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", @@ -2211,6 +2226,11 @@ "resolved": "https://registry.nlark.com/mitt/download/mitt-2.1.0.tgz?cache=0&sync_timestamp=1624483449786&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fmitt%2Fdownload%2Fmitt-2.1.0.tgz", "integrity": "sha1-90BXfCMXbGIFsSGylzUU6t4bIjA=" }, + "moment": { + "version": "2.20.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.20.1.tgz", + "integrity": "sha512-Yh9y73JRljxW5QxN08Fner68eFLxM5ynNOAw2LbIB1YAGeQzZT8QFSUvkAz609Zf+IHhhaUxqZK8dG3W/+HEvg==" + }, "ms": { "version": "2.1.3", "resolved": "https://registry.npmmirror.com/ms/download/ms-2.1.3.tgz", @@ -2293,6 +2313,14 @@ "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true }, + "numbro": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/numbro/-/numbro-2.3.5.tgz", + "integrity": "sha512-xlKC0GIZn0iaF7LHE60/DmGfQadDNfnskXdGDGWJfaZfP4pbhc0x+nR8yIIpQkF9n7gJWS6fgBR3Pkvp/W6sDg==", + "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", @@ -2457,6 +2485,14 @@ "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", "dev": true }, + "pikaday": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/pikaday/-/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", diff --git a/package.json b/package.json index 1a384f9..bd41d98 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ }, "dependencies": { "element-plus": "^1.0.2-beta.44", + "handsontable": "^6.2.2", "lodash": "^4.17.19", "vue": "^3.0.11", "vue-i18n": "^9.1.6" diff --git a/src/App.vue b/src/App.vue index 842c806..84ad82b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,17 +4,33 @@ <h3> {{$t('title')}} </h3> + <el-tabs type="card" v-model="activeName"> + <el-tab-pane label="样式" name="config"> + <WConfig></WConfig> + </el-tab-pane> + <el-tab-pane label="数据" name="data">数据</el-tab-pane> + <el-tab-pane label="导出" name="export">导出</el-tab-pane> + </el-tabs> </el-aside> <el-main> - <div id="chart"></div> + <WChart></WChart> </el-main> </el-container> </template> <script lang='ts' setup> +import WChart from './components/WChart.vue'; +import WConfig from './components/WConfig.vue'; +const activeName = 'config'; </script> +<style> +h4 { + margin: 10px 0; +} +</style> + <style scoped lang="scss"> #echarts-spa-app { font-family: Avenir, Helvetica, Arial, sans-serif; @@ -33,10 +49,4 @@ .el-aside { padding: 0 15px; } - -#chart { - border: 1px solid #f2eef2; - width: 800px; - height: 600px; -} </style> diff --git a/src/components/WChart.vue b/src/components/WChart.vue new file mode 100644 index 0000000..37890b0 --- /dev/null +++ b/src/components/WChart.vue @@ -0,0 +1,22 @@ +<template> + <div class="chart" ref="chartRef"></div> +</template> + + +<script setup lang="ts"> +import { onMounted, ref } from 'vue'; +// const { proxy } = getCurrentInstance(); +onMounted(() => { + const chartRef = ref(null); + console.log('mounted', chartRef); +}); +</script> + + +<style scoped lang="scss"> +.chart { + border: 1px solid #f2eef2; + width: 800px; + height: 600px; +} +</style> diff --git a/src/components/WConfig.vue b/src/components/WConfig.vue new file mode 100644 index 0000000..87e7293 --- /dev/null +++ b/src/components/WConfig.vue @@ -0,0 +1,101 @@ +<template> + <h4>基础色</h4> + <div> + <el-color-picker + v-for="(color, index) in themeColors" + v-bind:key="index" + v-model="themeColors[index]" + size="small" + > + </el-color-picker> + <div class="color-picker-btn"> + <i class="el-icon-minus"></i> + </div> + <div class="color-picker-btn"> + <i class="el-icon-plus"></i> + </div> + </div> + <h4>亮度范围</h4> + <el-row> + <el-col :span="22" :offset="1"> + <el-slider + v-model="value" + range + show-tooltip + :max="1" + :step="0.05" + input-size="medium" + > + </el-slider> + </el-col> + </el-row> + + <h4>饱和度范围</h4> + <el-row> + <el-col :span="22" :offset="1"> + <el-slider + v-model="value" + range + show-tooltip + :max="1" + :step="0.05" + input-size="medium" + > + </el-slider> + </el-col> + </el-row> + + <h4>透明度范围</h4> + <el-row> + <el-col :span="22" :offset="1"> + <el-slider + v-model="value" + range + show-tooltip + :max="1" + :step="0.05" + input-size="medium" + > + </el-slider> + </el-col> + </el-row> +</template> + + +<script setup lang="ts"> +import { ref } from 'vue' +const themeColors = ref(['#720FEB', '#EB1AA9', '#B6DA02']); +</script> + +<style lang="scss"> +.title-right { + position: absolute; + top: 10px; + right: 0; + + a { + display: inline-block; + } +} + +.el-color-picker { + margin-right: 5px; +} + +.color-picker-btn { + display: inline-block; + width: 30px; + height: 30px; + margin-right: 5px; + padding: 3px 6px; + box-sizing: border-box; + vertical-align: top; + border: 1px solid #e6e6e6; + border-radius: 4px; + color: #409EFF; +} + +.text-pad { + padding: 8px 0; +} +</style> diff --git a/src/components/WData.vue b/src/components/WData.vue new file mode 100644 index 0000000..e7e667c --- /dev/null +++ b/src/components/WData.vue @@ -0,0 +1,104 @@ +<template> + <h4>主题色</h4> + <div> + <el-color-picker + v-for="(color, index) in themeColors" + v-bind:key="index" + v-model="themeColors[index]" + size="small" + > + </el-color-picker> + <div class="color-picker-btn"> + <i class="el-icon-minus"></i> + </div> + <div class="color-picker-btn"> + <i class="el-icon-plus"></i> + </div> + </div> + <h4>亮度范围</h4> + <el-row> + <el-col :span="22" :offset="1"> + <el-slider + v-model="value" + range + show-tooltip + :max="1" + :step="0.05" + input-size="medium" + > + </el-slider> + </el-col> + </el-row> + + <h4>饱和度范围</h4> + <el-row> + <el-col :span="22" :offset="1"> + <el-slider + v-model="value" + range + show-tooltip + :max="1" + :step="0.05" + input-size="medium" + > + </el-slider> + </el-col> + </el-row> + + <h4>透明度范围</h4> + <el-row> + <el-col :span="22" :offset="1"> + <el-slider + v-model="value" + range + show-tooltip + :max="1" + :step="0.05" + input-size="medium" + > + </el-slider> + </el-col> + </el-row> + <!-- <el-collapse> + <el-collapse-item title="一致性 Consistency" name="1"> + </el-collapse-item> + </el-collapse> --> +</template> + + +<script setup lang="ts"> +const themeColors = ['#720FEB', '#EB1AA9', '#EB1AA2']; +</script> + +<style lang="scss"> +.title-right { + position: absolute; + top: 10px; + right: 0; + + a { + display: inline-block; + } +} + +.el-color-picker { + margin-right: 5px; +} + +.color-picker-btn { + display: inline-block; + width: 30px; + height: 30px; + margin-right: 5px; + padding: 3px 6px; + box-sizing: border-box; + vertical-align: top; + border: 1px solid #e6e6e6; + border-radius: 4px; + color: #409EFF; +} + +.text-pad { + padding: 8px 0; +} +</style> --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org