zhui-plus 1.0.0 → 1.0.10

package/packages/components/charts/index.ts

@@ -0,0 +1,35 @@
+import ZhBaseChart from './src/zh-baseChart.vue'
+import ZhLineChart from './src/zh-lineChart.vue'
+import ZhBarChart from './src/zh-barChart.vue'
+import ZhPieChart from './src/zh-pieChart.vue'
+import ZhMapChart from './src/zh-mapChart.vue'
+import ZhPictorialBar from './src/zh-pictorialBar.vue'
+import ZhLineBarChart from './src/zh-lineBarChart.vue'
+import ZhScatterChart from './src/zh-scatterChart.vue'
+import ZhRadarChart from './src/zh-radarChart.vue'
+import {App} from 'vue'
+
+export default {
+    install(app: App) {
+        app.component('ZhBaseChart', ZhBaseChart)
+        app.component('ZhLineChart', ZhLineChart)
+        app.component('ZhBarChart', ZhBarChart)
+        app.component('ZhPieChart', ZhPieChart)
+        app.component('ZhMapChart', ZhMapChart)
+        app.component('ZhPictorialBar', ZhPictorialBar)
+        app.component('ZhLineBarChart', ZhLineBarChart)
+        app.component('ZhScatterChart', ZhScatterChart)
+        app.component('ZhRadarChart', ZhRadarChart)
+    }
+}
+export {
+    ZhBaseChart,
+    ZhLineChart,
+    ZhBarChart,
+    ZhPieChart,
+    ZhMapChart,
+    ZhPictorialBar,
+    ZhLineBarChart,
+    ZhScatterChart,
+    ZhRadarChart
+}

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

@@ -0,0 +1,97 @@
+<!-- components/BarChart.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 = withDefaults(
+    defineProps<{
+      chartId?:  string,
+      xAxisData:  any[],
+      seriesData:  any[],
+      // 是否堆叠
+      stacked?: boolean,
+      // 柱状图方向: 'vertical' | 'horizontal'
+      direction?: string,
+      height?:  string,
+      width?: string,
+      customOption?: Partial<EChartsOption>
+    }>(), {
+      chartId: 'bar-chart',
+      stacked: true,
+      direction: 'vertical',
+      height: '325px',
+      width: '100%',
+      customOption: () => ({}),
+      seriesData:()=>([]),
+      xAxisData: ()=>([])
+    }
+)
+
+const emit = defineEmits(['chartClick'])
+
+const chartData = computed(() => ({
+  xAxisData: props.xAxisData,
+  seriesData: props.seriesData
+}))
+
+const mergedOption = computed(() => {
+  const isHorizontal = props.direction === 'horizontal'
+
+  const series = props.seriesData.map((item, index) => {
+    const color = `#${['F7B6D2', 'A8E6CF', 'FFD3B6', 'D4A5E6'][index % 4]}`
+    return {
+      name: item.name,
+      type: 'bar',
+      data: item.data,
+      stack: props.stacked ? 'total' : undefined, // 堆叠配置
+      // barWidth: props.stacked ? '50%' : '40%',
+      itemStyle: {
+        borderRadius: props.stacked ?[0,0,0,0]:[4, 4, 0, 0],
+        // 柱子渐变（从上往下）
+        color:  props.stacked ? null:{
+          type: 'linear',
+          x: 0, y: 0, x2: 0, y2: 1,
+          colorStops: [
+            { offset: 0, color },
+            { offset: 1, color: `${color}80` } // 80 为透明度
+          ]
+        }
+      },
+      label: {
+        show: true,
+        position: 'top',
+        color: '#666'
+      }
+    }
+  })
+
+  return {
+    xAxis: {
+      type: isHorizontal ? 'value' : 'category',
+      data: isHorizontal ? undefined : props.xAxisData,
+      axisLine: { show: false },
+      axisTick: { show: false }
+    },
+    yAxis: {
+      type: isHorizontal ? 'category' : 'value',
+      data: isHorizontal ? props.xAxisData : undefined,
+      splitLine: isHorizontal ? { show: false } : { lineStyle: { color: '#F0F0F0' } }
+    },
+    series,
+    ...props.customOption
+  }
+})
+
+const handleClick = (params: any) => emit('chartClick', params)
+</script>

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

