感性認(rèn)識

想在?uni-app 中使用?ucharts?官方提供了兩種方法：

1. uni_modules版本
2. 非?uni_modules版本

何為?uni_modules？請看官方文檔?uni_modules插件規(guī)范 - uni-app官網(wǎng) (dcloud.io)

導(dǎo)入步驟?

uni_modules版本

第一步：下載

如果你是使用 HBuilderX 開發(fā)，那就選擇第一個自動導(dǎo)入。

如果你和我一樣使用 VScode 開發(fā)，那你就點擊第二個 。下載之后解壓文件如下：

第二步：移植文件?

官方有這么句話

所以我們在 自己的 src 下新建一個 uni_modules 文件夾 并將上面解壓得到的?qiun-data-charts_2.3.3-20210706 改名為 qiun-data-charts ，然后復(fù)制到 我們新建的?uni_modules 中

第三步：使用??

    <!-- 數(shù)據(jù)展示 --><view class="charts-box"><qiun-data-charts type="column" :chartData="chartsDataColumn1" /></view>data() {return {chartsDataColumn1: {categories: ["2016", "2017", "2018", "2019", "2020", "2021"],series: [{name: "目標(biāo)值",data: [35, 36, 31, 33, 13, 34],},{name: "完成量",data: [18, 27, 21, 24, 6, 28],},],},};},/* 請根據(jù)需求修改圖表容器尺寸，如果父容器沒有高度圖表則會顯示異常 */
.charts-box {width: 100%;height: 320px;
}

弄到這里，其實你發(fā)現(xiàn)沒有效果

我認(rèn)為其原因是我們自己手動建的 uni_modules 并沒有幫我們管理第三方插件（如果時間充足的小伙伴，可以嘗試如何從 如何讓自己建的 uni_modules 有效入手解決這個問題）

我就不再這浪費時間了，我們來看看第二種引入方式

非uni_modules版本

這種方式其實就是把?qiun-data-charts 當(dāng)成我們自己寫的組件一樣，按照 定義 -》引入 -》注冊 -》使用 四步走方式導(dǎo)入。

第一步：定義

這里的定義非真正意義上的定義，這里我是想強調(diào)大家得看別人的注釋和源碼。

源碼來源：秋云 ucharts echarts 高性能跨全端圖表組件?解壓之后文件結(jié)構(gòu)如下：

我們只用關(guān)心這個文件夾

?第二步：移植組件

看官方給的?使用說明

本人親測：前1-4都是廢話 5點才是關(guān)鍵?

那么將 components 文件夾移植到我們的項目的哪里呢？？

可以從他的組件? 源碼中找到答案

這個 @ 就是破解點：@?指的就是 自己項目的 src 目錄，所以?將 components 放到 src 下即可。

第三步：引入+注冊

import qiunDataCharts from "@/components/qiun-data-charts/qiun-data-charts";components: {qiunDataCharts
},

第四步：使用

    <!-- 數(shù)據(jù)展示 --><view class="charts-box"><qiun-data-charts type="column" :chartData="chartsDataColumn1" /></view>data() {return {chartsDataColumn1: {categories: ["2016", "2017", "2018", "2019", "2020", "2021"],series: [{name: "目標(biāo)值",data: [35, 36, 31, 33, 13, 34],},{name: "完成量",data: [18, 27, 21, 24, 6, 28],},],},};},/* 請根據(jù)需求修改圖表容器尺寸，如果父容器沒有高度圖表則會顯示異常 */
.charts-box {width: 100%;height: 320px;
}

?效果展示

總結(jié)

以上是生活随笔為你收集整理的uni-app如何导入秋云 ucharts echarts 高性能跨全端图表组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。