RayChart

Appearance

自定义主题 ​

让图表符合品牌风格。

颜色主题 ​

vue
<script setup>
const theme = {
  color: ['#42b883', '#35495e', '#41b883', '#3aa876'],
  backgroundColor: '#ffffff'
}

const chartOption = ref({
  ...theme,
  series: [{ data: [120, 200, 150, 80] }],
  xAxis3D: { data: ['A', 'B', 'C', 'D'] }
})
</script>

预设主题 ​

javascript
const greenTheme = {
  color: ['#42b883', '#3aa876', '#33a06f', '#2d8f65']
}
javascript
const blueTheme = {
  color: ['#2080f0', '#1870d5', '#1060ba', '#0850a0']
}
javascript
const orangeTheme = {
  color: ['#f0a020', '#d58f1c', '#ba7e18', '#a06d14']
}
javascript
const grayTheme = {
  color: ['#8c8c8c', '#737373', '#595959', '#404040']
}

材质主题 ​

金属质感 ​

javascript
{
  series: [{
    data: [120, 200, 150],
    itemStyle: {
      metalness: 0.8,
      roughness: 0.2,
      color: '#42b883'
    }
  }],
  xAxis3D: { data: ['A', 'B', 'C'] }
}

磨砂质感 ​

javascript
{
  series: [{
    data: [120, 200, 150],
    itemStyle: {
      metalness: 0.2,
      roughness: 0.8,
      color: '#42b883'
    }
  }],
  xAxis3D: { data: ['A', 'B', 'C'] }
}

发光效果 ​

javascript
{
  series: [{
    data: [120, 200, 150],
    itemStyle: {
      emissive: '#42b883',
      emissiveIntensity: 0.5
    }
  }],
  xAxis3D: { data: ['A', 'B', 'C'] },
  postprocessing: {
    enable: true,
    bloom: {
      enable: true,
      strength: 1.5
    }
  }
}

完整主题配置 ​

javascript
const customTheme = {
  // 颜色配置
  color: ['#42b883', '#35495e', '#41b883'],
  backgroundColor: '#f5f5f5',
  
  // 文字样式
  textStyle: {
    fontFamily: 'Arial, sans-serif',
    fontSize: 14,
    color: '#333'
  },
  
  // 坐标轴样式
  axisStyle: {
    axisLine: {
      lineStyle: {
        color: '#333',
        width: 1
      }
    },
    axisLabel: {
      color: '#666',
      fontSize: 12
    }
  },
  
  // 材质样式
  itemStyle: {
    metalness: 0.3,
    roughness: 0.5
  }
}

使用主题 ​

方式一：合并到配置 ​

vue
<template>
  <RayBar :option="chartOption" />
</template>

<script setup>
import { ref } from 'vue'
import { RayBar } from 'raychart'

const customTheme = {
  color: ['#42b883', '#35495e'],
  backgroundColor: '#ffffff'
}

const chartOption = ref({
  ...customTheme,
  series: [{ data: [120, 200, 150, 80] }],
  xAxis3D: { data: ['Mon', 'Tue', 'Wed', 'Thu'] }
})
</script>

方式二：使用 theme 属性 ​

vue
<template>
  <RayBar :option="chartOption" :theme="customTheme" />
</template>

<script setup>
import { ref } from 'vue'
import { RayBar } from 'raychart'

const customTheme = {
  color: ['#42b883', '#35495e'],
  backgroundColor: '#ffffff'
}

const chartOption = ref({
  series: [{ data: [120, 200, 150, 80] }],
  xAxis3D: { data: ['Mon', 'Tue', 'Wed', 'Thu'] }
})
</script>

主题切换 ​

vue
<template>
  <div>
    <RayBar :option="chartOption" />
    <div class="theme-switcher">
      <button @click="currentTheme = 'green'">绿色主题</button>
      <button @click="currentTheme = 'blue'">蓝色主题</button>
      <button @click="currentTheme = 'orange'">橙色主题</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { RayBar } from 'raychart'

const currentTheme = ref('green')

const themes = {
  green: {
    color: ['#42b883', '#3aa876', '#33a06f', '#2d8f65']
  },
  blue: {
    color: ['#2080f0', '#1870d5', '#1060ba', '#0850a0']
  },
  orange: {
    color: ['#f0a020', '#d58f1c', '#ba7e18', '#a06d14']
  }
}

const chartOption = computed(() => ({
  ...themes[currentTheme.value],
  series: [{ data: [120, 200, 150, 80] }],
  xAxis3D: { data: ['A', 'B', 'C', 'D'] }
}))
</script>

<style scoped>
.theme-switcher {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

button:hover {
  background: #f5f5f5;
}
</style>

主题最佳实践 ​

颜色对比度 ​

确保足够对比度，便于区分：

javascript
// ✅ 好的对比度
color: ['#42b883', '#e74c3c', '#3498db', '#f39c12']

// ❌ 对比度不足
color: ['#42b883', '#3aa876', '#33a06f', '#2d8f65']

无障碍设计 ​

考虑色盲用户，避免仅依赖颜色：

javascript
// ✅ 不同亮度和饱和度
color: ['#e74c3c', '#3498db', '#2ecc71', '#f39c12']

// ❌ 红绿色盲难以区分
color: ['#e74c3c', '#2ecc71']

品牌一致性 ​

使用品牌色：

javascript
const brandTheme = {
  color: [
    '#FF6B6B',  // 品牌主色
    '#4ECDC4',  // 品牌辅色
    '#45B7D1',  // 品牌辅色
    '#FFA07A'   // 品牌辅色
  ]
}

相关文档 ​