uni-app 实现饼图和卡片列表联动的效果

在uni-app中实现饼图和卡片列表联动的效果，可以通过以下步骤实现。假设我们使用ECharts来绘制饼图，并通过点击事件来更新卡片列表的数据。以下是一个简单的示例代码：

1. 安装ECharts

首先，确保你已经在uni-app项目中安装了ECharts组件。你可以通过npm安装：

npm install @qiun/echarts-for-weixin --save

2. 创建组件并引入ECharts

在你的uni-app项目中创建一个组件（如PieChart.vue）来绘制饼图，并引入ECharts：

<template>
  <view class="container">
    <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from '@qiun/echarts-for-weixin';

export default {
  data() {
    return {
      ec: {
        onInit: this.initChart
      },
      chart: null
    };
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      this.chart = chart;
      canvas.setChart(chart);

      const option = {
        // 饼图配置
        series: [{
          type: 'pie',
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            // 更多数据
          ]
        }]
      };
      chart.setOption(option);

      chart.on('click', this.handlePieClick);
      return chart;
    },
    handlePieClick(params) {
      this.$emit('chartClick', params);
    }
  }
};
</script>

3. 在页面中使用组件并实现联动

在你的页面组件中（如index.vue）使用PieChart.vue组件，并根据点击事件更新卡片列表：

<template>
  <view>
    <PieChart @chartClick="updateCardList" />
    <view class="card-list">
      <view v-for="(card, index) in cardList" :key="index" class="card">
        {{ card.name }}: {{ card.value }}
      </view>
    </view>
  </view>
</template>

<script>
import PieChart from '@/components/PieChart.vue';

export default {
  components: {
    PieChart
  },
  data() {
    return {
      cardList: []
    };
  },
  methods: {
    updateCardList(params) {
      this.cardList = [{ name: params.name, value: params.value }];
      // 根据需求添加更多卡片数据
    }
  }
};
</script>

总结

以上代码展示了如何在uni-app中实现饼图和卡片列表的联动效果。通过ECharts绘制饼图，并监听点击事件来更新卡片列表的数据。你可以根据实际需求进一步扩展和优化这个示例。