akmon/pages/index/index.uvue

<template>
  <view class="charts-demo">
    <view class="charts-header">
      <button @click="setType('bar')" :class="{active: optionType==='bar'}">柱状图</button>
      <button @click="setType('line')" :class="{active: optionType==='line'}">折线图</button>
      <button @click="setType('pie')" :class="{active: optionType==='pie'}">饼图</button>
      <button @click="setType('doughnut')" :class="{active: optionType==='doughnut'}">环形图</button>
      <button @click="setType('radar')" :class="{active: optionType==='radar'}">雷达图</button>
    </view>
    <view class="charts-actions">
      <button @click="randomData">随机数据</button>
      <button @click="resetData">重置</button>
      <button @click="changeColors">切换颜色</button>
    </view>
    <ak-charts :option="option" canvas-id="demo-canvas"></ak-charts>
    <view class="charts-desc">
      <text>当前类型：{{ optionType }}</text>
      <text>数据：{{ optionData.join(', ') }}</text>
      <text>标签：{{ optionLabels.join(', ') }}</text>
      <text>颜色：{{ typeof optionColor === 'string' ? optionColor : '多色模式' }}</text>
    </view>
    <view class="charts-tips">
      <text>你可以点击上方按钮切换图表类型、生成随机数据或重置></text>
      <text>支持通过 AkCharts.render(option, canvasId) 进行 UTS API 测试></text>
    </view>
  </view>
</template>

<script lang="uts">
import AkCharts from '@/uni_modules/ak-charts/components/ak-charts.uvue'

export default {
  components: {
    AkCharts
  },
  data() {
    return {
      optionType: "bar",
      optionData: [10, 20, 30, 25, 15],
      optionLabels: ["A", "B", "C", "D", "E"],
      optionColor: "#409EFF",
      colorMode: "single", // "single" <20>?"multi"
      colorPalettes: [
        ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"],
        ["#FF9F40", "#8AC249", "#EA526F", "#49A6B7", "#C5D86D"],
        ["#71A6D2", "#FF7676", "#64DFDF", "#FCBAD3", "#A0C4FF"]
      ],
      currentPaletteIndex: 0
    }
  },
  computed: {
    option() {
      const baseOption = {
        type: this.optionType,
        data: this.optionData,
        labels: this.optionLabels
      };
      
      // 对于不同图表类型提供适当的选项
      if (this.colorMode === "single") {
        baseOption.color = this.optionColor;
      } else {
        baseOption.color = this.colorPalettes[this.currentPaletteIndex];
      }
      
      // 为环形图添加特殊配置
      if (this.optionType === "doughnut") {
        baseOption.innerRadius = 40;
      }
      
      return baseOption;
    }
  },
  methods: {
    setType(t: string) {
      this.optionType = t;
      
      // 雷达图至少需<E5B091>?个数据点
      if (t === "radar" && this.optionData.length < 3) {
        this.resetData();
      }
      
      // 饼图和环形图默认使用多色模式
      if (t === "pie" || t === "doughnut") {
        this.colorMode = "multi";
      } else {
        this.colorMode = "single";
      }
    },
    randomData() {
      // 生成5-7个随机数据点
      const count = this.optionType === "radar" ? 5 : Math.floor(Math.random() * 3) + 5;
      const newData = [] as number[];
      const newLabels = [] as string[];
      const letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];
      
      for (let i = 0; i < count; i++) {
        newData.push(Math.floor(Math.random() * 90) + 10);
        newLabels.push(letters[i]);
      }
      
      this.optionData = newData;
      this.optionLabels = newLabels;
    },
    resetData() {
      this.optionData = [10, 20, 30, 25, 15];
      this.optionLabels = ["A", "B", "C", "D", "E"];
      this.optionColor = "#409EFF";
      this.colorMode = this.optionType === "pie" || this.optionType === "doughnut" ? "multi" : "single";
    },
    changeColors() {
      if (this.colorMode === "single") {
        // 单色模式下循环切换颜<E68DA2>?
        const colors = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"];
        const currentIndex = colors.indexOf(this.optionColor);
        const nextIndex = (currentIndex + 1) % colors.length;
        this.optionColor = colors[nextIndex];
      } else {
        // 多色模式下循环切换色<E68DA2>?
        this.currentPaletteIndex = (this.currentPaletteIndex + 1) % this.colorPalettes.length;
      }
    }
  }
}
</script>

<style scoped>
.charts-demo {
  padding: 32rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.charts-header {
  display: flex;
  padding: 16rpx;
  margin-bottom: 20rpx;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 20rpx;
}
.charts-actions {
  display: flex;
  padding: 24rpx;
  margin-bottom: 32rpx;
}
.charts-header button, .charts-actions button {
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  border: 1rpx solid #2196f3;
  background: #fff;
  color: #2196f3;
  font-size: 24rpx;
}
.charts-header .active {
  background: #2196f3;
  color: #fff;
}
.charts-desc {
  margin-top: 32rpx;
  color: #666;
  font-size: 28rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding: 8rpx;
}
.charts-tips {
  margin-top: 40rpx;
  color: #999;
  font-size: 24rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding: 4rpx;
}
</style>