qiun-data-charts环形图如何使用

环形图是一种常用的数据可视化工具，用于展示对象的比例关系。以下是使用qiun-data-charts库创建环形图的步骤：

1. 引入qiun-data-charts库，可以通过npm安装或CDN引入：

<script src="https://cdn.jsdelivr.net/npm/qiun-data-charts"></script>

2. 创建一个容器元素用于展示环形图，例如：

<div id="chart"></div>

3. 使用JavaScript代码创建环形图实例并配置参数：

const chart = new QiunDataCharts({
  el: '#chart',
  type: 'doughnut',
  data: {
    labels: ['苹果', '橘子', '香蕉'],
    datasets: [{
      data: [30, 20, 50],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
  }
});

上面的代码创建了一个环形图实例，设置了容器元素为`#chart`，类型为`doughnut`（环形图），数据包括三个标签分别为“苹果”、“橘子”、“香蕉”，对应的数据为30、20、50，颜色分别为红色、蓝色、黄色。

4. 环形图实例创建成功后即可在页面中展示，同时也可以通过实例的方法对图表进行修改和更新，例如：

// 修改标签和数据
chart.update({
  labels: ['苹果', '橘子', '柚子', '西瓜'],
  datasets: [{
    data: [30, 20, 10, 40],
    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
  }]
});

// 隐藏图例
chart.options.legend.display = false;
chart.update();

以上示例代码将标签修改为“苹果”、“橘子”、“柚子”、“西瓜”，对应的数据为30、20、10、40，颜色分别为红色、蓝色、黄色、青色，并隐藏了图例。