uniapp qiun-data-charts 設置環形餅圖中間的文字

在uni-app中使用qiun-data-charts插件繪制環形餅圖，并設置中間的文字，可以通過以下步驟實現：

1. 首先，確保已在uni-app項目中安裝并引入了qiun-data-charts插件。

2. 在頁面的vue文件中，使用<qiun-data-charts>標簽來創建環形餅圖組件，并傳入相應的屬性和數據，例如：

<template>
  <view>
    <qiun-data-charts type="ring" :data="chartData"></qiun-data-charts>
  </view>
</template>
<script>
import qiunDataCharts from 'qiun-data-charts'
export default {
  components: {
    qiunDataCharts
  },
  data() {
    return {
      chartData: [
        { value: 335, text: '直達' },
        { value: 310, text: '郵件營銷' },
        { value: 234, text: '聯盟廣告' },
        { value: 135, text: '視頻廣告' },
        { value: 1548, text: '搜索引擎' }
      ]
    }
  }
}
</script>

上述代碼中，我們通過<qiun-data-charts>標簽創建了一個環形餅圖，并將chartData數據傳入組件的data屬性中。chartData是一個數組，每個元素包含value和text兩個屬性，其中value表示環形餅圖的數值，text表示中間文字的內容。

3. 接下來，需要在qiun-data-charts組件內部進行相應的配置，在環形餅圖組件內部的template中添加如下代碼：

<template>
  <view class="qiun-data-charts">
    <view class="charts-container">
      <chart :option="chartOption"></chart>
      <view class="center-text">{{ centerText }}</view>
    </view>
  </view>
</template>
<script>
import echarts from 'echarts'
export default {
  props: {
    type: {
      type: String,
      default: 'ring'
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartOption: null
    }
  },
  computed: {
    centerText() {
      if (this.data.length > 0) {
        let total = this.data.reduce((sum, item) => sum + item.value, 0)
        return total.toString()
      } else {
        return ''
      }
    }
  },
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      let chartOption = {
        series: [{
          type: this.type,
          data: this.data
        }]
      }
      this.chartOption = chartOption
      let chart = echarts.init(unis.$refs.chartRef.$el)
      chart.setOption(chartOption)
    }
  }
}
</script>

在上述代碼中，我們在template中添加了一個view標簽用于顯示中間的文字，我們使用了computed屬性centerText來計算中間文字的內容，通過reduce方法求得數據數組的value總和，并將其轉換為字符串進行顯示。

4. 最后，在環形餅圖組件的style中添加相應的樣式來設置中間文字的樣式，例如：

<style scoped>
.charts-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.center-text {
  font-size: 30px;
  font-weight: bold;
}
</style>

在上述代碼中，我們將charts-container容器居中顯示，并設置中間文字的樣式為30px大小，加粗顯示。

完成以上步驟后，即可在uni-app中使用qiun-data-charts插件繪制環形餅圖，并設置中間的文字。