@@ -0,0 +1,196 @@
+<template>
+  <div
+      ref="chartRef"
+      :class="['base-chart', chartClass]"
+      :style="containerStyle"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, markRaw ,defineProps,defineEmits} from 'vue'
+import * as echarts from 'echarts';
+import * as glCharts from 'echarts-gl';
+
+import type { EChartsOption} from 'echarts/types/dist/shared'
+import { merge } from 'lodash-es'
+import { macaronsTheme } from '../../../utils/utils'
+
+type EChartsInstance = ReturnType<typeof echarts.init>
+// 注册自定义主题（包含马卡龙配色 + 渐变填充预设）
+echarts.registerTheme('macarons', macaronsTheme)
+
+const props = defineProps({
+  // 自定义配置（与默认配置合并）
+  customOption: {
+    type: Object as () => Partial<EChartsOption> | any,
+    default: () => ({})
+  },
+  // 图表数据
+  chartData: {
+    type: [Array, Object],
+    default: null
+  },
+  // 图表类型标识（用于生成唯一 ID）
+  chartId: {
+    type: String,
+    default: ''
+  },
+  // 容器高度
+  height: {
+    type: String,
+    default: '400px'
+  },
+  // 容器宽度
+  width: {
+    type: String,
+    default: '100%'
+  },
+  // 自定义类名
+  chartClass: {
+    type: String,
+    default: ''
+  }
+})
+console.log('props.customOption',props.customOption)
+const emit = defineEmits(['chartReady', 'chartClick'])
+
+// 生成唯一 ID（避免多个图表实例冲突）[reference:3]
+const uid = ref('')
+const chartRef = ref<HTMLElement | null>(null)
+const chartInstance = ref<EChartsInstance | null>(null)
+
+// 容器样式
+const containerStyle = computed(() => ({
+  width: props.width,
+  height: props.height
+}))
+
+// 默认图表配置（马卡龙风格基础配置）
+const defaultOption = computed<EChartsOption>(() => ({
+  backgroundColor: 'transparent',
+  // 马卡龙风格色板
+  color: [
+    '#F7B6D2', // 樱花粉
+    '#A8E6CF', // 薄荷绿
+    '#FFD3B6', // 奶油橘
+    '#D4A5E6', // 薰衣草紫
+    '#B5EAD7', // 浅海绿
+    '#FFC8A2', // 蜜桃色
+    '#C7CEE6', // 淡蓝灰
+    '#E2F0CB', // 嫩芽绿
+    '#FEC8D8', // 淡玫瑰
+    '#C4E0D9'  // 雾霾蓝
+  ],
+  // 全局字体配置
+  textStyle: {
+    fontFamily: '"PingFang SC", "Microsoft YaHei", sans-serif',
+    fontSize: 12,
+    color: '#333333'
+  },
+  // 提示框配置
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { type: 'shadow' },
+    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+    borderColor: '#E8E8E8',
+    borderWidth: 1,
+    textStyle: { color: '#333' }
+  },
+  // 图例配置
+  legend: {
+    icon: 'roundRect',
+    itemWidth: 12,
+    itemHeight: 8,
+    textStyle: { color: '#666' }
+  },
+  // 网格配置
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '10%',
+    containLabel: true
+  },
+  // 动画配置
+  animation: true,
+  animationDuration: 800,
+  animationEasing: 'cubicOut'
+}))
+
+// 合并后的完整配置
+const finalOption = computed<EChartsOption>(() => {
+  const baseOption = { ...defaultOption.value }
+  const dataOption = buildDataOption()
+  return merge({}, baseOption, dataOption, props.customOption)
+})
+
+// 根据数据构建配置（由具体图表组件覆盖）
+const buildDataOption = (): Partial<EChartsOption> => {
+  // 基类返回空，由子组件实现
+  return {}
+}
+
+// 初始化图表
+const initChart = () => {
+  console.log('initChart',chartRef.value)
+  console.log('customOption',props.customOption)
+  if (!chartRef.value) return
+  // 生成唯一 ID
+  uid.value = `chart-${props.chartId || ''}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
+  chartRef.value.setAttribute('data-chart-id', uid.value)
+
+  // 使用 markRaw 避免响应式代理[reference:4]
+  chartInstance.value = markRaw(echarts.init(chartRef.value, 'macarons'))
+  chartInstance.value.setOption(finalOption.value)
+
+  // 绑定点击事件
+  chartInstance.value.on('click', (params: any) => {
+    emit('chartClick', params)
+  })
+
+  emit('chartReady', chartInstance.value)
+}
+
+// 更新图表
+const updateChart = () => {
+  console.log('chartInstance.value',chartInstance.value)
+  if (!chartInstance.value) return
+  chartInstance.value.setOption(finalOption.value, {
+    notMerge: false,   // 不合并模式设为 false，保留交互状态
+    lazyUpdate: false
+  })
+}
+
+// 监听配置变化，自动更新图表[reference:5]
+watch(
+    () => [props.customOption, props.chartData],
+    () => {
+      console.log('updateChart',props.customOption)
+      updateChart()
+    },
+    { deep: true }
+)
+
+// 自适应处理
+const handleResize = () => {
+  chartInstance.value?.resize()
+}
+
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  if (chartInstance.value) {
+    chartInstance.value.dispose()
+    chartInstance.value = null
+  }
+})
+</script>
+
+<style scoped>
+.base-chart {
+  position: relative;
+}
+</style>

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

@@ -0,0 +1,113 @@
+<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} from 'vue'
+import type {EChartsOption} from 'echarts/types/dist/shared'
+import {generateLinearGradient,} from '../../../utils/utils'
+
+const props = defineProps({
+  chartId: {type: String, required: true},
+  xAxisData: {type: Array as () => string[], required: true},
+  seriesData: {type: Array as () => any[], default: () => []},
+  // 是否使用双 Y 轴
+  dualAxis: {type: Boolean, default: false},
+  height: {type: String, default: '400px'},
+  width: {type: String, default: '100%'},
+  smooth: {type: Boolean, default: false},// 是否平滑曲线
+  showArea: {type: Boolean, default: false},// 是否显示面积图
+  stacked: {type: Boolean, default: false},// 是否堆叠
+  customOption: {type: Object as () => Partial<EChartsOption>, default: () => ({})}
+})
+
+const emit = defineEmits(['chartClick'])
+
+const chartData = computed(() => ({
+  xAxisData: props.xAxisData,
+  seriesData: props.seriesData,
+}))
+
+const mergedOption = computed<EChartsOption>(() => {
+  const series: any[] = []
+
+
+  props.seriesData.forEach((item, index) => {
+    const color = `#${['FFD3B6', 'D4A5E6'][index % 2]}`
+    if (item.type == 'line') {
+      // 折线图系列
+      series.push({
+        name: item.name,
+        type: 'line',
+        data: item.data,
+        yAxisIndex: props.dualAxis && index > 0 ? 1 : 0,
+        smooth: props.smooth,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {width: 3, color},
+        areaStyle: props.showArea ? {
+          color: generateLinearGradient(null, color, 0.3)
+        } : null
+      })
+    } else {
+      // 柱状图系列
+      series.push({
+        name: item.name,
+        type: 'bar',
+        stack: props.stacked ? 'total' : undefined, // 堆叠配置
+        data: item.data,
+        yAxisIndex: 0,
+        barWidth: '30%',
+        itemStyle: {
+          borderRadius: props.stacked ?[0,0,0,0]:[4, 4, 0, 0],
+          // 柱子渐变（从上往下）
+          color:  props.stacked ? null:{
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [
+              { offset: 0, color },
+              { offset: 1, color: `${color}80` } // 80 为透明度
+            ]
+          }
+        },
+      })
+    }
+  })
+
+  const yAxis: any[] = [{
+    type: 'value',
+    name: '数值',
+    splitLine: {lineStyle: {color: '#F0F0F0'}}
+  }]
+
+  if (props.dualAxis) {
+    yAxis.push({
+      type: 'value',
+      name: '比率 %',
+      splitLine: {show: false}
+    })
+  }
+
+  return {
+    xAxis: {
+      type: 'category',
+      data: props.xAxisData,
+      axisTick: {show: false}
+    },
+    yAxis,
+    series,
+    legend: {bottom: 0},
+    tooltip: {trigger: 'axis'},
+    ...props.customOption
+  }
+})
+
+const handleClick = (params: any) => emit('chartClick', params)
+</script>

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

