背景：

? ?原生小程序需要好看的折線圖。

實(shí)現(xiàn)：

小程序開發(fā)版本

一般是uni-app項(xiàng)目使用ucharts在原生微信小程序也是可以使用。

方法：

## 使用說明
請(qǐng)將項(xiàng)目根目錄 微信小程序/uCharts-組件/qiun-wx-ucharts/src 下全部文件復(fù)制到指定位置，例如該項(xiàng)目的components/qiun-wx-uchart目錄下，然后在頁面的json配置文件中配置如下：
{
  "usingComponents": {
    "qiun-wx-ucharts": "/components/qiun-wx-ucharts/index"
  }
}

配置好后即可在wxml文件中使用

<view class="charts">
  <qiun-wx-ucharts type="column" canvas2d="{{true}}" opts="{{opts}}" chartData="{{chartData}}" bindcomplete="complete"/>
</view>

注：示例中uCharts組件僅做演示，實(shí)際使用請(qǐng)用碼云或者npmjs中最新版本

## 組件參數(shù)詳見官網(wǎng)組件文檔或在線演示中的代碼

[https://www.ucharts.cn]

源碼下載：

uCharts: 高性能跨平臺(tái)圖表庫，支持H5、APP、小程序（微信小程序、支付寶小程序、釘釘小程序、百度小程序、頭條小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平臺(tái)，支持餅圖、圓環(huán)圖、線圖、柱狀圖、山峰圖、區(qū)域圖、雷達(dá)圖、圓弧進(jìn)度圖、儀表盤、K線圖、條狀圖、混合圖、玫瑰圖、漏斗圖、詞云圖、時(shí)序圖、散點(diǎn)圖、氣泡圖、地圖等常見圖表。

下載解決之后，找到對(duì)應(yīng)的組件源碼拷貝到微信小程序項(xiàng)目

源碼組件復(fù)制

?把組件下對(duì)應(yīng)微信小程序src里的所有的文件復(fù)制到項(xiàng)目components/qiun-wx-charts目錄下，components/qiun-wx-charts這二層目錄沒有的話就新建。

?頁面中引用該組件

?wxml

<view class="charts">
    <qiun-wx-ucharts type="line" canvas2d="{{true}}" opts="{{opts}}" chartData="{{chartData}}" bindcomplete="complete"/>
</view>

js

Page({
    data: {
        chartData: {},
        opts: {},
    },
    onReady() {
        this.getServerData();
    },
    getServerData() {
        //模擬從服務(wù)器獲取數(shù)據(jù)時(shí)的延時(shí)
        setTimeout(() => {
            //模擬服務(wù)器返回?cái)?shù)據(jù)，如果數(shù)據(jù)格式和標(biāo)準(zhǔn)格式不同，需自行按下面的格式拼接
            let chartData = {
                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]
                    }
                ]
            };
            this.setData({ chartData });
        }, 500);
    },
    complete(e){
        console.log(e);
    }
})

wxss

無。

運(yùn)行效果

折點(diǎn)是否顯示數(shù)據(jù)信息

默認(rèn)是顯示,dataLabel:true

設(shè)置為false?

折線圖 設(shè)置數(shù)據(jù)點(diǎn)上文字位置

有時(shí)候數(shù)值被遮擋了，想要控制一下顯示的位置，暫時(shí)查不到具體的配置項(xiàng)目，但是可以通過源碼去修改。

u-charts.js里的方法里getDataPoints()，去設(shè)置piont.x, point.y的值。這個(gè)方法是所有圖形都會(huì)被調(diào)用。根據(jù)自己需求可以增加個(gè)配置參數(shù)，或者單獨(dú)重寫一個(gè)給需要的圖形。

文章來源地址http://www.zghlxwxcb.cn/news/detail-492986.html

到了這里，關(guān)于原生小程序 微信小程序 使用ucharts的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！