小程序一行展示两个环形图 - qiun-data-charts 教程

小程序一行展示两个环形图 - qiun-data-charts 教程

在小程序上展示两个环形图可以通过以下步骤实现：

1. 导入 qiun-data-charts 组件：

   import QiunDataCharts from 'path/to/qiun-data-charts';
   

2. 在小程序页面的 WXML 中添加两个 qiun-data-charts 组件，分别设置不同的 id 和 data 数据：

   <qiun-data-charts id='chart1' data='{{chart1Data}}' />
   <qiun-data-charts id='chart2' data='{{chart2Data}}' />
   

3. 在小程序页面的 JS 文件中定义 chart1Data 和 chart2Data 数据：

   Page({
     data: {
       chart1Data: {
         title: 'Chart 1',
         series: [
           { name: 'Category A', value: 30 },
           { name: 'Category B', value: 50 },
           { name: 'Category C', value: 20 }
         ]
       },
       chart2Data: {
         title: 'Chart 2',
         series: [
           { name: 'Category X', value: 40 },
           { name: 'Category Y', value: 30 },
           { name: 'Category Z', value: 30 }
         ]
       }
     }
   });
   

4. 根据需要，在小程序页面的 WXSS 文件中设置 qiun-data-charts 的样式：

   qiun-data-charts {
     width: 50%;
   }
   

这样就可以在小程序上一行展示两个环形图了。根据需要调整 qiun-data-charts 组件的样式，以满足你的设计需求。