一、插件的安装
安装非常简单，打开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和组件数据格式看，简单配置后即可看到效果。