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: {
    show: true,
    left: "center",
    top: 8,
    textStyle: {
      color: "#FFFFFFFF",
      fontSize: 16,
      fontWeight: "normal",
    },
  },
  // 图例
  legend: {
    show: true,
    textStyle: {
      color: "#FFFFFFFF",
    },
    top: 32,
  },
  // 布局
  grid: {
    bottom: 34,
    right: 20,
    left: 50,
    top: 60,
  },
  // x轴
  xAxis: {
    type: "category",
    name: '',
    nameLocation: "middle",
    nameTruncate: {
      ellipsis: "...",
      maxWidth: 80
    },
    nameTextStyle: {
      color: '#FFFFFFFF',
      fontSize: 12,
      fontWeight: 'normal',
      fontStyle: 'normal'
    },
    axisLabel: {
      show: true,
      color: "#9fadbf",
      fontSize: 12,
      fontWeight: "normal",
      fontStyle: "normal",
    },
    axisLine: {
      show: true,
      lineStyle: {
        width: 1
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        width: 1,
        color: "#ccc"
      }
    }
  },
  // y轴
  yAxis: {
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "#36485f",
      },
    },
    type: "category",
    name: '',
    nameLocation: "middle",
    nameTruncate: {
      ellipsis: "...",
      maxWidth: 80
    },
    nameTextStyle: {
      color: '#FFFFFFFF',
      fontSize: 12,
      fontWeight: 'normal',
      fontStyle: 'normal'
    },
    axisLabel: {
      show: true,
      color: "#9fadbf",
      fontSize: 12,
      fontWeight: "normal",
      fontStyle: "normal",
      rotate: 0,
    },
    axisLine: {
      show: false,
      lineStyle: {
        width: 1,
        color: "#ccc"
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        width: 1,
        color: "#ccc"
      }
    }
  },
  // 提示
  tooltip: {
    show: true,
    trigger: "axis",
    formatter: "{b}",
    // valueFormatter: "(value, dataIndex) => value",
    axisPointer: {
      type: "line",
    },
    textStyle: {
      color: "#FFFFFF",
      fontSize: 12,
      fontWeight: "normal",
      fontStyle: "normal",
    },
    padding: 10,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 4,
    backgroundColor: "#fff",
    extraCssText: "",
  }
}


// 组件容器基本设置
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,
  },
};