feat: 添加 Echarts 示例页

src/pages.json

@@ -27,6 +27,12 @@
                 "navigationBarTitleText": "Webview 示例"
             }
         },
+        {
+            "path": "pages/example/echarts/index",
+            "style": {
+                "navigationBarTitleText": "Echarts 示例"
+            }
+        },
 
         // ================================ 通用页面分割线 ====================================
         // === 关于我们 ===

src/pages/example/echarts/index.vue

+<!-- 分钟降水模块 -->
+
+<script setup lang="ts">
+    import { Echarts, useEcharts } from '@/components/Echarts'
+    import { WEATHER_CODE_MAPPING, getDayLabelValue, getWeatherIcon } from '@/utils/weather'
+
+    // 逐 7 天预报图表
+    const [register7Forecast, Forecast7Chart] = useEcharts()
+
+    onLoad(() => {
+        // TODO: 模拟逐 7 天预报数据
+        const _7DayForecastData = Array(7)
+            .fill(0)
+            .map(() => {
+                return {
+                    minTem: Number(Math.random() * 10 + 10).toFixed(1),
+                    maxTem: Number(Math.random() * 10 + 20).toFixed(1),
+                    dayWeather: Math.floor(Math.random() * 30 + 1),
+                    nightWeather: Math.floor(Math.random() * 30 + 1),
+                }
+            })
+        const _7DayForecastMaxTemValue = Math.max(..._7DayForecastData.map((item) => Number(item.maxTem)))
+
+        // 设置逐 7 天预报图表参数
+        Forecast7Chart.setOption({
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow',
+                },
+            },
+            grid: {
+                top: '34%',
+                bottom: '6%',
+                left: '3%',
+                right: '3%',
+            },
+            xAxis: [
+                {
+                    type: 'category',
+                    data: [],
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        interval: 0,
+                    },
+                },
+                {
+                    type: 'category',
+                    data: [],
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        interval: 0,
+                    },
+                },
+            ],
+            yAxis: {
+                type: 'value',
+                splitLine: {
+                    show: false,
+                },
+                axisLabel: {
+                    show: false,
+                },
+            },
+            series: [
+                {
+                    label: {
+                        show: true,
+                        position: 'top',
+                        formatter: '{c}°c',
+                    },
+                    type: 'line',
+                    data: _7DayForecastData.map((item) => item.maxTem),
+                    smooth: true,
+                    color: '#F79D80',
+                },
+                {
+                    label: {
+                        show: true,
+                        position: 'bottom',
+                        formatter: '{c}°c',
+                    },
+                    type: 'line',
+                    data: _7DayForecastData.map((item) => item.minTem),
+                    smooth: true,
+                    color: '#1890FF',
+                },
+                {
+                    type: 'scatter',
+                    data: _7DayForecastData.map((item, index) => {
+                        const { label, value } = getDayLabelValue(index)
+
+                        return {
+                            value: [
+                                index,
+                                Number(_7DayForecastMaxTemValue) + 7,
+                                WEATHER_CODE_MAPPING[item.dayWeather].text,
+                            ],
+                            symbol: `image://${getWeatherIcon(String(item.dayWeather))}`,
+                            symbolSize: [32, 32],
+                            symbolOffset: [0, -35],
+                            label: {
+                                show: true,
+                                position: 'top',
+                                formatter: `${label}\n\n${value}\n\n{@[2]}`,
+                                fontWeight: 'bold',
+                            },
+                        }
+                    }),
+                },
+                {
+                    type: 'scatter',
+                    data: _7DayForecastData.map((item, index) => {
+                        return {
+                            value: [index, -7, WEATHER_CODE_MAPPING[item.nightWeather].text],
+                            symbol: `image://${getWeatherIcon(String(item.nightWeather))}`,
+                            symbolSize: [32, 32],
+                            symbolOffset: [0, -20],
+                            label: {
+                                show: true,
+                                position: 'bottom',
+                                formatter: '{@[2]}',
+                                fontWeight: 'bold',
+                            },
+                        }
+                    }),
+                },
+            ],
+        })
+    })
+</script>
+
+<template>
+    <view class="wrap p-3">
+        <!-- 逐 7 天预报图表 -->
+        <view class="rain-forecast mt-3 bg-#fff rd-1.5 shadow flex flex-col pt-1">
+            <view class="flex items-center justify-between p-3 px-4">
+                <view class="text-32 font-600">7 天预报</view>
+                <view class="text-24">发布时间：2023-09-27 08:00</view>
+            </view>
+            <scroll-view class="flex-1" scroll-x="true">
+                <Echarts @register="register7Forecast" class="w-700 h-600" />
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+    //
+
+    :deep(.map) {
+        height: 100% !important;
+    }
+</style>

src/pages/example/index.vue

