zhui-plus 1.0.0 → 1.0.10

package/packages/components/charts/src/zh-mapChart.vue

@@ -0,0 +1,214 @@
+<!-- components/MapChart.vue -->
+<template>
+  <zh-baseChart
+      :chart-id="chartId"
+      :custom-option="mergedOption"
+      :chart-data="chartData"
+      :height="height"
+      :width="width"
+      @chartClick="handleClick"
+  />
+</template>
+
+<script setup lang="ts">
+import {computed, onMounted, defineProps, defineEmits} from 'vue'
+import type {EChartsOption} from 'echarts/types/dist/shared'
+import * as echarts from 'echarts'
+
+// 注意：需要先注册地图 GeoJSON 数据
+import chinaGeoJson from '../geo.json'
+import {json} from "stream/consumers";
+
+const props = defineProps({
+  chartId: {type: String, default: 'map-chart'},
+  mapName: {type: String, default: 'china'},
+  data: {type: Array as () => { name: string; value: number }[], required: true},
+  height: {type: String, default: '500px'},
+  width: {type: String, default: '100%'},
+  background:{type: String, default:'#013954'},
+  customOption: {type: Object as () => Partial<EChartsOption>, default: () => ({})},
+  geoJson: {type: Object as any, default: chinaGeoJson},
+  points: {type: Array as () => { value: []; itemStyle: Object }[], required: true},
+})
+
+const emit = defineEmits(['chartClick'])
+
+echarts.registerMap('china', props.geoJson)
+const chartData = computed(() => props.data)
+
+const mergedOption = computed(() => {
+  return {
+    backgroundColor: props.background,
+    geo: {
+      map: 'china',
+      aspectScale: 0.75, //长宽比
+      zoom: 1.1,
+      roam: false,
+      itemStyle: {
+        areaColor: {
+          type: 'radial',
+          x: 0.5,
+          y: 0.5,
+          r: 0.8,
+          colorStops: [{
+            offset: 0,
+            color: '#09132c' // 0% 处的颜色
+          }, {
+            offset: 1,
+            color: '#274d68'  // 100% 处的颜色
+          }],
+          globalCoord: true // 缺省为 false
+        },
+        shadowColor: 'rgb(58,115,192)',
+        shadowOffsetX: 10,
+        shadowOffsetY: 11,
+        emphasis: {
+          areaColor: '#2AB8FF',
+          borderWidth: 0,
+          color: 'green',
+          label: {
+            show: false
+          }
+        }
+      },
+      regions: [{
+        name: '南海诸岛',
+        itemStyle: {
+          areaColor: 'rgba(0, 10, 52, 1)',
+
+          borderColor: 'rgba(0, 10, 52, 1)',
+          normal: {
+            opacity: 0,
+            label: {
+              show: false,
+              color: "#009cc9",
+            }
+          }
+        },
+
+
+      }],
+    },
+    series: [{
+      name: '地图',
+      type: 'map',
+      zoom: 1.1,
+      map: props.mapName,
+      roam: false,
+      data: props.data,
+      label: {
+        show: true,
+        color: '#1DE9B6',
+        emphasis: {
+          color: 'rgb(183,185,14)'
+        }
+      },
+
+      itemStyle: {
+        borderColor: 'rgb(147, 235, 248)',
+        borderWidth: 1,
+        areaColor: {
+          type: 'radial',
+          x: 0.5,
+          y: 0.5,
+          r: 0.8,
+          colorStops: [{
+            offset: 0,
+            color: '#09132c' // 0% 处的颜色
+          }, {
+            offset: 1,
+            color: '#274d68'  // 100% 处的颜色
+          }],
+          globalCoord: true // 缺省为 false
+        },
+        emphasis: {
+          areaColor: 'rgb(46,229,206)',
+          //    shadowColor: 'rgb(12,25,50)',
+          borderWidth: 0.1
+        }
+      },
+    },
+      {
+        type: 'effectScatter',
+        coordinateSystem: 'geo',
+        showEffectOn: 'render',
+        zlevel: 1,
+        rippleEffect: {
+          period: 15,
+          scale: 4,
+          brushType: 'fill'
+        },
+        hoverAnimation: true,
+        label: {
+          formatter: '{b}',
+          position: 'right',
+          offset: [15, 0],
+          color: '#1DE9B6',
+          show: true
+        },
+        itemStyle: {
+          color: '#1DE9B6'/* function (value){ //随机颜色
+ return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
+ }*/,
+          shadowBlur: 10,
+          shadowColor: '#333'
+        },
+        symbolSize: 12,
+        data: props.points
+      },
+      {
+        type: 'lines',
+        zlevel: 2,
+        effect: {
+          show: true,
+          period: 4, //箭头指向速度，值越小速度越快
+          trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
+          symbol: 'arrow', //箭头图标
+          symbolSize: 7, //图标大小
+        },
+        lineStyle: {
+          color: '#1DE9B6'
+          /* function (value){ //随机颜色
+
+          ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
+          '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
+          '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
+          '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
+          '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
+          '#52b9c7','#4fb6d2','#4ab2e5']
+return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
+}*/,
+          width: 1, //线条宽度
+          opacity: 0.1, //尾迹线条透明度
+          curveness: .3 //尾迹线条曲直度
+        },
+        data: [
+          {coords: [[118.8062, 31.9208], [119.4543, 25.9222]], lineStyle: {color: '#4ab2e5'}}
+          , {coords: [[127.9688, 45.368], [119.4543, 25.9222]], lineStyle: {color: '#4fb6d2'}}
+          , {coords: [[110.3467, 41.4899], [119.4543, 25.9222]], lineStyle: {color: '#52b9c7'}}
+          , {coords: [[125.8154, 44.2584], [119.4543, 25.9222]], lineStyle: {color: '#5abead'}}
+          , {coords: [[116.4551, 40.2539], [119.4543, 25.9222]], lineStyle: {color: '#f34e2b'}}
+          , {coords: [[123.1238, 42.1216], [119.4543, 25.9222]], lineStyle: {color: '#f56321'}}
+          , {coords: [[114.4995, 38.1006], [119.4543, 25.9222]], lineStyle: {color: '#f56f1c'}}
+          , {coords: [[117.4219, 39.4189], [119.4543, 25.9222]], lineStyle: {color: '#f58414'}}
+          , {coords: [[112.3352, 37.9413], [119.4543, 25.9222]], lineStyle: {color: '#f58f0e'}}
+          , {coords: [[109.1162, 34.2004], [119.4543, 25.9222]], lineStyle: {color: '#f5a305'}}
+          , {coords: [[103.5901, 36.3043], [119.4543, 25.9222]], lineStyle: {color: '#e7ab0b'}}
+          , {coords: [[106.3586, 38.1775], [119.4543, 25.9222]], lineStyle: {color: '#dfae10'}}
+          , {coords: [[101.4038, 36.8207], [119.4543, 25.9222]], lineStyle: {color: '#d5b314'}}
+          , {coords: [[103.9526, 30.7617], [119.4543, 25.9222]], lineStyle: {color: '#c1bb1f'}}
+          , {coords: [[108.384366, 30.439702], [119.4543, 25.9222]], lineStyle: {color: '#b9be23'}}
+          , {coords: [[113.0823, 28.2568], [119.4543, 25.9222]], lineStyle: {color: '#a6c62c'}}
+          , {coords: [[102.9199, 25.46639], [119.4543, 25.9222]], lineStyle: {color: '#96cc34'}}
+        ]
+      }],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}<br/>{c}'
+    },
+    ...props.customOption
+  }
+})
+
+const handleClick = (params: any) => emit('chartClick', params)
+</script>

