主题定制

图表主题

图表组件基于 ECharts，支持通过 option prop 完全自定义配置。

修改颜色

<script setup>
import { lineChart } from '@twi1i9ht/visual-lib'
</script>

<template>
  <lineChart
    :data="[150, 230, 224, 218, 135, 147, 260]"
    line-color="#ff6b6b"
    :show-area="true"
    :area-opacity="0.3"
  />
</template>

使用 ECharts option 完全自定义

<script setup>
import { lineChart } from '@twi1i9ht/visual-lib'

const customOption = {
  color: ['#ff6b6b', '#4ecdc4'],
  grid: {
    left: '10%',
    right: '10%',
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'line',
      data: [120, 200, 150, 80, 70],
      smooth: true,
    },
  ],
}
</script>

<template>
  <lineChart :option="customOption" />
</template>

地图主题

自定义瓦片图层

<script setup>
import { vMap } from '@twi1i9ht/visual-lib'

// 使用暗色主题瓦片
const darkTileUrl = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
</script>

<template>
  <vMap :center-lat="39.9" :center-lng="116.4" :zoom="12" :tile-url="darkTileUrl" />
</template>

常用瓦片图层

名称	URL
OpenStreetMap	https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
CartoDB Light	https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png
CartoDB Dark	https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png
高德地图	https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}

CSS 变量

部分组件支持通过 CSS 变量定制样式：

:root {
  /* KPI 组件 */
  --v-stat-value-color: #333;
  --v-stat-label-color: #666;

  /* 进度条 */
  --v-progress-bg: #e9ecef;
  --v-progress-fill: #5470c6;
}