feat: export image
diff --git a/src/App.vue b/src/App.vue
index 3d99246..dede2ab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@
{{ $t('title') }}
</h3>
<el-tabs type="card" v-model="activeName">
- <el-tab-pane label="样式" name="config">
+ <el-tab-pane id="config-tab" label="样式" name="config">
<WConfig
ref="wconfig"
@change="onChange"
@@ -17,7 +17,48 @@
<el-tab-pane label="数据" name="data">
<WData ref="wdata" @change="onChange"></WData>
</el-tab-pane>
- <el-tab-pane label="导出" name="export">导出</el-tab-pane>
+ <el-tab-pane label="导出" name="export">
+ <WExport @sizeChange="onSizeChange" @download="onDownload"></WExport>
+ </el-tab-pane>
+ <el-tab-pane label="关于" name="about">
+ <h5>项目说明</h5>
+ <p class="small">
+ <a
+ href="https://github.com/ecomfe/echarts-wordcloud"
+ target="_blank"
+ >echarts-wordcloud</a
+ >
+ 是
+ <a href="https://github.com/apache/echarts" target="_blank"
+ >Apache ECharts</a
+ >
+ 基于
+ <a href="https://github.com/timdream/wordcloud2.js" target="_blank"
+ >wordcloud2.js</a
+ >
+ 的插件，需要使用 JavaScript
+ 开发。本项目是基于该插件的字符云生成器，用于方便用户无代码生成字符云效果。如果需要更丰富的效果，可以考虑基于上述字符云插件开发。
+ </p>
+ <h5>项目源码</h5>
+ <p class="small">
+ <a
+ href="https://github.com/apache/echarts-wordcloud-generator"
+ target="_blank"
+ >
+ apache/echarts-wordcloud-generator
+ </a>
+ </p>
+ <h5>版权说明</h5>
+ <p class="small">
+ 从本工具下载的图片可免费个人使用或商业使用。源代码版权：
+ <a
+ href="https://github.com/apache/echarts-wordcloud-generator/blob/master/LICENSE"
+ target="_blank"
+ >
+ Apache License 2.0</a
+ >。
+ </p>
+ </el-tab-pane>
</el-tabs>
</el-aside>
<el-main>
@@ -32,6 +73,7 @@
import WChart from './components/WChart.vue';
import WConfig from './components/WConfig.vue';
import WData from './components/WData.vue';
+import WExport from './components/WExport.vue';
import defaultData from './data/defaultData';
const wconfig = ref<any>(null);
@@ -42,7 +84,19 @@
const activeName = 'config';
function onChange() {
- wchart.value?.run(wdata.value?.data, wconfig.value?.getConfig());
+ wchart.value?.run(
+ wdata.value?.data,
+ wdata.value?.fillSmall,
+ wconfig.value?.getConfig()
+ );
+}
+
+function onSizeChange(size: { width: number; height: number }) {
+ wchart.value?.resize(size.width, size.height);
+}
+
+function onDownload() {
+ wchart.value?.download();
}
function onFontLoading() {
@@ -62,6 +116,10 @@
h4 {
margin: 10px 0;
}
+
+.el-collapse:first-child {
+ border-top: 0;
+}
</style>
<style scoped lang="scss">
@@ -85,4 +143,13 @@
height: calc(100vh - 50px);
overflow: auto;
}
+
+#config-tab {
+ margin-top: -15px;
+}
+
+.small {
+ margin: 5px 0 20px 0;
+ font-size: 14px;
+}
</style>
diff --git a/src/components/WChart.vue b/src/components/WChart.vue
index 61f8b0b..cbdeea6 100644
--- a/src/components/WChart.vue
+++ b/src/components/WChart.vue
@@ -1,6 +1,13 @@
<template>
<div v-loading="isWebFontLoading" element-loading-text="字体加载中">
- <div class="chart" ref="chartRef">aaa</div>
+ <div
+ class="chart"
+ ref="chartRef"
+ v-bind:style="{
+ width: width + 'px',
+ height: height + 'px'
+ }"
+ ></div>
</div>
</template>
@@ -10,16 +17,17 @@
import 'echarts-wordcloud';
import Color from 'color';
-// const props = defineProps({
-// foo: String
-// });
const chart = shallowRef<echarts.ECharts | null>(null);
const chartRef = ref<HTMLElement | null>(null);
const isWebFontLoading = ref(false);
+const width = ref(800);
+const height = ref(600);
defineExpose({
run,
- setLoading
+ setLoading,
+ resize,
+ download
});
type Config = {
@@ -41,14 +49,53 @@
isWebFontLoading.value = isLoading;
}
-function run(data?: [], config?: Config) {
+function resize(w: number, h: number) {
+ w = Math.max(100, w);
+ h = Math.max(100, h);
+ if (width.value !== w || height.value !== h) {
+ width.value = w;
+ height.value = h;
+ }
+ setTimeout(() => {
+ chart.value!.resize();
+ });
+}
+
+function download() {
+ if (chart.value) {
+ try {
+ const url = chart.value.getDataURL();
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = 'wordcloud.png';
+ a.click();
+ } catch (e) {
+ console.error(e);
+ alert('保存出错了，可以尝试在右图中点击鼠标右键，并选择“图片储存为”');
+ }
+ }
+}
+
+function run(data?: [], fillSmall?: boolean, config?: Config) {
+ const chartData = (data ? data.slice() : []) as {
+ name: string;
+ value: number;
+ }[];
+ // if (fillSmall) {
+ // const smallData = chartData.filter((d) => d.value < 10);
+ // const maxData = 400;
+ // for (let i = chartData.length; i < maxData; ++i) {
+ // for (let j = 0; j < smallData.length && i < maxData; ++j) {
+ // chartData.push({
+ // name: smallData[j].name,
+ // value: smallData[j].value
+ // });
+ // }
+ // }
+ // }
+
const hues = config
- ? config.themeColors.map(
- color =>
- Color(color)
- .hsl()
- .object().h
- )
+ ? config.themeColors.map((color) => Color(color).hsl().object().h)
: [];
function getHue() {
@@ -72,7 +119,7 @@
series: [
{
type: 'wordCloud',
- data: data || [],
+ data: chartData,
gridSize: 4,
sizeRange: config?.fontSize,
rotationRange: config?.rotate,
@@ -111,8 +158,7 @@
maskImage.onerror = () => {
render();
};
- }
- else {
+ } else {
render();
}
}
diff --git a/src/components/WConfig.vue b/src/components/WConfig.vue
index 637fb48..259aba8 100644
--- a/src/components/WConfig.vue
+++ b/src/components/WConfig.vue
@@ -25,7 +25,7 @@
<h5>色相范围</h5>
<el-row>
- <el-col :span="14">
+ <el-col :span="22">
<el-color-picker
v-for="(color, index) in themeColors"
v-bind:key="index"
@@ -41,14 +41,14 @@
<i class="el-icon-plus"></i>
</div>
</el-col>
- <el-col :span="8" :offset="2">
+ <!-- <el-col :span="8" :offset="2">
<el-checkbox>关联数据大小</el-checkbox>
- </el-col>
+ </el-col> -->
</el-row>
<h5>饱和度范围</h5>
<el-row>
- <el-col :span="13" :offset="1">
+ <el-col :span="22" :offset="1">
<el-slider
v-model="saturation"
range
@@ -60,14 +60,14 @@
>
</el-slider>
</el-col>
- <el-col :span="8" :offset="2">
+ <!-- <el-col :span="8" :offset="2">
<el-checkbox>关联数据大小</el-checkbox>
- </el-col>
+ </el-col> -->
</el-row>
<h5>亮度范围</h5>
<el-row>
- <el-col :span="13" :offset="1">
+ <el-col :span="22" :offset="1">
<el-slider
v-model="lightness"
range
@@ -79,9 +79,9 @@
>
</el-slider>
</el-col>
- <el-col :span="8" :offset="2">
+ <!-- <el-col :span="8" :offset="2">
<el-checkbox>关联数据大小</el-checkbox>
- </el-col>
+ </el-col> -->
</el-row>
<!-- <h5>透明度范围</h5>
@@ -198,15 +198,13 @@
<h5>遮罩形状</h5>
</el-col>
<el-col :span="12" class="header-right">
- <el-checkbox
- v-model="shapeRatio"
- @change="change"
- >
+ <el-checkbox v-model="shapeRatio" @change="change">
保持长宽比
</el-checkbox>
</el-col>
</el-row>
- <div class="img-select"
+ <div
+ class="img-select"
v-for="item in masks"
:key="item.value"
:value="item.value"
@@ -224,12 +222,20 @@
:show-file-list="false"
list-type="picture"
:on-success="handleImageSuccess"
- :before-upload="beforeImageUpload">
- <img v-if="imageUrl" :src="imageUrl">
+ :before-upload="beforeImageUpload"
+ >
+ <img v-if="imageUrl" :src="imageUrl" />
<i v-else class="el-icon-plus img-uploader-icon"></i>
</el-upload>
<div class="hint">
- 带 * 的形状来自 <a href="https://www.freepik.com" title="Freepik" _target="_blank">Freepik</a>，查看<a href="https://media.flaticon.com/license/license.pdf" _target="_blank">版权</a>
+ 带 * 的形状来自
+ <a href="https://www.freepik.com" title="Freepik" _target="_blank"
+ >Freepik</a
+ >，查看<a
+ href="https://media.flaticon.com/license/license.pdf"
+ _target="_blank"
+ >版权</a
+ >
</div>
</el-collapse-item>
</el-collapse>
@@ -237,7 +243,6 @@
<script setup lang="ts">
import { ref } from 'vue';
-import Color from 'color';
import WebFont from 'webfontloader';
const colorPalettes = [
@@ -261,8 +266,8 @@
const bgColor = ref(colorPalettes[0].bgColor);
const themeColors = ref(colorPalettes[0].themeColors);
-const saturation = ref([50, 80]);
-const lightness = ref([50, 80]);
+const saturation = ref([20, 40]);
+const lightness = ref([50, 75]);
const alpha = ref([0.5, 0.8]);
const selectedFontFamily = ref('Arial');
const fontSize = ref([4, 100]);
@@ -435,7 +440,9 @@
function changeFontFamily() {
let fontFamily = selectedFontFamily.value;
- const font = fontFamilies[1].children.find(item => item.value === fontFamily);
+ const font = fontFamilies[1].children.find(
+ (item) => item.value === fontFamily
+ );
if (font && !webFontsLoaded.includes(font.value)) {
emit('fontLoading');
WebFont.load({
@@ -460,29 +467,29 @@
}
function changeColor() {
- let minS = 100;
- let maxS = 0;
- let minL = 100;
- let maxL = 0;
- themeColors.value.forEach(color => {
- const c = Color(color);
- const s = Math.round(c.saturationv());
- const l = Math.round(c.lightness());
- if (s < minS) {
- minS = s;
- }
- if (s > maxS) {
- maxS = s;
- }
- if (l < minL) {
- minL = l;
- }
- if (l > maxL) {
- maxL = l;
- }
- });
- saturation.value = [minS, maxS];
- lightness.value = [minL, maxL];
+ // let minS = 100;
+ // let maxS = 0;
+ // let minL = 100;
+ // let maxL = 0;
+ // themeColors.value.forEach((color) => {
+ // const c = Color(color);
+ // const s = Math.round(c.saturationv());
+ // const l = Math.round(c.lightness());
+ // if (s < minS) {
+ // minS = s;
+ // }
+ // if (s > maxS) {
+ // maxS = s;
+ // }
+ // if (l < minL) {
+ // minL = l;
+ // }
+ // if (l > maxL) {
+ // maxL = l;
+ // }
+ // });
+ // saturation.value = [minS, maxS];
+ // lightness.value = [minL, maxL];
change();
}
@@ -538,7 +545,7 @@
width: width.value,
height: height.value,
shape: selectedMask.value,
- shapeRatio: shapeRatio.value,
+ shapeRatio: shapeRatio.value
};
}
</script>
diff --git a/src/components/WData.vue b/src/components/WData.vue
index a7bfc47..637827b 100644
--- a/src/components/WData.vue
+++ b/src/components/WData.vue
@@ -1,5 +1,6 @@
<template>
<div>
+ <!-- <el-checkbox :v-model="fillSmall">用小于 10 的数据填充剩余空间</el-checkbox> -->
<el-table class="word-table" :data="tableData" empty-text="无数据">
<el-table-column prop="name" label="文本">
<template v-slot="scope">
@@ -47,7 +48,8 @@
<el-table class="word-table" :show-header="false" :data="pendingData">
<el-table-column fixed prop="name" label="文本">
<template v-slot="scope">
- <el-input size="small" v-model="scope.row.name"> </el-input>
+ <el-input size="small" v-model="scope.row.name" placeholder="文本">
+ </el-input>
</template>
</el-table-column>
<el-table-column prop="value" label="大小">
@@ -55,7 +57,7 @@
<el-input
size="small"
v-model="scope.row.value"
- placeholder="留空则随机大小"
+ placeholder="相对大小"
>
</el-input>
</template>
@@ -69,9 +71,9 @@
</el-table-column>
</el-table>
<div class="padding">
- <el-button type="primary" size="medium" @click="removeAll()">
+ <!-- <el-button type="primary" size="medium" @click="removeAll()">
导入 .cvs
- </el-button>
+ </el-button> -->
<el-button type="danger" size="medium" @click="removeAll()">
清空
</el-button>
@@ -80,7 +82,7 @@
</template>
<script setup lang="ts">
-import { ref, defineEmits } from "vue";
+import { ref, defineEmits } from 'vue';
type WordData = {
name?: string;
@@ -90,36 +92,37 @@
const tableData = ref([] as WordData[]);
const pendingData = ref([{}] as WordData[]);
+const fillSmall = ref(true);
-const emit = defineEmits(["change"]);
+const emit = defineEmits(['change']);
-defineExpose({ data: tableData, setData });
+defineExpose({ data: tableData, setData, fillSmall });
function setData(data: WordData[]) {
tableData.value = data;
- emit("change");
+ emit('change');
}
function removeData(row: WordData) {
- tableData.value = tableData.value.filter(item => item !== row);
- emit("change");
+ tableData.value = tableData.value.filter((item) => item !== row);
+ emit('change');
}
-function edit(row: WordData, attr: "name" | "value") {
+function edit(row: WordData, attr: 'name' | 'value') {
row.editAttr = attr;
}
function doneEditing(row: WordData) {
row.editAttr = undefined;
- emit("change");
+ emit('change');
}
function addRow() {
if (pendingData.value[0].name) {
- const rawValue = (pendingData.value[0].value as unknown) as string;
+ const rawValue = pendingData.value[0].value as unknown as string;
const value = parseFloat(rawValue);
- if (rawValue != null && rawValue !== "" && isNaN(value)) {
- alert("请输入数字");
+ if (rawValue != null && rawValue !== '' && isNaN(value)) {
+ alert('请输入数字');
return;
} else {
tableData.value.push({
@@ -127,14 +130,14 @@
value
});
pendingData.value = [{}];
- emit("change");
+ emit('change');
}
}
}
function removeAll() {
tableData.value = [];
- emit("change");
+ emit('change');
}
</script>
diff --git a/src/components/WExport.vue b/src/components/WExport.vue
new file mode 100644
index 0000000..1e617ec
--- /dev/null
+++ b/src/components/WExport.vue
@@ -0,0 +1,72 @@
+<template>
+ <h5>画布尺寸</h5>
+ <el-row>
+ <el-col :span="4">
+ <h5>宽度</h5>
+ </el-col>
+ <el-col :span="7">
+ <el-input
+ type="number"
+ v-model="width"
+ :min="100"
+ :max="2000"
+ :step="10"
+ size="small"
+ @change="onSizeChange"
+ >
+ </el-input>
+ </el-col>
+ <el-col :span="4" :offset="1">
+ <h5>高度</h5>
+ </el-col>
+ <el-col :span="7">
+ <el-input
+ type="number"
+ v-model="height"
+ :min="100"
+ :max="2000"
+ :step="10"
+ size="small"
+ @change="onSizeChange"
+ >
+ </el-input>
+ </el-col>
+ </el-row>
+ <div class="padding">
+ <el-button type="primary" size="medium" @click="download()">
+ 下载图片
+ </el-button>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const width = ref('800');
+const height = ref('600');
+
+defineExpose({ getSize });
+
+const emit = defineEmits(['sizeChange', 'download']);
+
+function getSize() {
+ return {
+ width: parseInt(width.value, 10),
+ height: parseInt(height.value, 10)
+ };
+}
+
+function onSizeChange() {
+ emit('sizeChange', getSize());
+}
+
+function download() {
+ emit('download');
+}
+</script>
+
+<style lang="scss">
+.padding {
+ padding: 20px 0;
+}
+</style>
