使用ucharts写的小程序，然后让圆环的图例位置进行改变

苹果电脑的鑫鑫

于 2025-03-26 14:13:01 发布

阅读量182

点赞数 2

文章标签：小程序前端 javascript

本文链接：https://blog.youkuaiyun.com/Wx001214/article/details/146528340

版权

需要调整position的属性

legend: {
show: true,
position: 'bottom',
lineHeight: 25,
},

<template>
  <view class="charts-box">
    <qiun-data-charts
      type="ring"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const chartData = ref({});
const opts = ref({
  rotate: false,
  rotateLock: false,
  color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  padding: [5, 5, 5, 5],
  dataLabel: true,
  enableScroll: false,
  legend: {
    show: true,
    position: 'bottom',
    lineHeight: 25,
  },
  title: {
    name: '收益率',
    fontSize: 15,
    color: '#666666',
  },
  subtitle: {
    name: '70%',
    fontSize: 25,
    color: '#7cb5ec',
  },
  extra: {
    ring: {
      ringWidth: 60,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: true,
      borderWidth: 3,
      borderColor: '#FFFFFF',
    },
  },
});

const getServerData = () => {
  // 模拟从服务器获取数据时的延时
  setTimeout(() => {
    // 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    const res = {
      series: [
        {
          data: [
            { name: '一班', value: 50 },
            { name: '二班', value: 30 },
            { name: '三班', value: 20 },
            { name: '四班', value: 18, labelText: '四班:18人' },
            { name: '五班', value: 8 },
          ],
        },
      ],
    };
    chartData.value = JSON.parse(JSON.stringify(res));
  }, 500);
};

onMounted(() => {
  getServerData();
});
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}
</style>

更改前

更改后