一、插件的安装

安装非常简单，打开uniapp的插件市场，导入到项目中即可

下载地址：https://ext.dcloud.net.cn/plugin?id=271

二、开始实践

先看页面的效果

页面中实现了三个基本图形的展示：折线图、饼图和柱状图。

上图左一：展示了代码 组件的引用；

      <qiun-data-charts 
          type="pie" 
          :opts="categoryChartOptions"
          :chartData="chartData2"
          canvasId="categoryChart"
          class="chart-canvas"
        ></qiun-data-charts>

左二：展示了数据配置格式，这里分两种格式

// 标准数据格式1：（折线图、柱状图、雷达图等需要 categories 的直角坐标系图表类型）
const chartData = {
  categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  series: [{
    name: "目标值",
    data: [35, 36, 31, 33, 13, 34]
  }, {
    name: "完成量",
    data: [18, 27, 21, 24, 6, 28]
  }]
}

// 标准数据格式2：（饼图、山峰图、漏斗图等不需要 categories 的图表类型）
const chartData2 = {
  series: [{
    data: [
      {
        name: "一班",
        value: 50
      }, {
        name: "二班",
        value: 30
      }, {
        name: "三班",
        value: 20
      }, {
        name: "四班",
        value: 18
      }, {
        name: "五班",
        value: 8
      }
    ]
  }]
}

右一是运行的效果。

详细的配置props查看ucharts的官方文档

https://www.ucharts.cn/v2/#/guide/index 

 

建议直接从组件props和组件数据格式看，简单配置后即可看到效果。