uni-app:uCharts的使用步驟

為何不用Echarts

• 相比Echarts及F2的復雜的設置，本插件幾乎等於傻瓜式的配置。
• Echarts在跨端使用更復雜，本插件只需要簡單的兩個<canvas>標簽輕松區別搞定，代碼整潔易維護。
• Echarts在IOS端圖表顯示錯位，只能引用網頁解決。
• 本插件打包后的體積相比Echarts小很多很多，所以性能更好。
• 如果您是uni-app初學者，那么強烈建議您使用uCharts，並且目前可以跨全端通用，減少工作量，增強一致性體驗。
• 圖表樣式均可自定義，懂js的都可以讀懂插件源碼，直接修改u-charts.js源碼即可。
• 本插件經過大量測試，反復論證並加以改造而成，請各位放心使用。

掃碼體驗：

 以下代碼參考官方示例：/pages/basic/line/curve.vue,下載地址：https://ext.dcloud.net.cn/plugin?id=271

以曲線圖為例介紹使用步驟：

1、將u-charts.js拷貝到components目錄下

 2、引入組件

import uCharts from '@/components/u-charts/u-charts.js';

3、模板寫法：

<view class="qiun-charts" >
            <!--#ifdef MP-ALIPAY -->
            <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" 
　　　　　　　　　　:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA"></canvas>
            <!--#endif-->
            <!--#ifndef MP-ALIPAY -->
            <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
            <!--#endif-->
        </view>

如果是支付寶小程序用上面那種，即

<view class="qiun-charts" >
            <!--#ifdef MP-ALIPAY -->
            <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" 
　　　　　　　　　　:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA"></canvas>
            <!--#endif-->
        </view>

支付寶以外用下面那種，即

<view class="qiun-charts" >
            <!--#ifndef MP-ALIPAY -->
            <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
            <!--#endif-->
        </view>

4、樣式寫法

.qiun-charts{
        width: 750upx; 
        height:500upx;
        background-color: #FFFFFF;
        }
    .charts{
        width: 750upx; 
        height:500upx;
        background-color: #FFFFFF;
        }

5、實例化方法

showLineA(canvasId,chartData){
                canvaLineA=new uCharts({
                    $this:_self,
                    canvasId: canvasId,
                    type: 'line',
                    fontSize:11,
                    padding:[15,20,0,15],
                    legend:{
                        show:true,
                        padding:5,
                        lineHeight:11, // 控制標題的行高
                        margin:0, // 控制標題的margin
                    },
                    dataLabel:true,
                    dataPointShape:true,
                    background:'#FFFFFF',
                    pixelRatio:_self.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation: true,
                    xAxis: {
                        type:'grid',
                        gridColor:'#CCCCCC',
                        gridType:'dash',
                        dashLength:8,
            boundaryGap:'justify'
                    },
                    yAxis: {
                        gridType:'dash',
                        gridColor:'#CCCCCC',
                        dashLength:8,
                        splitNumber:5,
                        format:(val)=>{return val.toFixed(0)+'元'}
                    },
                    width: _self.cWidth*_self.pixelRatio,
                    height: _self.cHeight*_self.pixelRatio,
                    extra: {
                        line:{
                            type: 'curve'
                        }
                    }
                });
                //下面是默認選中索引
                let cindex=3;
                //下面是自定義文案
                let textList=[{text:'我是一個標題',color:null},{text:'自定義1：值1',color:'#2fc25b'},{text:'自定義2：值2',color:'#facc14'},
　　　　　　　　　　　　　　　　　　{text:'自定義3：值3',color:'#f04864'}];
                //下面是event的模擬,tooltip的Y坐標值通過這個mp.changedTouches[0].y控制
                let tmpevent={mp:{changedTouches:[{x: 0, y: 80}]}};
                setTimeout(()=>{
                    canvaLineA.showToolTip( tmpevent , {
                        index:cindex,
                        textList:textList
                    });
                },200)
            },
            touchLineA(e) {
                canvaLineA.touchLegend(e);
                canvaLineA.showToolTip(e, {
                    format: function (item, category) {
                        return category + ' ' + item.name + ':' + item.data 
                    }
                });
            },

數據模型中拷貝以下參數

data() {
            return {
                cWidth:'',
                cHeight:'',
                pixelRatio:1,
                textarea:''
            }
        },

6、在實際項目中，我們是從后台獲取數據存入chartData中，並調用實例化方法。這里我們先在數據模型中給出chartData的默認值，並在onLoad中調用實例化方法

onLoad(options) {
            this.showLineA("canvasLineA",this.chartData)
        },

