From 44ef538691b8be0fd925ca80c49157bad14962e8 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期六, 06 七月 2024 22:01:26 +0800
Subject: [PATCH] 一些优化
---
src/views/demo/charts/Map.vue | 123 +++++++++++++++++++---------------------
1 files changed, 59 insertions(+), 64 deletions(-)
diff --git a/src/views/demo/charts/Map.vue b/src/views/demo/charts/Map.vue
index e07344c..74cfac2 100644
--- a/src/views/demo/charts/Map.vue
+++ b/src/views/demo/charts/Map.vue
@@ -1,75 +1,70 @@
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
-<script lang="ts">
- import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
-
- import { useECharts } from '/@/hooks/web/useECharts';
+<script lang="ts" setup>
+ import { PropType, ref, Ref, onMounted } from 'vue';
+ import { useECharts } from '@/hooks/web/useECharts';
import { mapData } from './data';
import { registerMap } from 'echarts';
- export default defineComponent({
- props: {
- width: {
- type: String as PropType<string>,
- default: '100%',
- },
- height: {
- type: String as PropType<string>,
- default: 'calc(100vh - 78px)',
- },
+ defineProps({
+ width: {
+ type: String as PropType<string>,
+ default: '100%',
},
- setup() {
- const chartRef = ref<HTMLDivElement | null>(null);
- const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+ height: {
+ type: String as PropType<string>,
+ default: 'calc(100vh - 78px)',
+ },
+ });
- onMounted(async () => {
- const json = (await (await import('./china.json')).default) as any;
- registerMap('china', json);
- setOptions({
- visualMap: [
- {
- min: 0,
- max: 1000,
- left: 'left',
- top: 'bottom',
- text: ['楂�', '浣�'],
- calculable: false,
- orient: 'horizontal',
- inRange: {
- color: ['#e0ffff', '#006edd'],
- symbolSize: [30, 100],
- },
- },
- ],
- tooltip: {
- trigger: 'item',
- backgroundColor: 'rgba(0, 0, 0, .6)',
- textStyle: {
- color: '#fff',
- fontSize: 12,
- },
+ const chartRef = ref<HTMLDivElement | null>(null);
+ const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+ onMounted(async () => {
+ const json = (await (await import('./china.json')).default) as any;
+ registerMap('china', json);
+ setOptions({
+ visualMap: [
+ {
+ min: 0,
+ max: 1000,
+ left: 'left',
+ top: 'bottom',
+ text: ['楂�', '浣�'],
+ calculable: false,
+ orient: 'horizontal',
+ inRange: {
+ color: ['#e0ffff', '#006edd'],
+ symbolSize: [30, 100],
},
- series: [
- {
- name: 'iphone4',
- type: 'map',
- map: 'china',
- label: {
- show: true,
- color: 'rgb(249, 249, 249)',
- fontSize: 10,
- },
- itemStyle: {
- areaColor: '#2f82ce',
- borderColor: '#0DAAC1',
- },
- data: mapData,
- },
- ],
- });
- });
- return { chartRef };
- },
+ },
+ ],
+ tooltip: {
+ trigger: 'item',
+ backgroundColor: 'rgba(0, 0, 0, .6)',
+ textStyle: {
+ color: '#fff',
+ fontSize: 12,
+ },
+ },
+ series: [
+ {
+ name: 'iphone4',
+ type: 'map',
+ map: 'china',
+ label: {
+ show: true,
+ color: 'rgb(249, 249, 249)',
+ fontSize: 10,
+ },
+ itemStyle: {
+ areaColor: '#2f82ce',
+ borderColor: '#0DAAC1',
+ },
+ data: mapData,
+ },
+ ],
+ });
});
</script>
--
Gitblit v1.9.3