@@ -14,6 +14,11 @@
                 icon: 'logos-internetexplorer',
                 page: '/pages/example/webview/index',
             },
+            {
+                name: 'Echarts 示例',
+                icon: 'logos-chartblocks',
+                page: '/pages/example/echarts/index',
+            },
         ],
     })
 </script>

src/pages/example/mapbox/mapbox.module.js

-import { accessToken, defaultStyle, loadMapControl, loadMapboxLibs } from '/@/components/Map/Mapbox'
-
-// renderjs 官方文档
-// https://uniapp.dcloud.io/tutorial/renderjs.html
-// renderjs 的一些细节问题
-// https://juejin.cn/post/7049185827582115870
-
-export default {
-    mounted() {},
-    methods: {
-        loadLibs: loadMapboxLibs,
-        initMap(options) {
-            // 移除地图
-            if (this.map && this.map.remove) {
-                this.map.remove()
-            }
-
-            // 加载地图
-            const mapboxgl = window.mapboxgl
-            const map = new mapboxgl.Map({
-                accessToken,
-                container: options.container,
-                style: Object.assign({
-                    ...defaultStyle,
-                    ...options?.style,
-                }),
-            })
-
-            // 绑定作用域
-            this.map = map
-
-            // 加载地图控件
-            map.on('load', () => {
-                // #ifdef APP-PLUS
-                if (options?.control?.geolocate) {
-                    window.navigator.permissions = undefined
-                    options.control.geolocate = {
-                        geolocation: {
-                            getCurrentPosition: (onPositionSuccess, _onPositionError, options) => {
-                                this.onPositionSuccess = onPositionSuccess
-                                this.$ownerInstance.callMethod('getCurrentPosition', options)
-                            },
-                        },
-                    }
-                }
-                // #endif
-
-                // 加载地图图层
-                this.initMapLayers()
-                    .then(() => {
-                        // 调用逻辑层方法
-                        this.loaded = true
-                        this.$ownerInstance.callMethod('onMapLoad', {
-                            center: map.getCenter(),
-                        })
-
-                        // 加载地图控件
-                        loadMapControl(mapboxgl, map, options?.control)
-                    })
-                    .catch(console.log)
-            })
-        },
-        initMapLayers() {
-            this.addPointLayer()
-            return this.addPopupImage()
-        },
-        addPointLayer() {
-            this.map.addLayer({
-                id: 'point',
-                type: 'symbol',
-                source: {
-                    type: 'geojson',
-                    data: {
-                        type: 'FeatureCollection',
-                        features: [],
-                    },
-                },
-                layout: {
-                    'text-field': ['get', 'name'],
-                    'icon-text-fit': 'both',
-                    'icon-image': 'popup',
-                    'icon-allow-overlap': true,
-                    'text-allow-overlap': true,
-                },
-            })
-        },
-        addPopupImage() {
-            return new Promise((resolve, reject) => {
-                const popup = 'https://docs.mapbox.com/mapbox-gl-js/assets/popup.png'
-                this.map.loadImage(popup, (error, image) => {
-                    if (error) {
-                        reject(error)
-                    } else {
-                        this.map.addImage('popup', image, {
-                            stretchX: [
-                                [25, 55],
-                                [85, 115],
-                            ],
-                            stretchY: [[25, 100]],
-                            content: [25, 25, 115, 100],
-                            pixelRatio: 2,
-                        })
-                        resolve()
-                    }
-                })
-            })
-        },
-        changeOptions(options) {
-            if (!options.container) {
-                return
-            }
-
-            if (typeof window.mapboxgl === 'object') {
-                this.initMap(options)
-            } else {
-                this.loadLibs().then(() => {
-                    this.initMap(options)
-                })
-            }
-        },
-        changePosition(position) {
-            if (!this.loaded) {
-                return
-            }
-
-            this.onPositionSuccess?.(position)
-        },
-        changeDataPoint(point) {
-            if (!this.loaded) {
-                return
-            }
-
-            // 更新数据源
-            this.map.getSource('point').setData({
-                type: 'FeatureCollection',
-                features: [point],
-            })
-        },
-    },
-}

src/utils/weather.ts

