ucharts使用内容

教程

https://www.bookstack.cn/read/ucharts/ed9cb2b78f4d6c47.md

在页面中进行使用，数据量较多

<template>
<view class="qiun-columns">
    <!-- 选择时间 -->
    <view class="choiceBox">
        <view class="choice_left_Box">
            {{flag}}
        </view>
        <view class="choice_right_Box">
            最近三天
        <!--     <picker @change="bindPickerChange" :value="index" :range="array">
                <view class="uni-input">{{array[index]}}</view>
                <image class="choiceItemImg" src="../../static/img/jiankouhao.png" mode=""></image>
            </picker> -->
        </view>
    </view>
    <view class="qiun-bg-white qiun-title-bar qiun-common-mt" v-if="canvasLineA">
        <view class="qiun-title-dot-light">压力</view>
    </view>
    <view class="qiun-charts" v-if="canvasLineA">
        <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :disable-scroll='true' @touchstart="touchLineA($event,'canvasLineA')" @touchmove="moveLineA($event,'canvasLineA')" @touchend="touchEndLineA($event,'canvasLineA')"></canvas>
    </view>
    <view class="qiun-bg-white qiun-title-bar qiun-common-mt" v-if="LineWater">
        <view class="qiun-title-dot-light">液位</view>
    </view>
    <view class="qiun-charts" v-if="LineWater">
        <canvas canvas-id="LineWater" id="LineWater" class="charts" :disable-scroll='true' @touchstart="touchLineA($event,'LineWater')" @touchmove="moveLineA($event,'LineWater')" @touchend="touchEndLineA($event,'LineWater')"></canvas>
    </view>

</view>
</template>
<script>
import uCharts from '../utils/u-charts/u-charts.min.js'
import url from '../utils/api.js'
var _self;
var canvasLineA=null;
var LineWater=null;