package/packages/components/charts/src/zh-pictorialBar.vue

@@ -0,0 +1,72 @@
+<!-- components/PictorialChart.vue -->
+<template>
+  <zh-baseChart
+      :chart-id="chartId"
+      :custom-option="mergedOption"
+      :chart-data="chartData"
+      :height="height"
+      :width="width"
+      @chartClick="handleClick"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed,defineProps,defineEmits } from 'vue'
+import type { EChartsOption} from 'echarts/types/dist/shared'
+
+const props = defineProps({
+  chartId: { type: String, required: true },
+  categories: { type: Array as () => string[], required: true },
+  data: { type: Array as () => number[], required: true },
+  symbol: { type: String, default: 'circle' }, // 支持: circle, rect, roundRect, triangle, diamond, pin, arrow
+  height: { type: String, default: '400px' },
+  width: { type: String, default: '100%' },
+  customOption: { type: Object as () => Partial<EChartsOption>, default: () => ({}) }
+})
+
+const emit = defineEmits(['chartClick'])
+
+const chartData = computed(() => ({
+  categories: props.categories,
+  data: props.data
+}))
+
+const mergedOption = computed<EChartsOption>(() => {
+  const maxValue = Math.max(...props.data) || 100
+
+  return {
+    xAxis: {
+      type: 'category',
+      data: props.categories,
+      axisTick: { show: false },
+      axisLine: { show: false }
+    },
+    yAxis: {
+      type: 'value',
+      max: maxValue * 1.2,
+      splitLine: { lineStyle: { color: '#F0F0F0' } }
+    },
+    series: [{
+      type: 'pictorialBar',
+      data: props.data,
+      symbol: props.symbol,
+      symbolRepeat: true,
+      symbolSize: ['80%', '60%'],
+      symbolMargin: 2,
+      itemStyle: {
+        color: {
+          type: 'linear',
+          x: 0, y: 0, x2: 0, y2: 1,
+          colorStops: [
+            { offset: 0, color: '#A8E6CF' },
+            { offset: 1, color: '#7EC8A3' }
+          ]
+        }
+      }
+    }],
+    ...props.customOption
+  }
+})
+
+const handleClick = (params: any) => emit('chartClick', params)
+</script>

