Skip to content
Permalink
Browse files
feat: export image
  • Loading branch information
Ovilia committed Jan 10, 2022
1 parent 07a20d5 commit c2201acbe29f94f8902d16ea956423e63e5d3943
Showing 5 changed files with 275 additions and 80 deletions.
@@ -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 { useI18n } from 'vue-i18n';
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 { t } = useI18n({ useScope: 'global' });
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 @@ setTimeout(() => {
h4 {
margin: 10px 0;
}
.el-collapse:first-child {
border-top: 0;
}
</style>

<style scoped lang="scss">
@@ -85,4 +143,13 @@ h4 {
height: calc(100vh - 50px);
overflow: auto;
}
#config-tab {
margin-top: -15px;
}
.small {
margin: 5px 0 20px 0;
font-size: 14px;
}
</style>
@@ -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 * as echarts from 'echarts';
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 @@ function setLoading(isLoading: boolean) {
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 @@ function run(data?: [], config?: Config) {
series: [
{
type: 'wordCloud',
data: data || [],
data: chartData,
gridSize: 4,
sizeRange: config?.fontSize,
rotationRange: config?.rotate,
@@ -111,8 +158,7 @@ function run(data?: [], config?: Config) {
maskImage.onerror = () => {
render();
};
}
else {
} else {
render();
}
}

0 comments on commit c2201ac

Please sign in to comment.