@@ -0,0 +1,93 @@
+<!-- components/LineChart.vue -->
+<template>
+  <zh-baseChart
+      ref="baseChartRef"
+      :chart-id="chartId"
+      :custom-option="mergedOption"
+      :chart-data="chartData"
+      :height="height"
+      :width="width"
+      @chartClick="handleClick"
+  />
+</template>
+
+<script setup lang="ts">
+import {computed, ref,defineProps} from 'vue'
+import type {EChartsOption} from 'echarts/types/dist/shared'
+import {generateLinearGradient} from '../../../utils/utils'
+
+const props = withDefaults(
+    defineProps<{
+      chartId?:  string,
+      xAxisData:  any[],
+      seriesData:  any[],
+      smooth?: boolean,
+      showArea?: boolean,
+      height?:  string,
+      width?: string,
+      customOption?: Partial<EChartsOption>
+    }>(), {
+      chartId: 'linechart',
+      smooth: true,
+      showArea: false,
+      height: '325px',
+      width: '100%',
+      customOption: () => ({}),
+      seriesData:()=>([]),
+      xAxisData: ()=>([])
+    }
+)
+
+const emit = defineEmits(['chartClick'])
+const baseChartRef = ref(null)
+const chartData = computed(() => ({
+  xAxisData: props.xAxisData,
+  seriesData: props.seriesData
+}))
+
+// 折线图专属配置：带渐变填充的面积图
+const mergedOption = computed(() => {
+  console.log('props.seriesData',props.seriesData)
+  const seriesWithGradient = props.seriesData.map((item, index) => {
+    const color = `#${['F7B6D2', 'A8E6CF', 'FFD3B6', 'D4A5E6'][index % 4]}`
+    return {
+      name: item.name,
+      type: 'line',
+      data: item.data,
+      smooth: props.smooth,
+      symbol: 'circle',
+      symbolSize: 6,
+      lineStyle: {width: 3, color},
+      // 面积渐变填充：从上往下渐变，透明度由深到浅[reference:6]
+      areaStyle: props.showArea ? {
+        color: generateLinearGradient(baseChartRef.value, color, 0.4)
+      } : undefined,
+      itemStyle: {
+        color: '#FFFFFF',
+        borderColor: color,
+        borderWidth: 2
+      }
+    }
+  })
+
+  return {
+    xAxis: {
+      type: 'category',
+      data: props.xAxisData,
+      axisLine: {lineStyle: {color: '#E0E0E0'}},
+      axisTick: {show: false}
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {lineStyle: {color: '#F0F0F0', type: 'dashed'}}
+    },
+    series: seriesWithGradient,
+    tooltip: {trigger: 'axis'},
+    ...props.customOption
+  }
+})
+
+const handleClick = (params: any) => {
+  emit('chartClick', params)
+}
+</script>