chartData數據示例：

{
    "categories":["2012","2013","2014","2015","2016","2017"],
    "series":[
        {"name":"成交量A","data":[35,8,25,37,4,20]}
    ]
}

7、在onLoad生命周期函數中初始化cWidth和cHeight，來控制圖標的寬和高

this.cWidth=uni.upx2px(750);
            this.cHeight=uni.upx2px(500);

8、定義canvaLineA

var canvaLineA=null;

效果如下圖所示

 完整代碼如下：

<template>
    <view class="container">
        <view class="qiun-charts" >
            <!--#ifndef MP-ALIPAY -->
            <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
            <!--#endif-->
        </view>
    </view>
</template>

<script>
    import uCharts from '@/components/u-charts/u-charts.js';
　　var canvaLineA=null;
    export default {
        data(){
            return {
                cWidth:'',
                cHeight:'',
                pixelRatio:1,
                textarea:'',
                chartData:{
                    "categories":["2012","2013","2014","2015","2016","2017"],
                    "series":[
                        {"name":"成交量A","data":[35,8,25,37,4,20]}
                    ]
                }
            }
        },
        onLoad(options) {
            console.log(options)this.cWidth = uni.upx2px(720);
            this.cHeight = uni.upx2px(420);
            this.showLineA("canvasLineA",this.chartData)
        },
        methods:{
            showLineA(canvasId,chartData){ canvaLineA=new uCharts({
                    $this:this,
                    canvasId: canvasId,
                    type: 'line',
                    fontSize:11,
                    padding:[15,20,0,15],
                    legend:{
                        show:true,
                        padding:5,
                        lineHeight:11,
                        margin:0,
                    },
                    dataLabel:true,
                    dataPointShape:true,
                    background:'#FFFFFF',
                    pixelRatio:this.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation: true,
                    xAxis: {
                        type:'grid',
                        gridColor:'#CCCCCC',
                        gridType:'dash',
                        dashLength:8,
            boundaryGap:'justify'
                    },
                    yAxis: {
                        gridType:'dash',
                        gridColor:'#CCCCCC',
                        dashLength:8,
                        splitNumber:5,
                        format:(val)=>{return val.toFixed(0)+'元'}
                    },
                    width: this.cWidth*this.pixelRatio,
                    height: this.cHeight*this.pixelRatio,
                    extra: {
                        line:{
                            type: 'curve'
                        }
                    }
                });
                //下面是默認選中索引
                let cindex=3;
                //下面是自定義文案
                let textList=[{text:'我是一個標題',color:null},{text:'自定義1：值1',color:'#2fc25b'},{text:'自定義2：值2',color:'#facc14'},
　　　　　　　　　　　　　　　　　　{text:'自定義3：值3',color:'#f04864'}];
                //下面是event的模擬,tooltip的Y坐標值通過這個mp.changedTouches[0].y控制
                let tmpevent={mp:{changedTouches:[{x: 0, y: 80}]}};
                setTimeout(()=>{
                    canvaLineA.showToolTip( tmpevent , {
                        index:cindex,
                        textList:textList
                    });
                },200) },
            touchLineA(e) {
                canvaLineA.touchLegend(e);
                canvaLineA.showToolTip(e, {
                    format: function (item, category) {
                        return category + ' ' + item.name + ':' + item.data 
                    }
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .qiun-charts{
        width: 750upx; 
        height:500upx;
        background-color: #FFFFFF;
        }
    .charts{
        width: 750upx; 
        height:500upx;
        background-color: #FFFFFF;
        }
</style>

touchLegend(e) 圖例點擊交互事件

showToolTip(e) 圖表中展示數據詳細內容

 legend中的兩個屬性position和float來修改標題的位置：

legend:{
                        show:true,
                        padding:5,
                        lineHeight:11,
                        margin:0,
                        position: 'top',
                        float: 'right'
                    },

dataLabel屬性用來修改曲線上是否顯示數組，值為true表示顯示數據，值為false表示隱藏數據

dataPointShape屬性用來控制曲線上是否顯示點。值為true表示顯示點，值為false表示隱藏點

xAxis.labelCount：默認series.data.length，X軸可見區域標簽數量（即X軸數刻度標簽單屏幕限制顯示的數量）

boundaryGap：折線圖、區域圖起畫點結束點方法：center為單元格中間起畫，justify為0點起畫即兩端對齊

當值為justify時是這樣的：

 

 當值為justify時是這樣的：

 

 toFixed() 方法可把 Number 四舍五入為指定小數位數的數字。toFixed(0)表示小數位數為0.