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 8d935b0dac2eea7b117da88ed6aa66367a3c1e02 Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Wed Dec 22 13:04:38 2021 +0800 feat: web font --- package-lock.json | 11 +++++ package.json | 4 +- src/App.vue | 16 ++++++- src/components/WChart.vue | 10 ++++- src/components/WConfig.vue | 108 ++++++++++++++++++++++++++++++++++++--------- 5 files changed, 125 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2766bfc..973455d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -380,6 +380,12 @@ "vfile-message": "*" } }, + "@types/webfontloader": { + "version": "1.6.33", + "resolved": "https://registry.npmmirror.com/@types/webfontloader/download/@types/webfontloader-1.6.33.tgz", + "integrity": "sha1-ze9mtTNBGTzhtNStdxcDaJ23dwg=", + "dev": true + }, "@vitejs/plugin-vue": { "version": "1.9.2", "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/download/@vitejs/plugin-vue-1.9.2.tgz", @@ -4934,6 +4940,11 @@ "vscode-vue-languageservice": "^0.25.17" } }, + "webfontloader": { + "version": "1.6.28", + "resolved": "https://registry.nlark.com/webfontloader/download/webfontloader-1.6.28.tgz", + "integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64=" + }, "which": { "version": "1.3.1", "resolved": "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz?cache=0&sync_timestamp=1605134855909&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwhich%2Fdownload%2Fwhich-1.3.1.tgz", diff --git a/package.json b/package.json index c79c5aa..2b55138 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "devDependencies": { "@babel/polyfill": "^7.12.1", "@types/color": "^3.0.2", + "@types/webfontloader": "^1.6.33", "@vitejs/plugin-vue": "^1.2.2", "@vue/compiler-sfc": "^3.0.11", "chalk": "^3.0.0", @@ -30,6 +31,7 @@ "element-plus": "^1.0.2-beta.44", "lodash": "^4.17.19", "vue": "^3.0.11", - "vue-i18n": "^9.1.6" + "vue-i18n": "^9.1.6", + "webfontloader": "^1.6.28" } } diff --git a/src/App.vue b/src/App.vue index c5d1655..3d99246 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,7 +6,13 @@ </h3> <el-tabs type="card" v-model="activeName"> <el-tab-pane label="样式" name="config"> - <WConfig ref="wconfig" @change="onChange"></WConfig> + <WConfig + ref="wconfig" + @change="onChange" + @fontLoading="onFontLoading" + @fontLoaded="onFontLoaded" + > + </WConfig> </el-tab-pane> <el-tab-pane label="数据" name="data"> <WData ref="wdata" @change="onChange"></WData> @@ -39,6 +45,14 @@ function onChange() { wchart.value?.run(wdata.value?.data, wconfig.value?.getConfig()); } +function onFontLoading() { + wchart.value?.setLoading(true); +} + +function onFontLoaded() { + wchart.value?.setLoading(false); +} + setTimeout(() => { wdata.value?.setData(defaultData); }); diff --git a/src/components/WChart.vue b/src/components/WChart.vue index 037d5ab..f62e6b3 100644 --- a/src/components/WChart.vue +++ b/src/components/WChart.vue @@ -1,5 +1,5 @@ <template> - <div> + <div v-loading="isWebFontLoading" element-loading-text="字体加载中"> <div class="chart" ref="chartRef">aaa</div> </div> </template> @@ -15,9 +15,11 @@ import Color from 'color'; // }); const chart = shallowRef<echarts.ECharts | null>(null); const chartRef = ref<HTMLElement | null>(null); +const isWebFontLoading = ref(false); defineExpose({ - run + run, + setLoading }); type Config = { @@ -34,6 +36,10 @@ type Config = { shape: string; }; +function setLoading(isLoading: boolean) { + isWebFontLoading.value = isLoading; +} + function run(data?: [], config?: Config) { const hues = config ? config.themeColors.map( diff --git a/src/components/WConfig.vue b/src/components/WConfig.vue index 37a11ff..33d6506 100644 --- a/src/components/WConfig.vue +++ b/src/components/WConfig.vue @@ -109,13 +109,19 @@ placeholder="请选择字体" @change="changeFontFamily" > - <el-option - v-for="item in fontFamilies" - :key="item" - :label="item" - :value="item" + <el-option-group + v-for="group in fontFamilies" + :key="group.name" + :label="group.name" > - </el-option> + <el-option + v-for="item in group.children" + :key="item" + :label="item.name" + :value="item.value" + > + </el-option> + </el-option-group> </el-select> </el-col> </el-row> @@ -212,6 +218,7 @@ <script setup lang="ts"> import { ref } from 'vue'; import Color from 'color'; +import WebFont from 'webfontloader'; const colorPalettes = [ { @@ -226,10 +233,6 @@ const colorPalettes = [ bgColor: '#dbf3ff', themeColors: ['#4aa6d5', '#d3b16a', '#fb8500'] }, - // { - // bgColor: '#eae2b7', - // themeColors: ['#003049', '#d62828', '#f77f00', '#fcbf49'] - // }, { bgColor: '#fbffd1', themeColors: ['#132a13', '#90a955', '#ecf39e'] @@ -248,17 +251,65 @@ const width = ref(90); const height = ref(90); const selectedMask = ref('circle'); +const normalizeFont = (font: string | { name: string; value: string }) => { + if (typeof font === 'string') { + return { + name: font, + value: font + }; + } + return font; +}; + +const sortFont = ( + a: { name: string; value: string }, + b: { name: string; value: string } +) => { + if (a.name < b.name) { + return -1; + } + if (a.name > b.name) { + return 1; + } + return 0; +}; + const fontFamilies = [ - 'Arial', - 'Lato', - 'Times New Roman', - 'Courier New', - 'Georgia', - 'Helvetica', - 'Lucida Sans', - 'Tahoma', - 'Verdana' + { + name: '系统字体', + children: [ + 'Arial', + 'Times New Roman', + 'Courier New', + 'Georgia', + { name: '宋体/华文宋体', value: 'SimSun, STSong' }, + { name: '黑体/华文黑体', value: 'SimHei, STHeiti' }, + { name: '微软雅黑', value: 'Microsoft YaHei' } + ] + .map(normalizeFont) + .sort(sortFont) + }, + { + name: 'Google Fonts', + children: [ + 'Pushster', + 'Lato', + 'Roboto', + 'Roboto Slab', + 'Open Sans', + 'Oswald', + 'Ubuntu', + 'Lobster', + { name: '马善政毛笔楷书', value: 'Ma Shan Zheng' }, + { name: '站酷庆科黄油体', value: 'ZCOOL QingKe HuangYou' }, + { name: '站酷小薇LOGO体', value: 'ZCOOL XiaoWei' } + ] + .map(normalizeFont) + .sort(sortFont) + } ]; +const webFontsLoaded: string[] = []; + const masks = [ { name: '椭圆', @@ -293,7 +344,7 @@ const masks = [ } ]; -const emit = defineEmits(['change']); +const emit = defineEmits(['change', 'fontLoading', 'fontLoaded']); defineExpose({ getConfig }); @@ -302,6 +353,23 @@ setTimeout(() => { }, 0); function changeFontFamily() { + let fontFamily = selectedFontFamily.value; + const font = fontFamilies[1].children.find(item => item.value === fontFamily); + if (font && !webFontsLoaded.includes(font.value)) { + emit('fontLoading'); + WebFont.load({ + google: { + families: [fontFamily] + }, + fontactive: () => { + webFontsLoaded.push(font.value); + emit('fontLoaded'); + change(); + } + }); + return; + } + change(); } --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org