shalu-dashboard-ui/components/charts/config/index.ts

import { EChartsOption } from "echarts"


// 颜色预设集合
export const colorPreset = [
  {
    name: '清新',
    color: ['#00a8e1', '#99cc00', '#e30039', '#fcd300', '#800080']
  },
  {
    name: '复古',
    color: ['#FFA69E', '#FAE3D9', '#B8F2E6', '#56E39F', '#3A837D']
  },
  {
    name: '商务',
    color: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31']
  },
  {
    name: '经典',
    color: ['#002c53', '#ffa510', '#0c84c6', '#ffffff', '#f74d4d']
  },
  {
    name: '怀旧',
    color: ['#3b6291', '#943c39', '#779043', '#624c7c', '#388498']
  }
]

// 图表默认配置项
export const chartDefaultConfig: EChartsOption = {
  // 调色盘-预设颜色
  color: colorPreset[0].color,
  // 标题
  title: {
    left: "center",
    top: 8,
    textStyle: {
      color: "#fff",
      fontSize: 16,
    },
  },
  // 图例
  legend: {
    textStyle: {
      color: "#fff",
    },
    top: 32,
  },
  // 布局
  grid: {
    bottom: 34,
    right: 20,
    top: 60,
  },
  // 提示框
  tooltip: {},
  // x轴
  xAxis: {
    type: "category",
    axisLabel: {
      color: "#9fadbf",
    },
  },
  // y轴
  yAxis: {
    axisLabel: {
      color: "#9fadbf",
    },
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: "#36485f",
      },
    },
  },
}


// 组件容器基本设置
export const containerDefaultConfig = {
  /* ===================================== 通用容器样式 ============================================ */
  style: {
    background: {
      type: "color", // none, color, image
      color: "rgba(0, 0, 0, 0.1)",
      image: "",
      fillType: "",
    },
    border: {
      type: "none",
      color: "#000",
      width: 0,
    },
    borderRadius: {
      type: "all", // all, custom
      value: 2, // 整体圆角值
      unit: "px", // 单位
      units: ["px", "%"], // 单位列表
      topLeft: 0,
      topRight: 0,
      bottomLeft: 0,
      bottomRight: 0,
    },
    boxShadow: {
      enabled: false,
      color: "#000",
      offsetX: 0,
      offsetY: 0,
      blurRadius: 0,
      spreadRadius: 0,
      inset: false,
    },
    backdropFilter: {
      enabled: false,
      blur: 0,
    }
  },
  /* ===================================== 通用容器属性 ============================================ */
  props: {
    width: 0,
    height: 0,
    x: 0,
    y: 0,
    paddingLeft: 0,
    paddingRight: 0,
    paddingTop: 0,
    paddingBottom: 0,
    rotateX: 0,
    rotateY: 0,
    rotateZ: 0,
    opacity: 1,
  },
};