@travel-screen/l-module-components 1.0.0

package/src/l-bar-chart/index.vue

@@ -0,0 +1,405 @@
+<template>
+  <div ref="echartsBox" class="l-bar-chart" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import interfaceObj from './interface/index'
+import { tooltipItemsHtmlString } from '../../utils/tooltip'
+
+export default {
+  name: 'LBarChart',
+  props: interfaceObj,
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    dataList: {
+      handler() {
+        this.initChart()
+      },
+      deep: true
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  mounted() {
+    if (this.dataList.length > 0) {
+      this.initChart()
+    }
+  },
+  methods: {
+    // 销毁图表实例
+    cDispose() {
+      this.chart.dispose()
+      this.chart = null
+    },
+
+    // 导出图表为图片（可供外部调用）
+    exportChartImage(options = {}) {
+      if (!this.chart) return null
+      const fileName = options.fileName || this.exportFileName
+      const pixelRatio = options.pixelRatio || this.exportPixelRatio
+      const type = options.type || this.exportType
+      const url = this.chart.getDataURL({
+        type: `image/${type}`,
+        pixelRatio: pixelRatio,
+        backgroundColor: '#fff'
+      })
+      const link = document.createElement('a')
+      link.download = `${fileName}.${type}`
+      link.href = url
+      link.click()
+      return url
+    },
+
+    // 导出数据为CSV格式
+    exportDataCSV(fileName = this.exportFileName) {
+      const [..._temp] = this.dataList || []
+      const [_type, xData, sData] = [..._temp]
+      if (!_type || !xData || !sData) return
+
+      // 构建CSV头部
+      let csv = '\uFEFF' // BOM头，解决中文乱码
+      csv += '时间,' + _type.join(',') + '\n'
+
+      // 构建数据行
+      xData.forEach((x, i) => {
+        const row = ['\t' + x]
+        sData.forEach(series => {
+          row.push(series[i] ?? '')
+        })
+        csv += row.join(',') + '\n'
+      })
+
+      // 下载文件
+      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
+      const link = document.createElement('a')
+      link.href = URL.createObjectURL(blob)
+      link.download = `${fileName}.csv`
+      link.click()
+      URL.revokeObjectURL(link.href)
+    },
+
+    // 初始化图表
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOption()
+    },
+
+    // 设置图表配置项
+    setOption() {
+      const _this = this
+      const fontColor = this.fontColor
+      const [..._temp] = _this.dataList || []
+      const [_type, xData, sData] = [..._temp]
+
+      // 判断是否需要显示滚动条
+      const xDataCount = xData ? xData.length : 0
+      let shouldShowDataZoom = false
+      if (this.showDataZoom === true) {
+        shouldShowDataZoom = true
+      } else if (this.showDataZoom === 'auto') {
+        shouldShowDataZoom = xDataCount > this.dataZoomThreshold
+      }
+
+      // 如果显示滚动条，需要增加 bottom 空间
+      const extraBottom = shouldShowDataZoom ? this.dataZoomHeight + 10 : 0
+
+      // 合并网格配置
+      const grid = Object.assign({}, {
+        left: 40,
+        right: 20,
+        top: 100,
+        bottom: 22 + extraBottom,
+        containLabel: true
+      }, this.grid)
+
+      // 合并渐变色配置
+      let colorList = [
+        { color1: 'rgba(255, 199, 61, 1)', color2: 'rgba(255, 199, 61, .5)', color3: 'rgba(255, 199, 61, .1)' },
+        { color1: 'rgba(154, 252, 135, 1)', color2: 'rgba(154, 252, 135, .5)', color3: 'rgba(154, 252, 135, .1)' }
+      ]
+      colorList = [..._this.lineColor, ...colorList]
+
+      // 构建 series 数据
+      const dataSeries = []
+      sData.forEach(function(item, i, arr) {
+        dataSeries.push({
+          name: _type[i],
+          type: 'bar',
+          yAxisIndex: 0,
+          data: item,
+          barWidth: _this.barWidth,
+          barGap: 1,
+          color: colorList[i].color1,
+          itemStyle: {
+            barBorderRadius: _this.barBorderRadius,
+            color: function(params) {
+              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: colorList[i].color1 }, // 0% 处的颜色
+                { offset: 1, color: colorList[i].color3 } // 100% 处的颜色
+              ])
+            }
+          }
+        })
+      })
+
+      // 当 showToolbox 为 true 时，legend 和 toolbox 都在右侧，legend 向左偏移空出 toolbox 空间
+      // toolbox 大约需要 80px 宽度（3个图标 + 间距）
+      const toolboxWidth = 80
+      const legendRight = this.showToolbox ? toolboxWidth : 0
+      const legendPadding = this.showToolbox ? [15, 0, 0, 0] : [15, 20, 0, 0]
+
+      const option = {
+        grid: grid,
+        legend: {
+          icon: this.legendIcon,
+          top: this.legendTop,
+          right: legendRight,
+          itemWidth: this.itemWidth,
+          itemHeight: this.itemHeight,
+          padding: legendPadding,
+          textStyle: {
+            color: fontColor,
+            fontSize: this.fontSize,
+            fontFamily: 'SourceHanSerifCN-Regular'
+          },
+          show: this.legendIsShow
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          confine: true,
+          backgroundColor: 'rgba(0, 0, 0, 1)',
+          textStyle: {
+            fontSize: this.toolSize || this.fontSize
+          },
+          formatter(params) {
+            return `<div>
+            <p class="tooltip-title">${params[0].name}</p>
+            ${tooltipItemsHtmlString(params)}
+          </div>`
+          },
+          className: 'echarts-tooltip-diy'
+        },
+        xAxis: {
+          type: 'category',
+          data: xData,
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#203A6F',
+              width: 1
+            }
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#233D80'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            interval: this.interval,
+            color: fontColor,
+            fontSize: this.fontSize,
+            formatter: (value) => {
+              if (this.interval === 0) {
+                return value.length > 2 ? value.substring(0, 2) + '...' : value
+              } else {
+                return value
+              }
+            }
+          }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: this.title,
+            min: 0,
+            max: this.yMax,
+            interval: this.yInterval,
+            nameTextStyle: {
+              color: '#F7F7F7',
+              fontSize: this.fontSize,
+              fontWeight: 400,
+              padding: [0, 0, 0, 50]
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(243, 244, 244, 0.3)',
+                type: 'dashed'
+              }
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#233D80'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: this.axisLabelShow,
+              color: fontColor,
+              fontSize: this.fontSize ? this.fontSize : 'inherit'
+            }
+          }
+        ],
+        series: dataSeries
+      }
+
+      // 添加 toolbox 配置
+      if (this.showToolbox) {
+        option.toolbox = {
+          show: true,
+          right: 20,
+          top: 10,
+          itemSize: 12,
+          itemGap: 10,
+          // 图标样式 - 设置为白色
+          iconStyle: {
+            borderColor: fontColor,
+            color: fontColor
+          },
+          // 鼠标悬停样式
+          emphasis: {
+            iconStyle: {
+              borderColor: '#409EFF',
+              color: '#409EFF'
+            }
+          },
+          feature: {
+            saveAsImage: {
+              show: true,
+              title: '保存为图片',
+              pixelRatio: this.exportPixelRatio,
+              type: this.exportType,
+              name: this.exportFileName,
+              backgroundColor: 'transparent',
+              iconStyle: {
+                borderColor: '#fff'
+              },
+              emphasis: {
+                iconStyle: {
+                  borderColor: '#409EFF'
+                }
+              }
+            },
+            dataView: {
+              show: this.showDataView,
+              title: '数据视图',
+              lang: ['数据视图', '关闭', '刷新'],
+              optionToContent: () => {
+                let table = '<table style="width:100%;text-align:center;border-collapse:collapse;"><tbody>'
+                table += '<tr style="background:#f5f5f5;"><th style="padding:8px;border:1px solid #ddd;">时间</th>'
+                _type.forEach(t => {
+                  table += `<th style="padding:8px;border:1px solid #ddd;">${t}</th>`
+                })
+                table += '</tr>'
+                xData.forEach((x, i) => {
+                  table += `<tr><td style="padding:8px;border:1px solid #ddd;">${x}</td>`
+                  sData.forEach(series => {
+                    table += `<td style="padding:8px;border:1px solid #ddd;">${series[i] ?? ''}</td>`
+                  })
+                  table += '</tr>'
+                })
+                table += '</tbody></table>'
+                return table
+              }
+            },
+            myExportCSV: {
+              show: true,
+              title: '导出CSV',
+              icon: 'path://M432.45,595.55c-43.55,0-78.85,35.35-78.85,78.85s35.35,78.85,78.85,78.85c43.55,0,78.85-35.35,78.85-78.85S475.95,595.55,432.45,595.55z M512,128H128v512h64v-448h320v192h192v256h64V256L512,128z M480,256V128l128,128H480z M224,640h64v128h-64V640z M320,576h64v192h-64V576z M416,608h64v160h-64V608z',
+              onclick: () => {
+                _this.exportDataCSV()
+              }
+            }
+          }
+        }
+      }
+
+      // 添加 X 轴滚动条配置
+      if (shouldShowDataZoom) {
+        option.dataZoom = [
+          {
+            type: 'slider',
+            show: true,
+            xAxisIndex: 0,
+            start: this.dataZoomStart,
+            end: this.dataZoomEnd,
+            height: this.dataZoomHeight,
+            bottom: 5,
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(35, 61, 128, 0.3)',
+            fillerColor: 'rgba(64, 158, 255, 0.3)',
+            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+            handleSize: '80%',
+            handleStyle: {
+              color: '#4CE27E',
+              borderColor: '#4CE27E'
+            },
+            moveHandleSize: 5,
+            textStyle: {
+              color: fontColor,
+              fontSize: 12
+            },
+            dataBackground: {
+              lineStyle: {
+                color: 'rgba(64, 158, 255, 0.5)'
+              },
+              areaStyle: {
+                color: 'rgba(64, 158, 255, 0.2)'
+              }
+            },
+            selectedDataBackground: {
+              lineStyle: {
+                color: '#4CE27E'
+              },
+              areaStyle: {
+                color: 'rgba(64, 158, 255, 0.3)'
+              }
+            },
+            realtime: true,
+            brushSelect: true,
+            zoomLock: false
+          },
+          {
+            type: 'inside',
+            xAxisIndex: 0,
+            start: this.dataZoomStart,
+            end: this.dataZoomEnd,
+            zoomOnMouseWheel: true,
+            moveOnMouseMove: true,
+            moveOnMouseWheel: true,
+            preventDefaultMouseMove: false,
+            zoomLock: false
+          }
+        ]
+      }
+
+      this.chart.setOption(option, true)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.l-bar-chart {
+  height: 100%;
+  width: 100%;
+}
+</style>