package/packages/components/charts/src/zh-pieChart.vue

@@ -0,0 +1,67 @@
+<!-- components/PieChart.vue -->
+<template>
+  <zh-baseChart
+      :chart-id="chartId"
+      :custom-option="mergedOption"
+      :chart-data="chartData"
+      :height="height"
+      :width="width"
+      @chartClick="handleClick"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed,defineProps,defineEmits } from 'vue'
+import type { EChartsOption} from 'echarts/types/dist/shared'
+
+const props = defineProps({
+  chartId: { type: String, required: true },
+  data: { type: Array as () => { name: string; value: number }[], required: true },
+  // 饼图类型: 'pie' | 'doughnut' | 'rose'
+  type: { type: String as () => 'pie' | 'doughnut' | 'rose', default: 'pie' },
+  height: { type: String, default: '400px' },
+  width: { type: String, default: '100%' },
+  customOption: { type: Object as () => Partial<EChartsOption>, default: () => ({}) }
+})
+
+const emit = defineEmits(['chartClick'])
+
+const chartData = computed(() => props.data)
+
+const mergedOption = computed(() => {
+  // 马卡龙风格饼图色板
+  const pieColors = ['#F7B6D2', '#A8E6CF', '#FFD3B6', '#D4A5E6', '#B5EAD7', '#FFC8A2']
+
+  const baseSeries = {
+    type: 'pie',
+    data: props.data,
+    radius: props.type === 'doughnut' ? ['40%', '70%'] : (props.type === 'rose' ? [20, '70%'] : '70%'),
+    center: ['50%', '50%'],
+    roseType: props.type === 'rose' ? 'radius' : undefined,
+    itemStyle: {
+      borderRadius: 8,
+      borderColor: '#fff',
+      borderWidth: 2
+    },
+    label: {
+      show: true,
+      formatter: '{b}: {d}%',
+      color: '#333'
+    },
+    emphasis: {
+      scale: true,
+      label: { show: true, fontWeight: 'bold' }
+    }
+  }
+
+  return {
+    color: pieColors,
+    series: [baseSeries],
+    legend: { orient: 'vertical', left: 'left' },
+    tooltip: { trigger: 'item' },
+    ...props.customOption
+  }
+})
+
+const handleClick = (params: any) => emit('chartClick', params)
+</script>

package/packages/components/charts/src/zh-radarChart.vue