export default{
        data(){
            return{
                cWidth:'',
                cHeight:'',
                pixelRatio:1,
                device_id:0,
                flag:'',
                days:3,
                canvasLineA:null,
                LineWater:null,
                array: ['最近三天'],
                index: 0,
            }
        },
        onLoad(options){
            console.log(options,'----------flag')
            this.device_id=options.id
            this.flag=options.flag
            _self =this;
            this.cWidth=uni.upx2px(750);
            this.cHeight=uni.upx2px(500);
            this.getServerData();
        },
        methods:{
            bindPickerChange: function(e) {
                if(this.index != e.target.value){
                    this.index = e.target.value
                    if(this.array[this.index]=='最近三天'){
                        this.days=3
                    }
                    this.getServerData()
                }
            },
            getServerData(){
                uni.showLoading({
                    title: '加载中'
                });
                url.vechiledataanalyze({
                    vechile_id: this.device_id,
                    days: this.days
                }).then(response=>{
                    let [error, res] = response;
                    uni.hideLoading();
                  if(res){
                      console.log(res,'------移动设备事件')
                      if(res.data.code[0]=="200"){
                            // 压力
                            if(res.data.pressure.length!=0){
                                let LineA={
                                    categories: res.data.time,
                                    series: [{
                                        name: '压力',
                                        data: res.data.pressure,
                                        color: '#C992FF'
                                    }]
                                };
                                 canvasLineA=_self.showLineA("canvasLineA",LineA,res.data.maxpress,res.data.minpress);
                            }
                            // 液位 LineWater
                            if(res.data.liquid.length!=0){
                                let LineA={
                                    categories: res.data.time,
                                    series: [{
                                        name: '液位',
                                        data: res.data.liquid,
                                        color: '#FFB7B7'
                                    }]
                                };
                                 LineWater=_self.showLineA("LineWater",LineA,null,null);
                            }

                            this.LineWater= LineWater==null ? false:true
                            this.canvasLineA= canvasLineA==null ? false:true
                      }else{
                        uni.showToast({
                            title: res.data.message[0],
                            icon:'none',
                            duration: 2000
                        });
                      }
                  }else{
                    uni.showToast({
                        title: '数据获取失败',
                        icon:'none',
                        duration: 2000
                    });
                  }
                })
            },
            showLineA(canvasId,chartData,max,min){
                return new uCharts({
                    $this:_self,
                    canvasId: canvasId,
                    type:'line',
                    fontSize:11,
                    legend:true,
                    dataLabel:false,
                    dataPointShape:false,
                    background:'#FFFFFF',
                    pixelRatio:_self.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation:false,
                    enableScroll:true,//开启图表拖拽功能
                    xAxis:{
                        disableGrid:false,
                        type:'grid',
                        gridType:'dash',
                        itemCount:70,
                        labelCount:2,
                        scrollShow:true,
                        scrollAlign:'left',
                        scrollBackgroundColor:'#F7F7FF',
                        scrollColor:'#DEE7F7',
                        disableGrid:true,    //不显示横坐标网格
                    },
                    yAxis:{
                        //disabled:true
                        gridType:'dash',
                        splitNumber:5,
                        min:min,
                        max:max,
                        format:(val)=>{return val}
                    },
                     _self.cWidth*_self.pixelRatio,
                    height: _self.cHeight*_self.pixelRatio,
                    extra:{
                        lineStyle:'straight'
                    },
                });
            },
            touchLineA(e,canvaID){
                if(canvaID=='canvasLineA'){
                    canvasLineA.scrollStart(e);
                }else if(canvaID=='LineWater'){
                    LineWater.scrollStart(e);
                }
                
            },
            moveLineA(e,canvaID){
                if(canvaID=='canvasLineA'){
                    canvasLineA.scroll(e);
                }else if(canvaID=='LineWater'){
                    LineWater.scroll(e);
                }
            },
            touchEndLineA(e,canvaID){
                if(canvaID=='canvasLineA'){
                    canvasLineA.scrollEnd(e);
                    //下面是toolTip事件，如果滚动后不需要显示，可不填写
                    canvasLineA.showToolTip(e,{
                        format:function(item, category){
                        return category +' '+ item.name +':'+ item.data 
                        }
                    });
                }else if(canvaID=='LineWater'){
                    LineWater.scrollEnd(e);
                    //下面是toolTip事件，如果滚动后不需要显示，可不填写
                    LineWater.showToolTip(e,{
                        format:function(item, category){
                        return category +' '+ item.name +':'+ item.data 
                        }
                    });
                }

            },
        }
}
</script>
<style lang="scss">
page{
    background:#F2F2F2;
    width:750upx;
    overflow-x: hidden;
}
.Clately{
    float: right;
    margin-right: 30rpx;
    margin-top: -40rpx;
    font-size: 28upx;
    color: #0157FE
}
.choiceBox{
    width: 750rpx;
    height: 88rpx;
    margin-bottom: 18rpx;
    background: #1F6BFF;
    .choice_left_Box{
        float: left;
        line-height: 60rpx;
        text-align: center;
        color: #FFFFFF;
        height: 60rpx;
        margin-top: 19rpx;
        font-size: 24rpx;
        width: 374rpx;
        border-right: 1px solid #FFFFFF;
    }
    .choice_right_Box{
        float: left;
        line-height: 60rpx;
        text-align: center;
        color: #FFFFFF;
        height: 60rpx;
        margin-top: 19rpx;
        font-size: 24rpx;
        width: 375rpx;
        position: relative;
        .choiceItemImg{
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            top: 8rpx;
            right: 60rpx;
            transform:rotate(90deg);
        }
    }
}
.qiun-padding{
    padding:2%;
    width:96%;
}
.qiun-wrap{
    display:flex; 
    flex-wrap:wrap;
}
.qiun-rows{
    display:flex; 
    flex-direction:row !important;
}
.qiun-columns{
    display:flex; 
    flex-direction:column !important;
}
.qiun-common-mt{
    margin-top:10upx;
}
.qiun-bg-white{
    background:#FFFFFF;
}
.qiun-title-bar{
    width:100%; 
    padding:10upx; 
    flex-wrap:nowrap;
}
.qiun-title-dot-light{
    border-left:10upx solid #0ea391; 
    padding-left: 10upx; 
    font-size: 32upx;
    color: #000000
}
.qiun-charts{
    width:750upx; 
    height:500upx;
    background-color:#FFFFFF;
}
.charts{
    width:750upx; 
    height:500upx;
    background-color:#FFFFFF;
}
.enterpriseDetailsInfo{
    background-color: #FFFFFF;
    // border-radius: 16rpx;
    width: 750rpx;
    // margin: 24rpx;
    padding: 1rpx 0rpx 30rpx;
    .line{
        background-color: #E7EEF3;
        height: 1px;
    }
    .centenTitle{
        color: #010C20;
        font-size: 24rpx;
        margin: 16rpx 16rpx 8rpx;
        font-weight: 400rpx;
    }
    .centenInfo{
        color: #434445;
        font-size: 24rpx;
        font-weight: 400rpx;
        line-height: 33rpx;
        margin: 0rpx 16rpx;
    }
    .departmentBoxInfoImg{
        display: flex;
        margin: 23rpx 0;
        .departmentBoxInfoImgLeft{
            color: #010C20;
            padding-left: 16rpx;
            line-height: 65rpx;
            font-size: 24rpx;
            flex: 1;
        }
        .departmentBoxInfoImgImg{
            width: 140rpx;
            height: 198rpx;
            margin-right: 16rpx;
            border: 1px solid #EEEEEE;
        }
    }
}
.departmentBoxInfoText{
    height: 65rpx;
    width: 700rpx;
    line-height: 65rpx;
    font-size: 24rpx;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    .departmentBoxInfoTextLeft{
        color: #010C20;
        width: 130rpx;
        // background-color: #f00;
    }
    .departmentBoxInfoTextRight{
        color: #434445;
        flex: 1;
        text-align: right;
        .departmentBoxInfoTextRightImg{
            width: 40rpx;
            height: 40rpx;
            margin-top: 13rpx;
        }
    }
}
</style>