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 1828acd24635701642e0c11c74d3e4d08b3a86e5 Author: Ovilia <[email protected]> AuthorDate: Tue Dec 14 17:59:49 2021 +0800 feat: add config --- src/App.vue | 24 ++++++++++++++--- src/components/WChart.vue | 26 +++++-------------- src/components/WConfig.vue | 27 ++++++++++++++++--- src/components/WData.vue | 65 ++++++++++++++++++++++++++++++++++++---------- src/data/defaultData.ts | 16 ++++++++++++ 5 files changed, 119 insertions(+), 39 deletions(-) diff --git a/src/App.vue b/src/App.vue index 884a177..75e8f66 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,27 +6,42 @@ </h3> <el-tabs type="card" v-model="activeName"> <el-tab-pane label="样式" name="config"> - <WConfig></WConfig> + <WConfig ref="wconfig"></WConfig> </el-tab-pane> <el-tab-pane label="数据" name="data"> - <WData></WData> + <WData ref="wdata" @change="onChange"></WData> </el-tab-pane> <el-tab-pane label="导出" name="export">导出</el-tab-pane> </el-tabs> </el-aside> <el-main> - <WChart></WChart> + <WChart ref="wchart"></WChart> </el-main> </el-container> </template> <script lang='ts' setup> -import { Ref, ref } from 'vue'; +import { ref } from 'vue'; +import { useI18n } from 'vue-i18n'; import WChart from './components/WChart.vue'; import WConfig from './components/WConfig.vue'; import WData from './components/WData.vue'; +import defaultData from './data/defaultData'; +const wconfig = ref<any>(null); +const wdata = ref<any>(null); +const wchart = ref<any>(null); + +const {t} = useI18n({ useScope: 'global' }); const activeName = 'config'; + +function onChange() { + wchart.value?.run(wdata.value?.data); +} + +setTimeout(() => { + wdata.value?.setData(defaultData); +}); </script> <style> @@ -52,5 +67,6 @@ h4 { .el-aside { padding: 0 15px; + --el-aside-width: 400px; } </style> diff --git a/src/components/WChart.vue b/src/components/WChart.vue index 2825a92..183452b 100644 --- a/src/components/WChart.vue +++ b/src/components/WChart.vue @@ -8,41 +8,29 @@ <script setup lang="ts"> 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 chart = shallowRef<echarts.ECharts | null>(null); const chartRef = ref<HTMLElement | null>(null); -const run = () => { - console.log('run', chart.value); +defineExpose({ + run +}); + +function run(data?: []) { chart.value!.setOption({ series: [{ type: 'wordCloud', - data: [{ - name: 'series', - value: 100 - }, { - name: 'data', - value: 30 - }, { - name: 'itemStyle', - value: 20 - }, { - name: 'lineStyle', - value: 5 - }] + data: data || [] }] }); }; onMounted(() => { - 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 17c2439..cbd37c5 100644 --- a/src/components/WConfig.vue +++ b/src/components/WConfig.vue @@ -1,7 +1,7 @@ <template> <el-collapse> - <el-collapse-item title="颜色" name="1"> - <h4>基础色</h4> + <el-collapse-item title="颜色" name="color"> + <!-- <h4>基础色</h4> <div> <el-color-picker v-for="(color, index) in themeColors" @@ -16,7 +16,7 @@ <div class="color-picker-btn"> <i class="el-icon-plus"></i> </div> - </div> + </div> --> <h4>色相范围</h4> <el-row> @@ -78,6 +78,18 @@ </el-col> </el-row> </el-collapse-item> + + <el-collapse-item title="文字" name="font"> + <!-- <h4>字体</h4> --> + <el-row> + <el-col :span="12"> + <el-label>字体</el-label> + </el-col> + <el-col :span="12"> + </el-col> + </el-row> + + </el-collapse-item> </el-collapse> </template> @@ -122,4 +134,13 @@ const alpha = ref([0.5, 0.8]); .text-pad { padding: 8px 0; } + +.el-dropdown-link { + cursor: pointer; + color: #409EFF; +} + +.el-icon-arrow-down { + font-size: 12px; +} </style> diff --git a/src/components/WData.vue b/src/components/WData.vue index 502a332..087c007 100644 --- a/src/components/WData.vue +++ b/src/components/WData.vue @@ -2,6 +2,7 @@ <div> <el-table class="word-table" :data="tableData" + empty-text="无数据" > <el-table-column fixed @@ -26,7 +27,7 @@ </el-table-column> <el-table-column prop="value" - label="字号" + label="相对大小" > <template v-slot="scope"> <el-input @@ -79,12 +80,13 @@ </el-table-column> <el-table-column prop="value" - label="字号" + label="大小" > <template v-slot="scope"> <el-input size="small" v-model="scope.row.value" + placeholder="留空则随机大小" > </el-input> </template> @@ -104,11 +106,27 @@ </template> </el-table-column> </el-table> + <div class="padding"> + <el-button + type="primary" + size="medium" + @click="removeAll()" + > + 导入 .cvs + </el-button> + <el-button + type="danger" + size="medium" + @click="removeAll()" + > + 清空 + </el-button> + </div> </div> </template> <script setup lang="ts"> -import { ref } from 'vue'; +import { ref, defineEmits } from 'vue'; type WordData = { name?: string; @@ -116,42 +134,63 @@ type WordData = { editAttr?: string; }; -const tableData = ref([{name: '测试', value: 100}] as WordData[]); +const tableData = ref([] as WordData[]); const pendingData = ref([{}] as WordData[]); +const emit = defineEmits(['change']); + +defineExpose({ data: tableData, setData }); + +function setData(data: WordData[]) { + tableData.value = data; + emit('change'); +} + function removeData(row: WordData) { tableData.value = tableData.value.filter(item => item !== row); + emit('change'); } function edit(row: WordData, attr: 'name' | 'value') { - console.log('edit', row, attr) row.editAttr = attr; } function doneEditing(row: WordData) { row.editAttr = undefined; + emit('change'); } function addRow() { - if (pendingData.value[0].name && pendingData.value[0].value) { - const value = parseFloat(pendingData.value[0].value as unknown as string); - if (isNaN(value)) { + if (pendingData.value[0].name) { + const rawValue = pendingData.value[0].value as unknown as string; + const value = parseFloat(rawValue); + if (rawValue != null && rawValue !== '' && isNaN(value)) { alert('请输入数字'); return; } else { - tableData.value.push({ - name: pendingData.value[0].name, - value - }); - pendingData.value = [{}]; + tableData.value.push({ + name: pendingData.value[0].name, + value + }); + pendingData.value = [{}]; + emit('change'); } } } + +function removeAll() { + tableData.value = []; + emit('change'); +} </script> <style lang="scss"> .word-table { width: 100%; } + +.padding { + padding: 10px; +} </style> diff --git a/src/data/defaultData.ts b/src/data/defaultData.ts new file mode 100644 index 0000000..7efce3e --- /dev/null +++ b/src/data/defaultData.ts @@ -0,0 +1,16 @@ +export default [{ + name: 'Apache', + value: 300 +}, { + name: 'ECharts', + value: 300 +}, { + name: 'WordCloud', + value: 300 +}, { + name: 'Generator', + value: 200 +}, { + name: 'Tool', + value: 80 +}]; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