@@ -0,0 +1,131 @@
+<template>
+  <zh-baseChart
+      :chart-id="chartId"
+      :custom-option="mergedOption"
+      :chart-data="internalData"
+      :height="height"
+      :width="width"
+      @chartReady="emit('chartReady', $event)"
+      @chartClick="emit('chartClick', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+import type { EChartsOption, EChartsType } from 'echarts/types/dist/shared'
+import { getMacaronColor} from '../../../utils/utils'
+
+export interface RadarIndicator {
+  name: string
+  max: number
+  min?: number
+}
+
+export interface RadarSeries {
+  name: string
+  data: {
+    value: number[]
+    name?: string
+  }[]
+}
+
+// Props 定义
+const props = defineProps({
+  chartId: { type: String, required: true },
+  indicator: { type: Array as () => RadarIndicator[], required: true },
+  seriesData: { type: Array as () => RadarSeries[], required: true },
+  shape: { type: String as () => 'polygon' | 'circle', default: 'polygon' },
+  center: { type: Array as () => [string | number, string | number] | any, default: () => ['50%', '50%'] },
+  radius: { type: [String, Number], default: '65%' },
+  areaOpacity: { type: Number, default: 0.15 },
+  showArea: { type: Boolean, default: true },
+  colorConfig: { type: [String, Array], default: 'macaron' },
+  height: { type: String, default: '400px' },
+  width: { type: String, default: '100%' },
+  customOption: { type: Object as () => Partial<EChartsOption>, default: () => ({}) }
+})
+
+const emit = defineEmits<{
+  chartReady: [chartInstance: EChartsType]
+  chartClick: [params: any]
+}>()
+
+const { indicator, seriesData, shape, center, radius, areaOpacity, showArea, colorConfig } = toRefs(props)
+
+// 适配 BaseChart 要求的数据格式（内部传递用）
+const internalData = computed(() => ({
+  indicator: indicator.value,
+  seriesData: seriesData.value
+}))
+
+// 根据配置解析系列颜色
+function getSeriesColor(index: number): string {
+  const cfg = colorConfig.value
+  if (typeof cfg === 'string' && cfg !== 'macaron') return cfg
+  if (Array.isArray(cfg)) return cfg[index % cfg.length]
+  return getMacaronColor(index) // 默认马卡龙色板
+}
+
+// 构建最终 ECharts 配置
+const mergedOption = computed<EChartsOption>(() => {
+  const series = seriesData.value.map((item, sIndex) => {
+    const color = getSeriesColor(sIndex)
+    return {
+      name: item.name,
+      type: 'radar',
+      data: item.data.map(d => ({
+        value: d.value,
+        name: d.name || item.name
+      })),
+      symbol: 'circle',
+      symbolSize: 4,
+      lineStyle: {
+        color,
+        width: 2
+      },
+      areaStyle: showArea.value ? {
+        color: color + Math.round(areaOpacity.value * 255).toString(16).padStart(2, '0') // 简单的透明度十六进制
+      } : undefined,
+      itemStyle: {
+        color
+      }
+    }
+  })
+
+  return {
+    radar: {
+      indicator: indicator.value,
+      shape: shape.value,
+      center: center.value,
+      radius: typeof radius.value === 'number' ? radius.value : radius.value.toString(),
+      axisName: {
+        color: '#666666',
+        fontSize: 12,
+        borderRadius: 3,
+        padding: [3, 5]
+      },
+      splitArea: {
+        areaStyle: {
+          color: ['rgba(168, 230, 207, 0.05)', 'rgba(168, 230, 207, 0.1)'] // 马卡龙淡绿分区
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#DDDDDD'
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#CCCCCC'
+        }
+      }
+    },
+    series,
+    tooltip: {
+      trigger: 'item'
+    },
+    ...props.customOption
+  } as EChartsOption
+})
+</script>
+

package/packages/components/charts/src/zh-scatterChart.vue

