uniApp项目使用uCharts

1) cmd:安装 npm i @qiun/ucharts  (文件默认在node_modules, 这里我放到了components)

2) 引入import uCharts from '@/components/@qiun/ucharts/u-charts'

3) 

<template>
    <view>
        <canvas canvas-id="contractChart" id="contractChart" class="charts" @tap="tap" />
    </view>
</template>

<script>
import uCharts from '@/components/@qiun/ucharts/u-charts'

var uChartsInstance = {}
export default {
    data() {
        return {
            cWidth: 650,
            cHeight: 500
        }
    },
    mounted() {
        this.cWidth = uni.upx2px(650)
        this.cHeight = uni.upx2px(500)
    },
    methods: {
        getServerData(datax, datay) {
            let res = {
                categories: datax || ['1月','2月','3月'],
                series: [{ name: '合同金额', data: datay || [100,200,300] }]
            }
            this.drawCharts('contractChart', res)
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this)
            uChartsInstance[id] = new uCharts({
                type: 'line',
                context: ctx,
                color: ['#4983ef'],
                width: this.cWidth,
                height: this.cHeight,
                dataLabel: false,
                categories: data.categories,
                series: data.series,
                xAxis: { disableGrid: true },
                yAxis: {
                    data: [{ min: 0 }]
                },
                extra: {
                    line: {
                        type: "curve",
                        width: 2,
                        activeType: "hollow",
                        linearType: "custom"
                    }
                }
            })
        },
        tap(e) {
            uChartsInstance[e.target.id].touchLegend(e)
            uChartsInstance[e.target.id].showToolTip(e)
        }
    }
}
</script>

<style scoped>
.charts {
    margin-top: 10px;
    width: 100%;
    height: 500rpx;
}
</style>