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 df7cd77c84d62b13cb921411e437b57429dcb4a9 Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Tue Dec 14 15:30:58 2021 +0800 feat: define components --- package-lock.json | 85 +++++++++++++++------------ package.json | 4 +- src/App.vue | 13 ++++- src/components/WChart.vue | 44 ++++++++++++-- src/components/WConfig.vue | 140 ++++++++++++++++++++++++++------------------- src/components/WData.vue | 69 +++------------------- tsconfig.json | 1 + 7 files changed, 193 insertions(+), 163 deletions(-) diff --git a/package-lock.json b/package-lock.json index 49819bb..5c1f012 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,16 @@ "resolved": "https://registry.npmmirror.com/@babel/parser/download/@babel/parser-7.15.7.tgz?cache=0&sync_timestamp=1632808879837&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40babel%2Fparser%2Fdownload%2F%40babel%2Fparser-7.15.7.tgz", "integrity": "sha1-DD7UousHsWXfqFs8xFxyczTE7a4=" }, + "@babel/polyfill": { + "version": "7.12.1", + "resolved": "https://registry.npmmirror.com/@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.15.6", "resolved": "https://registry.nlark.com/@babel/types/download/@babel/types-7.15.6.tgz?cache=0&sync_timestamp=1631216248664&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Ftypes%2Fdownload%2F%40babel%2Ftypes-7.15.6.tgz", @@ -660,11 +670,6 @@ "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", @@ -1064,6 +1069,12 @@ "@babel/types": "^7.6.1" } }, + "core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmmirror.com/core-js/download/core-js-2.6.12.tgz", + "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw=", + "dev": true + }, "core-util-is": { "version": "1.0.3", "resolved": "https://registry.npmmirror.com/core-util-is/download/core-util-is-1.0.3.tgz", @@ -1227,6 +1238,20 @@ "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=", "dev": true }, + "echarts": { + "version": "5.2.2", + "resolved": "https://registry.npmmirror.com/echarts/download/echarts-5.2.2.tgz", + "integrity": "sha1-7DyLKhUcu6cbo8LHz5svIEfOQ3A=", + "requires": { + "tslib": "2.3.0", + "zrender": "5.2.1" + } + }, + "echarts-wordcloud": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/echarts-wordcloud/-/echarts-wordcloud-2.0.0.tgz", + "integrity": "sha512-K7l6pTklqdW7ZWzT/1CS0KhBSINr/cd7c5N1fVMzZMwLQHEwT7x+nivK7g5hkVh7WNcAv4Dn6/ZS5zMKRozC1g==" + }, "element-plus": { "version": "1.0.2-beta.71", "resolved": "https://registry.npmmirror.com/element-plus/download/element-plus-1.0.2-beta.71.tgz", @@ -1539,16 +1564,6 @@ "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", @@ -2226,11 +2241,6 @@ "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", @@ -2313,14 +2323,6 @@ "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", @@ -2485,14 +2487,6 @@ "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", @@ -2798,6 +2792,12 @@ "strip-indent": "^2.0.0" } }, + "regenerator-runtime": { + "version": "0.13.9", + "resolved": "https://registry.nlark.com/regenerator-runtime/download/regenerator-runtime-0.13.9.tgz", + "integrity": "sha1-iSV0Kpj/2QgUmI11Zq0wyjsmO1I=", + "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", @@ -3176,6 +3176,11 @@ "integrity": "sha1-uLY5zvrX0LsqvTfUM/+Ck++l9AY=", "dev": true }, + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz?cache=0&sync_timestamp=1628722556410&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-2.3.0.tgz", + "integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4=" + }, "type-fest": { "version": "0.3.1", "resolved": "https://registry.npmmirror.com/type-fest/download/type-fest-0.3.1.tgz", @@ -4239,6 +4244,14 @@ "requires": { "camelcase": "^4.1.0" } + }, + "zrender": { + "version": "5.2.1", + "resolved": "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz", + "integrity": "sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=", + "requires": { + "tslib": "2.3.0" + } } } } diff --git a/package.json b/package.json index bd41d98..172408f 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "serve": "vite preview" }, "devDependencies": { + "@babel/polyfill": "^7.12.1", "@vitejs/plugin-vue": "^1.2.2", "@vue/compiler-sfc": "^3.0.11", "chalk": "^3.0.0", @@ -22,8 +23,9 @@ "yargs": "^6.6.0" }, "dependencies": { + "echarts": "^5.2.2", + "echarts-wordcloud": "^2.0.0", "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 84ad82b..f134f7f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,7 +8,9 @@ <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="data"> + <WData :data="config.data"></WData> + </el-tab-pane> <el-tab-pane label="导出" name="export">导出</el-tab-pane> </el-tabs> </el-aside> @@ -19,10 +21,19 @@ </template> <script lang='ts' setup> +import { Ref, ref } from 'vue'; import WChart from './components/WChart.vue'; import WConfig from './components/WConfig.vue'; +import WData from './components/WData.vue'; + +type Config = { + data: {name: string, value: number}[] +}; const activeName = 'config'; +const config: Config = { + data: [] as {name: string, value: number}[] +}; </script> <style> diff --git a/src/components/WChart.vue b/src/components/WChart.vue index 37890b0..2825a92 100644 --- a/src/components/WChart.vue +++ b/src/components/WChart.vue @@ -1,14 +1,48 @@ <template> - <div class="chart" ref="chartRef"></div> + <div> + <div class="chart" ref="chartRef">aaa</div> + </div> </template> <script setup lang="ts"> -import { onMounted, ref } from 'vue'; -// const { proxy } = getCurrentInstance(); +import { onMounted, shallowRef, ref } from 'vue'; +import * as echarts from 'echarts'; +import type { ECharts } from 'echarts'; +import 'echarts-wordcloud'; + +// const props = defineProps({ +// foo: String +// }); +const chart = shallowRef<ECharts | null>(null); +const chartRef = ref<HTMLElement | null>(null); + +const run = () => { + console.log('run', chart.value); + chart.value!.setOption({ + series: [{ + type: 'wordCloud', + data: [{ + name: 'series', + value: 100 + }, { + name: 'data', + value: 30 + }, { + name: 'itemStyle', + value: 20 + }, { + name: 'lineStyle', + value: 5 + }] + }] + }); +}; + onMounted(() => { - const chartRef = ref(null); - console.log('mounted', chartRef); + console.log('mounted', chartRef.value); + chart.value = echarts.init(chartRef.value!); + run(); }); </script> diff --git a/src/components/WConfig.vue b/src/components/WConfig.vue index 87e7293..17c2439 100644 --- a/src/components/WConfig.vue +++ b/src/components/WConfig.vue @@ -1,70 +1,94 @@ <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> + <el-collapse> + <el-collapse-item title="颜色" name="1"> + <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="hue" + 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="saturation" + 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="lightness" + 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="alpha" + range + show-tooltip + :max="1" + :step="0.05" + input-size="medium" + > + </el-slider> + </el-col> + </el-row> + </el-collapse-item> + </el-collapse> </template> <script setup lang="ts"> import { ref } from 'vue' const themeColors = ref(['#720FEB', '#EB1AA9', '#B6DA02']); +const hue = ref([0, 255]); +const saturation = ref([0.5, 0.8]); +const lightness = ref([0.5, 0.8]); +const alpha = ref([0.5, 0.8]); </script> <style lang="scss"> diff --git a/src/components/WData.vue b/src/components/WData.vue index e7e667c..fe12679 100644 --- a/src/components/WData.vue +++ b/src/components/WData.vue @@ -1,73 +1,18 @@ <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 class="table" ref="tableRef"> </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']; +import { toRefs, PropType } from 'vue'; + +const props = defineProps({ + data: Array as PropType<{ value: number, name: string }[]> +}); +const { data } = toRefs(props); </script> <style lang="scss"> diff --git a/tsconfig.json b/tsconfig.json index 6d32e91..582c895 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,6 +9,7 @@ "moduleResolution": "node", "target": "es6", "allowJs": true, + "allowSyntheticDefaultImports": true }, "include": ["src/**/*"], "exclude": ["node_modules"], --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org