baiyuApp/pages_manage/components/chart.vue

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

<script>
import qiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';

export default {
  components: {
    qiunDataCharts
  },
  props: {
    getratelist: {
      type: Object,
      default: () => ({
        data: [{ name: '掌声', value: 10 }]
      }),
      validator: (value) => {
        return value && Array.isArray(value.data);
      }
    }
  },
  data() {
    return {
      chartData: {
        series: [{ name: '流量', data: [] }]
      },
      opts: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [15, 15, 0, 15],
        enableScroll: false,
        canvas2d: true,
        extra: {
          funnel: {
            activeOpacity: 0.3,
            activeWidth: 10,
            border: true,
            borderWidth: 2,
            borderColor: "#FFFFFF",
            fillOpacity: 1,
            labelAlign: "right"
          }
        }
      }
    };
  },
  watch: {
    getratelist: {
      immediate: true,
      handler(newVal) {
        this.getServerData();
      }
    }
  },
  methods: {
    getServerData() {
      const rawData = this.getratelist?.data || [];
      const validData = rawData.filter(item => 
        item && typeof item.name !== 'undefined' && typeof item.value !== 'undefined'
      );
      
      if (validData.length === 0) {
        console.warn("使用默认数据");
        validData.push({ name: '暂无数据', value: 1 });
      }
      
      this.chartData = {
        series: [{
          name: '流量',
          data: validData.map(item => ({
            name: item.name,
            value: item.value,
            centerText: String(item.value)
          }))
        }]
      };
    }
  }
};
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>