+import dayjs from 'dayjs'
+
+/**
+ * 天气现象编码映射
+ */
+export const WEATHER_CODE_MAPPING = {
+    '1': {
+        code: '1',
+        text: '晴',
+    },
+    '2': {
+        code: '2',
+        text: '多云',
+    },
+    '3': {
+        code: '3',
+        text: '阴',
+    },
+    '4': {
+        code: '4',
+        text: '雷阵雨',
+    },
+    '5': {
+        code: '5',
+        text: '冰雹',
+    },
+    '6': {
+        code: '6',
+        text: '雨夹雪',
+    },
+    '7': {
+        code: '7',
+        text: '阵雨',
+    },
+    '8': {
+        code: '8',
+        text: '小雨',
+    },
+    '9': {
+        code: '9',
+        text: '中雨',
+    },
+    '10': {
+        code: '10',
+        text: '大雨',
+    },
+    '11': {
+        code: '11',
+        text: '暴雨',
+    },
+    '12': {
+        code: '12',
+        text: '阵雪',
+    },
+    '13': {
+        code: '13',
+        text: '小雪',
+    },
+    '14': {
+        code: '14',
+        text: '中雪',
+    },
+    '15': {
+        code: '15',
+        text: '大雪',
+    },
+    '16': {
+        code: '16',
+        text: '暴雪',
+    },
+    '17': {
+        code: '17',
+        text: '轻雾',
+    },
+    '18': {
+        code: '18',
+        text: '雾',
+    },
+    '19': {
+        code: '19',
+        text: '大雾',
+    },
+    '20': {
+        code: '20',
+        text: '浓雾',
+    },
+    '21': {
+        code: '21',
+        text: '冻雨',
+    },
+    '22': {
+        code: '22',
+        text: '沙尘暴',
+    },
+    '23': {
+        code: '23',
+        text: '浮尘',
+    },
+    '24': {
+        code: '24',
+        text: '扬沙',
+    },
+    '25': {
+        code: '25',
+        text: '霾',
+    },
+    '26': {
+        code: '26',
+        text: '中度霾',
+    },
+    '27': {
+        code: '27',
+        text: '重度霾',
+    },
+    '28': {
+        code: '28',
+        text: '严重霾',
+    },
+    '29': {
+        code: '29',
+        text: '雷电',
+    },
+    '30': {
+        code: '30',
+        text: '龙卷风',
+    },
+}
+
+export function getWeatherIcon(code: string) {
+    const nightIcon = ['1', '2', '4', '7', '12']
+    const isNightFlag = dayjs().hour() >= 18 && nightIcon.includes(code)
+    return `static/images/weather/${isNightFlag ? 'night' : 'day'}${code}.png`
+}
+
+export function getDayLabelValue(index: number) {
+    const today = dayjs()
+    const targetDate = today.add(index, 'day')
+    const dayOfWeek = targetDate.day()
+
+    let dayLabel = ''
+    if (index === 0) {
+        dayLabel = '今天'
+    } else if (index === 1) {
+        dayLabel = '明天'
+    } else {
+        dayLabel = dayjs().day(dayOfWeek).format('dddd')
+    }
+
+    return {
+        label: dayLabel,
+        value: targetDate.format('MM/DD'),
+    }
+}
+
+export function getWindSpeedLevel(speed) {
+    if (speed < 1) {
+        return '无风'
+    } else if (speed < 6) {
+        return '软风'
+    } else if (speed < 12) {
+        return '轻风'
+    } else if (speed < 20) {
+        return '微风'
+    } else if (speed < 29) {
+        return '和风'
+    } else if (speed < 39) {
+        return '清风'
+    } else if (speed < 50) {
+        return '强风'
+    } else if (speed < 62) {
+        return '疾风'
+    } else if (speed < 75) {
+        return '大风'
+    } else if (speed < 89) {
+        return '烈风'
+    } else if (speed < 103) {
+        return '狂风'
+    } else {
+        return '飓风'
+    }
+}
+
+export function getWindDirectionText(direction) {
+    const directions = ['北', '东北', '东', '东南', '南', '西南', '西', '西北']
+    const index = Math.round(direction / 45) % 8
+    return directions[index]
+}

types/auto-imports.d.ts

 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {

types/components.d.ts

@@ -139,6 +139,7 @@ declare module 'vue' {
     Mapbox: typeof import('./../src/components/Map/Mapbox/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Src: typeof import('./../src/components/Echarts/src/index.vue')['default']
     Switch: typeof import('./../src/components/Map/Widgets/Switch/src/Switch.vue')['default']
     ThumbnailPreview: typeof import('./../src/components/ThumbnailPreview/index.vue')['default']
     TimeBar: typeof import('./../src/components/Map/Widgets/TimeBar/src/TimeBar.vue')['default']

unocss.config.ts

@@ -8,7 +8,12 @@ const { presetWeappAttributify, transformerAttributify } = extractorAttributify(
     attributes: [...defaultAttributes, 'icon'],
 })
 
-const ICONS = ['emojione:globe-showing-europe-africa', 'logos:internetexplorer', 'emojione:letter-z']
+const ICONS = [
+    'emojione:globe-showing-europe-africa',
+    'logos:internetexplorer',
+    'logos-chartblocks',
+    'emojione:letter-z',
+]
 
 export default defineConfig({
     shortcuts: [