misp-ui-library-test 0.0.1

package/src/packages/chart/src/main.vue

@@ -0,0 +1,828 @@
+<template>
+  <div class="ui-chart">
+    <transition name="fade">
+      <div v-show="hasData" v-init="chartInit" v-resize="chartResize" class="ui-chart__inner" />
+    </transition>
+    <transition name="fade">
+      <div v-show="!hasData" class="ui-chart__empty">
+        <ui-no-data />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import UiNoData from '../../no-data'
+
+import init from '../../../directives/init'
+import resize from '../../../directives/resize'
+import { debounce, isEmpty } from '../../../utils/lodash'
+import axisChart from './axis-chart'
+
+const CHART_RESIZE_DELAY = 200
+
+/**
+ * UiChart 图表组件
+ * 基于 ECharts 封装的通用图表组件，支持多种配置项和响应式布局
+ * @component
+ */
+export default {
+  name: 'UiChart',
+  components: { UiNoData },
+  mixins: [axisChart],
+  props: {
+    // --- 基础数据与行为 ---
+    
+    /**
+     * 系列数据列表，用于定义图表中的数据系列
+     * @type {Array<Object>}
+     * @default []
+     */
+    seriesData: {
+      type: Array,
+      default: () => []
+    },
+    
+    /**
+     * X轴数据列表，通常用于类目轴的数据源
+     * @type {Array<string|number>}
+     * @default []
+     */
+    xAxisData: {
+      type: Array,
+      default: () => []
+    },
+    
+    /**
+     * 图表主题，支持 'light' 或 'dark' 等 ECharts 内置主题或自定义主题名
+     * @type {string}
+     * @default 'light'
+     */
+    theme: {
+      type: String,
+      default: 'light'
+    },
+    
+    /**
+     * 是否保留空数据的坐标轴刻度
+     * @type {boolean}
+     * @default false
+     */
+    keepEmptyAxis: {
+      type: Boolean,
+      default: false
+    },
+    
+    /**
+     * 是否覆盖之前的配置项（对应 ECharts setOption 的 notMerge 参数）
+     * true: 不合并，完全替换配置
+     * false: 合并配置
+     * @type {boolean}
+     * @default false
+     */
+    cover: {
+      type: Boolean,
+      default: true
+    },
+    
+    /**
+     * 自定义颜色映射数组，用于指定系列颜色
+     * @type {Array<string>}
+     * @default []
+     */
+    colorMap: {
+      type: Array,
+      default: () => []
+    },
+    
+    /**
+     * 是否在图表中显示具体数值标签
+     * @type {boolean}
+     * @default false
+     */
+    showValue: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 数值标签基于数据点的位置
+     * @type {string}
+     * @default 'inside'
+     */
+    valueLabelPosition: {
+      type: String,
+      default: 'inside'
+    },
+    
+    /**
+     * 标记图形的大小，适用于散点图或折线图的符号
+     * @type {number}
+     * @default 12
+     */
+    symbolSize: {
+      type: Number,
+      default: 12
+    },
+    
+    /**
+     * 数据是否与标签绑定，影响数据展示逻辑
+     * @type {boolean}
+     * @default true
+     */
+    dataBindWithLabel: {
+      type: Boolean,
+      default: true
+    },
+    
+    /**
+     * 是否转置图表，即交换 X 轴和 Y 轴的数据映射
+     * @type {boolean}
+     * @default false
+     */
+    transpose: {
+      type: Boolean,
+      default: false
+    },
+    
+    /**
+     * 是否反转坐标轴方向
+     * @type {boolean}
+     * @default false
+     */
+    reverse: {
+      type: Boolean,
+      default: false
+    },
+    
+    /**
+     * 是否启用快速渲染模式，适用于大数据量场景
+     * @type {boolean}
+     * @default false
+     */
+    fastRender: {
+      type: Boolean,
+      default: false
+    },
+    
+    /**
+     * 渲染前的回调函数，可用于修改配置项
+     * @type {Function|null}
+     * @param {Object} option - 当前的图表配置项
+     * @returns {Object} 修改后的配置项
+     */
+    beforeRender: {
+      type: [Function, null],
+      default: null
+    },
+    
+    /**
+     * 渲染后的回调函数，可用于执行额外操作
+     * @type {Function|null}
+     * @param {EChartsInstance} chartInstance - ECharts 实例
+     */
+    afterRender: {
+      type: [Function, null],
+      default: null
+    },
+
+    // --- Legend 图例配置 ---
+    
+    /**
+     * 是否显示图例
+     * @type {boolean}
+     * @default true
+     */
+    displayLegend: {
+      type: Boolean,
+      default: true
+    },
+    
+    /**
+     * 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态
+     * @type {boolean|string}
+     * @default true
+     */
+    selectedMode: {
+      type: Boolean,
+      default: true
+    },
+    
+    /**
+     * 图例的位置，如 'top', 'bottom', 'left', 'right'
+     * @type {string}
+     * @default 'top'
+     */
+    legendPosition: {
+      type: String,
+      default: 'top'
+    },
+    
+    /**
+     * 图例边框与图表容器之间的间距 (px)
+     * @type {number}
+     * @default 15
+     */
+    legendBorderGap: {
+      type: Number,
+      default: 15
+    },
+    
+    /**
+     * 图例每项之间的间隔 (px)
+     * @type {number}
+     * @default 12
+     */
+    legendItemGap: {
+      type: Number,
+      default: 12
+    },
+    
+    /**
+     * 图例标记的宽度 (px)
+     * @type {number}
+     * @default 20
+     */
+    legendItemWidth: {
+      type: Number,
+      default: 20
+    },
+    
+    /**
+     * 图例标记的高度 (px)
+     * @type {number}
+     * @default 14
+     */
+    legendItemHeight: {
+      type: Number,
+      default: 14
+    },
+    
+    /**
+     * 图例分页按钮之间的间距 (px)
+     * @type {number}
+     * @default 5
+     */
+    legendPageButtonGap: {
+      type: Number,
+      default: 5
+    },
+    
+    /**
+     * 图例分页器与其他元素的间距 (px)
+     * @type {number}
+     * @default 10
+     */
+    legendPageGap: {
+      type: Number,
+      default: 10
+    },
+    
+    /**
+     * 图例分页器的位置
+     * @type {string}
+     * @default 'right'
+     */
+    legendPagePosition: {
+      type: String,
+      default: 'right'
+    },
+
+    // --- Tooltip 提示框配置 ---
+    
+    /**
+     * 是否显示提示框（Tooltip）
+     * @type {boolean}
+     * @default true
+     */
+    hasTooltip: {
+      type: Boolean,
+      default: true
+    },
+    
+    /**
+     * 提示框触发类型，如 'item', 'axis', 'none'
+     * @type {string}
+     * @default 'axis'
+     */
+    tooltipTrigger: {
+      type: String,
+      default: 'axis'
+    },
+    
+    /**
+     * 是否启用坐标轴指示器类型的提示框
+     * @type {boolean}
+     * @default false
+     */
+    axisTooltip: {
+      type: Boolean,
+      default: false
+    },
+    
+    /**
+     * 提示框是否使用工具函数格式化
+     * @type {boolean}
+     * @default false
+     */
+    tooltipWithUtil: {
+      type: Boolean,
+      default: false
+    },
+    
+    /**
+     * 自定义提示框内容格式化函数
+     * @type {Function|null}
+     * @param {Object} params - ECharts tooltip params
+     * @returns {string} HTML 字符串
+     */
+    tooltipFormatter: {
+      type: [Function, null],
+      default: null
+    },
+
+    // --- Datazoom 缩放配置 ---
+    
+    /**
+     * 是否启用数据区域缩放组件
+     * @type {boolean}
+     * @default false
+     */
+    isZoom: {
+      type: Boolean,
+      default: false
+    },
+    
+    /**
+     * 默认显示的数据范围百分比，如 [0, 9] 表示显示前10%的数据
+     * @type {Array<number>}
+     * @default [0, 9]
+     */
+    displayRange: {
+      type: Array,
+      default: () => [0, 9]
+    },
+    
+    /**
+     * 缩放条的高度 (px)
+     * @type {number}
+     * @default 12
+     */
+    zoomBarHeight: {
+      type: Number,
+      default: 12
+    },
+    
+    /**
+     * 缩放条的位置，如 'bottom', 'top'
+     * @type {string}
+     * @default 'bottom'
+     */
+    zoomBarPosition: {
+      type: String,
+      default: 'bottom'
+    },
+    
+    /**
+     * 缩放条与容器边缘的间距 (px)
+     * @type {number}
+     * @default 20
+     */
+    zoomBarGap: {
+      type: Number,
+      default: 20
+    },
+    
+    /**
+     * 缩放条与图表主体之间的间距 (px)
+     * @type {number}
+     * @default 10
+     */
+    zoomBarChartGap: {
+      type: Number,
+      default: 10
+    },
+    
+    /**
+     * 缩放条标签的格式化函数
+     * @type {Function|null}
+     * @param {string|number} value - 标签值
+     * @returns {string} 格式化后的标签
+     */
+    zoomBarLabelFormatter: {
+      type: [Function, null],
+      default: null
+    },
+
+    // --- Grid 图表边距 ---
+    
+    /**
+     * 网格区域距离容器顶部的距离 (px)
+     * @type {number}
+     * @default 20
+     */
+    gridTop: {
+      type: Number,
+      default: 20
+    },
+    
+    /**
+     * 网格区域距离容器底部的距离 (px)
+     * @type {number}
+     * @default 20
+     */
+    gridBottom: {
+      type: Number,
+      default: 20
+    },
+    
+    /**
+     * 网格区域距离容器左侧的距离 (px)
+     * @type {number}
+     * @default 20
+     */
+    gridLeft: {
+      type: Number,
+      default: 20
+    },
+    
+    /**
+     * 网格区域距离容器右侧的距离 (px)
+     * @type {number}
+     * @default 54
+     */
+    gridRight: {
+      type: Number,
+      default: 54
+    },
+    
+    /**
+     * 网格区域是否包含坐标轴标签
+     * @type {boolean}
+     * @default true
+     */
+    gridContainLabel: {
+      type: Boolean,
+      default: true
+    },
+
+    // --- X 轴样式配置 ---
+    
+    /**
+     * X轴名称，可以是字符串或字符串数组（多轴时）
+     * @type {string|Array<string>}
+     * @default ''
+     */
+    xAxisName: {
+      type: [String, Array],
+      default: ''
+    },
+    
+    /**
+     * X轴类型，如 'category', 'value', 'time', 'log'
+     * @type {string}
+     * @default 'category'
+     */
+    xAxisType: {
+      type: String,
+      default: 'category'
+    },
+
+    /**
+     * X轴名称的颜色
+     * @type {string}
+     * @default 'sd-text'
+     */
+    xAxisNameColor: {
+      type: String,
+      default: 'sd-text'
+    },
+    
+    /**
+     * X轴名称的字体大小 (px)
+     * @type {number}
+     * @default 12
+     */
+    xAxisNameFontSize: {
+      type: Number,
+      default: 12
+    },
+    
+    /**
+     * X轴轴线的颜色
+     * @type {string}
+     * @default 'primary-line'
+     */
+    xAxisLineColor: {
+      type: String,
+      default: 'primary-line'
+    },
+    
+    /**
+     * X轴分割线的颜色
+     * @type {string}
+     * @default 'primary-line'
+     */
+    xAxisSplitLineColor: {
+      type: String,
+      default: 'primary-line'
+    },
+    
+    /**
+     * X轴标签的最大宽度 (px)，超出可能截断或换行
+     * @type {number}
+     * @default 320
+     */
+    xAxisLabelWidth: {
+      type: Number,
+      default: 320
+    },
+    
+    /**
+     * X轴标签文字的颜色
+     * @type {string}
+     * @default 'sd-text'
+     */
+    xAxisLabelColor: {
+      type: String,
+      default: 'sd-text'
+    },
+    
+    /**
+     * X轴标签文字的字体大小 (px)
+     * @type {number}
+     * @default 12
+     */
+    xAxisLabelFontSize: {
+      type: Number,
+      default: 12
+    },
+    
+    /**
+     * X轴刻度的最小值
+     * @type {number|string|Array}
+     */
+    xAxisValueMin: {
+      type: [Number, String, Array],
+      default: undefined
+    },
+    
+    /**
+     * X轴刻度的最大值
+     * @type {number|string|Array}
+     */
+    xAxisValueMax: {
+      type: [Number, String, Array],
+      default: undefined
+    },
+    
+    /**
+     * 是否显示X轴最小的标签
+     * @type {boolean}
+     */
+    xAxisShowMinLabel: {
+      type: Boolean,
+      default: undefined
+    },
+    
+    /**
+     * 是否显示X轴最大的标签
+     * @type {boolean}
+     */
+    xAxisShowMaxLabel: {
+      type: Boolean,
+      default: undefined
+    },
+    
+    /**
+     * X轴标签的格式化函数
+     * @type {Function|null}
+     * @param {string|number} value - 标签值
+     * @returns {string} 格式化后的标签
+     */
+    xAxisLabelFormatter: {
+      type: [Function, null],
+      default: null
+    },
+
+    // --- Y 轴样式配置 ---
+    
+    /**
+     * Y轴名称，可以是字符串或字符串数组（多轴时）
+     * @type {string|Array<string>}
+     * @default ''
+     */
+    yAxisName: {
+      type: [String, Array],
+      default: ''
+    },
+    
+    /**
+     * Y轴单位，可以是字符串或字符串数组
+     * @type {string|Array<string>}
+     * @default ''
+     */
+    yAxisUnit: {
+      type: [String, Array],
+      default: ''
+    },
+    
+    /**
+     * Y轴名称的颜色
+     * @type {string}
+     * @default 'sd-text'
+     */
+    yAxisNameColor: {
+      type: String,
+      default: 'sd-text'
+    },
+    
+    /**
+     * Y轴名称的字体大小 (px)
+     * @type {number}
+     * @default 12
+     */
+    yAxisNameFontSize: {
+      type: Number,
+      default: 12
+    },
+    
+    /**
+     * Y轴轴线的颜色
+     * @type {string}
+     * @default 'primary-line'
+     */
+    yAxisLineColor: {
+      type: String,
+      default: 'primary-line'
+    },
+    
+    /**
+     * Y轴分割线的颜色
+     * @type {string}
+     * @default 'primary-line'
+     */
+    yAxisSplitLineColor: {
+      type: String,
+      default: 'primary-line'
+    },
+    
+    /**
+     * Y轴标签的最大宽度 (px)
+     * @type {number}
+     * @default 32
+     */
+    yAxisLabelWidth: {
+      type: Number,
+      default: 32
+    },
+    
+    /**
+     * Y轴标签文字的颜色
+     * @type {string}
+     * @default 'sd-text'
+     */
+    yAxisLabelColor: {
+      type: String,
+      default: 'sd-text'
+    },
+    
+    /**
+     * Y轴标签文字的字体大小 (px)
+     * @type {number}
+     * @default 12
+     */
+    yAxisLabelFontSize: {
+      type: Number,
+      default: 12
+    },
+    
+    /**
+     * Y轴刻度的最小值
+     * @type {number|string|Array}
+     */
+    yAxisValueMin: {
+      type: [Number, String, Array],
+      default: undefined
+    },
+    
+    /**
+     * Y轴刻度的最大值
+     * @type {number|string|Array}
+     */
+    yAxisValueMax: {
+      type: [Number, String, Array],
+      default: undefined
+    },
+    
+    /**
+     * 是否显示Y轴最小的标签
+     * @type {boolean}
+     */
+    yAxisShowMinLabel: {
+      type: Boolean,
+      default: undefined
+    },
+    
+    /**
+     * 是否显示Y轴最大的标签
+     * @type {boolean}
+     */
+    yAxisShowMaxLabel: {
+      type: Boolean,
+      default: undefined
+    },
+    
+    /**
+     * Y轴标签的格式化函数
+     * @type {Function|null}
+     * @param {string|number} value - 标签值
+     * @returns {string} 格式化后的标签
+     */
+    yAxisLabelFormatter: {
+      type: [Function, null],
+      default: null
+    }
+  },
+  data: () => ({
+    /**
+     * ECharts 实例对象
+     * @type {EChartsInstance|null}
+     */
+    echartInstance: null,
+    
+    /**
+     * 图表配置项缓存，用于主题切换或重新渲染时保留配置
+     * @type {Object|null}
+     */
+    optionBuffer: null,
+  }),
+  filters: {},
+  computed: {
+    /**
+     * 判断是否有数据用于展示图表
+     * @returns {boolean}
+     */
+    hasData() {
+      return this.keepEmptyAxis || !isEmpty(this.seriesData)
+    },
+  },
+  watch: {
+    /**
+     * 监听主题变化，重新渲染图表以应用新主题
+     * @param {string} newTheme - 新主题名称
+     */
+    theme() {
+      this.chartRender(this.optionBuffer)
+    },
+  },
+  directives: { init, resize },
+  created() {
+    this.chartResize = debounce(function () {
+      this.echartInstance?.resize();
+    }, CHART_RESIZE_DELAY)
+  },
+  mounted() {},
+  activated() {},
+  beforeDestroy() {
+    // 组件销毁前 dispose ECharts 实例，防止内存泄漏
+    this.echartInstance?.dispose()
+  },
+  methods: {
+    /**
+     * 图表初始化指令回调
+     * @param {HTMLElement} el - 图表容器 DOM 元素
+     */
+    chartInit(el) {
+      this.echartInstance = this.$echarts.init(el);
+      this.chartRender(this.optionBuffer)
+    },
+    
+    /**
+     * 图表因容器大小变化而重新调整尺寸（防抖处理）
+     * @function
+     */
+    chartResize() {},
+    
+    /**
+     * 图表渲染方法
+     * @param {Object} opt - ECharts 配置项
+     */
+    chartRender(opt) {
+      if (opt) {
+        this.optionBuffer = opt
+        if (this.echartInstance) {
+          // 设置配置项
+          this.echartInstance.setOption(opt, this.cover)
+          // 执行渲染后回调
+          if (this.afterRender && this.afterRender instanceof Function) {
+            this.afterRender(this.echartInstance)
+          }
+        }
+      }
+    },
+  },
+}
+
+</script>
+
+<style lang="scss" scoped> </style>