package/src/l-bar-chart/interface/index.js

@@ -0,0 +1,210 @@
+const interfaceObj = {
+  // ========== 基础配置 ==========
+  // 容器宽度：图表容器的宽度
+  width: {
+    type: String,
+    default: '100%'
+  },
+  // 容器高度：图表容器的高度
+  height: {
+    type: String,
+    default: '100%'
+  },
+  // 图表标题：Y轴名称
+  title: {
+    type: String,
+    default: ''
+  },
+  // 提示框单位：tooltip 显示的单位文字
+  tooltips: {
+    type: String,
+    default: ''
+  },
+  // 图表数据列表：格式为 [类型数组, X轴数据, 多系列数据]
+  // 例如：[['旅游人次'], ['3.10', '3.11'], [[212, 302]]]
+  dataList: {
+    type: Array,
+    default: () => {
+      return [['旅游人次'], [3.10, 3.11, 3.12, 3.13, 3.14, 3.15, 3.16], [[212, 302, 222, 112, 102, 222, 282]]]
+    }
+  },
+  // 是否开启动画：图表加载时的动画效果
+  animation: {
+    type: Boolean,
+    default: false
+  },
+
+  // ========== 柱状图样式 ==========
+  // 柱状图宽度：单个柱子的宽度（像素）
+  barWidth: {
+    type: Number,
+    default: 7
+  },
+  // 柱状图圆角：[上左, 上右, 下右, 下左] 的圆角大小
+  barBorderRadius: {
+    type: [Array, Object],
+    default: () => {
+      return [5, 5, 0, 0]
+    }
+  },
+  // 柱状图渐变色：每个系列的渐变色配置
+  // 每项包含 color1（顶部颜色）、color2（中间颜色）、color3（底部颜色）
+  lineColor: {
+    type: Array,
+    default: () => {
+      return [
+        { color1: 'rgba(131, 255, 153, .1)', color2: 'rgba(131, 255, 153, .5)', color3: 'rgba(51, 204, 115, 1)' },
+        { color1: 'rgba(154, 252, 135, 1)', color2: 'rgba(154, 252, 135, .5)', color3: 'rgba(154, 252, 135, .1)' },
+        { color1: 'rgba(255, 199, 61, 1)', color2: 'rgba(255, 199, 61, .5)', color3: 'rgba(255, 199, 61, .1)' }
+      ]
+    }
+  },
+  // 是否显示渐变区域：柱子是否使用渐变填充
+  showAreaStyle: {
+    type: Boolean,
+    default: true
+  },
+
+  // ========== 图例配置 ==========
+  // 是否显示图例：控制图例的显示/隐藏
+  legendIsShow: {
+    type: Boolean,
+    default: true
+  },
+  // 图例顶部偏移：图例距离顶部的距离（可为负数）
+  legendTop: {
+    type: Number,
+    default: -15
+  },
+  // 图例图标：图例项的图标形状（circle、rect、roundRect 等）
+  legendIcon: {
+    type: [String, Boolean],
+    default: 'circle'
+  },
+  // 图例图标宽度：图例项图标的宽度
+  itemWidth: {
+    type: Number,
+    default: 10
+  },
+  // 图例图标高度：图例项图标的高度
+  itemHeight: {
+    type: Number,
+    default: 10
+  },
+
+  // ========== 字体样式 ==========
+  // 字体颜色：坐标轴、图例等文字的颜色
+  fontColor: {
+    type: String,
+    default: 'rgba(188, 205, 235, 1)'
+  },
+  // 字体大小：坐标轴、图例、提示框等文字的大小
+  fontSize: {
+    type: Number,
+    default: 14
+  },
+  // 提示框字体大小：tooltip 文字的字体大小（优先级高于 fontSize）
+  toolSize: {
+    type: Number,
+    default: null
+  },
+
+  // ========== 网格配置 ==========
+  // 图表边距：图表的上下左右边距
+  // 包含 left、right、top、bottom 四个属性
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        left: 50,
+        right: 20,
+        top: 25,
+        bottom: 91
+      }
+    }
+  },
+
+  // ========== X轴配置 ==========
+  // X轴标签间隔：坐标轴刻度标签的显示间隔
+  // 'auto' 自动判断，0 显示全部，其他数字为间隔值
+  interval: {
+    type: [Number, String],
+    default: 'auto'
+  },
+
+  // ========== Y轴配置 ==========
+  // Y轴最大值：Y轴的最大刻度值（null 为自动计算）
+  yMax: {
+    type: Number,
+    default: null
+  },
+  // Y轴刻度间隔：Y轴刻度的间隔值（null 为自动计算）
+  yInterval: {
+    type: Number,
+    default: null
+  },
+  // 是否显示Y轴标签：控制Y轴刻度标签的显示/隐藏
+  axisLabelShow: {
+    type: Boolean,
+    default: true
+  },
+
+  // ========== 工具箱配置 ==========
+  // 是否显示工具箱：控制工具箱的显示/隐藏
+  showToolbox: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示数据视图：工具箱中的数据视图按钮
+  showDataView: {
+    type: Boolean,
+    default: false
+  },
+
+  // ========== 导出配置 ==========
+  // 导出文件名：导出图片/CSV 时的文件名（不含扩展名）
+  exportFileName: {
+    type: String,
+    default: 'chart-export'
+  },
+  // 导出图片像素比：导出图片的分辨率倍数
+  exportPixelRatio: {
+    type: Number,
+    default: 2
+  },
+  // 导出图片类型：导出图片的格式（png 或 jpeg）
+  exportType: {
+    type: String,
+    default: 'png'
+  },
+
+  // ========== 滚动条配置 ==========
+  // 是否显示滚动条：X轴滚动条的显示控制
+  // 'auto' 自动判断，true 始终显示，false 始终隐藏
+  showDataZoom: {
+    type: [Boolean, String],
+    default: 'auto'
+  },
+  // 滚动条阈值：数据点超过此值时自动显示滚动条（仅 auto 模式生效）
+  dataZoomThreshold: {
+    type: Number,
+    default: 15
+  },
+  // 滚动条起始位置：初始显示的起始百分比（0-100）
+  dataZoomStart: {
+    type: Number,
+    default: 0
+  },
+  // 滚动条结束位置：初始显示的结束百分比（0-100）
+  dataZoomEnd: {
+    type: Number,
+    default: 50
+  },
+  // 滚动条高度：滑动滚动条的高度
+  dataZoomHeight: {
+    type: Number,
+    default: 20
+  }
+}
+
+export default interfaceObj