@@ -0,0 +1,152 @@
+<!-- ScatterChart.vue -->
+<template>
+  <zh-baseChart
+      :chart-id="chartId"
+      :custom-option="mergedOption"
+      :chart-data="internalData"
+      :height="height"
+      :width="width"
+      @chartReady="onChartReady"
+      @chartClick="$emit('chartClick', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import {computed, toRefs} from 'vue'
+import type {EChartsOption} from 'echarts/types/dist/shared'
+import {generateLinearGradient, getMacaronColor} from '../../../utils/utils'
+
+// 单个散点数据格式：二维数组 [x, y] 或包含扩展字段的对象
+type ScatterDataItem = [number, number] | {
+  value: [number, number], // 坐标
+  [key: string]: any       // 自定义属性（如 category、color）
+}
+
+// 数据源：可包含多个系列
+interface ScatterData {
+  seriesName?: string
+  data: ScatterDataItem[]
+}
+
+const props = defineProps({
+  chartId: {type: String, required: true},
+  data: {type: Array as () => ScatterData | any, required: true},
+  colorConfig: {type: [String, Array, Function], default: 'macaron'},
+  enableBrush: {type: Boolean, default: true},
+  brushConfig: {type: Object, default: () => ({})},
+  symbol: {type: String, default: 'circle'},
+  symbolSize: {type: [Number, Function], default: 8},
+  large: {type: Boolean, default: true},
+  largeThreshold: {type: Number, default: 1000},
+  height: {type: String, default: '400px'},
+  width: {type: String, default: '100%'},
+  customOption: {type: Object as () => Partial<echarts.EChartsOption>, default: () => ({})}
+})
+
+const emit = defineEmits(['chartReady', 'chartClick', 'brushSelected', 'brushEnd'])
+
+const {data, colorConfig, enableBrush, brushConfig} = toRefs(props)
+
+// 构建内部数据（兼容 BaseChart 的 chartData 格式）
+const internalData = computed(() => ({
+  seriesData: data.value
+}))
+
+// 核心配置：合并马卡龙主题 + 大数据优化 + 颜色策略 + 框选
+const mergedOption = computed(() => {
+  const series = data.value.map((serie, sIndex) => {
+    console.log(serie)
+    // 颜色计算
+    let color: string | ((params: any) => string)
+    const cfg = colorConfig.value
+    if (typeof cfg === 'function') {
+      color = (params: any) => cfg(params.data, sIndex)
+    } else if (Array.isArray(cfg)) {
+      const baseColor = cfg[sIndex % cfg.length]
+      color = baseColor
+    } else if (typeof cfg === 'string' && cfg !== 'macaron') {
+      color = cfg
+    } else {
+      color = getMacaronColor(sIndex) // 马卡龙风格
+    }
+     console.log('serie.seriesName',serie.seriesName)
+    return {
+      name: serie.seriesName || `系列${sIndex + 1}`,
+      type: 'scatter',
+      data: serie.data,
+      symbol: props.symbol,
+      symbolSize: props.symbolSize,
+      large: props.large && serie.data.length > props.largeThreshold,
+      largeThreshold: props.largeThreshold,
+      // 渐进式渲染
+      progressive: 500,
+      progressiveThreshold: 3000,
+      itemStyle: {
+        color: color as any, // 支持固定色或回调
+        opacity: 0.8
+      }
+    }
+  })
+
+  const brush: any = enableBrush.value ? {
+    toolbox: ['rect', 'polygon', 'clear'],
+    brushMode: 'single',
+    brushStyle: {
+      borderWidth: 1,
+      color: 'rgba(164, 229, 236, 0.2)',
+      borderColor: '#A4E5EC'
+    },
+    ...brushConfig.value
+  } : undefined
+
+  return {
+    xAxis: {
+      type: 'value',
+      splitLine: {show: true, lineStyle: {color: '#f0f0f0'}}
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {show: true, lineStyle: {color: '#f0f0f0'}}
+    },
+    series,
+    brush,
+    ...props.customOption
+  }
+})
+
+// 通过 BaseChart 的 chartReady 事件绑定 brush 事件
+const onChartReady = (chartInstance: any) => {
+  emit('chartReady', chartInstance)
+  if (enableBrush.value) {
+    chartInstance.on('brushSelected', (params: any) => {
+      const selected = extractSelectedItems(params, data.value)
+      emit('brushSelected', {selected, rawEvent: params})
+    })
+    chartInstance.off('brushEnd')
+    chartInstance.on('brushEnd', (params: any) => {
+      emit('brushEnd', params)
+    })
+  }
+}
+
+// 从 brush 事件中提取原始数据
+function extractSelectedItems(brushParams: any, seriesData: ScatterData) {
+  const selected: any[] = []
+  brushParams.batch?.forEach((batch: any) => {
+    batch.selected?.forEach((sel: any) => {
+      const serie = seriesData[sel.seriesIndex]
+      if (serie) {
+        sel.dataIndex.forEach((idx: number) => {
+          selected.push({
+            seriesIndex: sel.seriesIndex,
+            dataIndex: idx,
+            value: serie.data[idx]?.value || serie.data[idx],
+            originalData: serie.data[idx]
+          })
+        })
+      }
+    })
+  })
+  return selected
+}
+</script>

package/packages/components/chat/index.ts

@@ -0,0 +1,10 @@
+import ZhChat from './src/zh-chat.vue'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.component('ZhChat', ZhChat)
+  }
+}
+
+export { ZhChat }