一、插件的安裝
安裝非常簡單，打開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和組件數據格式看，簡單配置后即可看到效果。
