위 챗 애플 릿+ECharts 동적 리 셋 을 위 한 프로 세 스 기록

머리말
최근 에 하나의 수요 에 부 딪 혔 습 니 다.바로 작은 프로그램 에서 실시 간 으로 도 표를 갱신 하 는 것 입 니 다.처음에 wx-chart 를 선택 한 후에 제 수 요 를 만족 시 키 지 못 한 다 는 것 을 알 게 되 었 습 니 다.마지막 으로 ECharts 를 선 택 했 고 구 덩이 를 밟 았 습 니 다.인터넷 에서 자 료 를 수집 한 후에 제 가 실현 하 는 과정 을 기 록 했 습 니 다.
방법 실례
1.먼저 ECharts 홈 페이지 에 가서 예 를 다운로드 한 다음 ec-canvas 파일 을 복사 해서 프로젝트 에 넣 습 니 다.

2.그리고 당신 이 사용 해 야 할 페이지 를 도입 하고 xxx.json 에 가입 합 니 다.여기 서 경 로 를 주의해 야 합 니 다.제 페이지 는 pages 폴 더 에 통일 되 어 있 습 니 다.

"usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
 }

3.Ok,일 을 시 작 했 습 니 다.저 는 한 페이지 두 도표 의 예 를 들 어 간단 한 레이아웃 과 스타일 을 먼저 만 들 겠 습 니 다.
xxx.wxml：
두 개의 canvas 상 자 를 제공 해 야 합 니 다:

<view class="content">
    <ec-canvas id="mychart-one" canvas-id="mychart-multi-one" ec="{{ ecOne}}"></ec-canvas>
    <ec-canvas id="mychart-two" canvas-id="mychart-multi-two" ec="{{ ecTwo }}"></ec-canvas>
</view> 

xxx.wxss:

.content {
    width: 100%;
    background-color: #F2F2F2;
    overflow-y: auto;
}
#mychart-one {
    position: absolute; 
    top: 0;
    height: 50%;
    left: 0;
    right: 0;
}
#mychart-two {
    position: absolute; 
    top: 50%;
    height: 50%;
    left: 0;
    right: 0;
}

여기 서 주의해 야 할 것 은 만약 에 세 개의 도표,네 개의 도표 또는 여러 개 를 놓 으 려 면 반드시 canvas 상자 의 높이 를 설정 해 야 한 다 는 것 이다.그렇지 않 으 면 뒤에 있 는 두 개의 시계 가 왜 없어 졌 는 지 알 게 될 것 이다!공식 적 인 여러 개의 도표 가 높이 를 설정 하지 않 았 기 때문에 나 는 공식 적 인 것 에 따라 몇 개의 그림 을 놓 았 는데 모두 없다 는 것 을 알 게 되 었 다.마음 이 피곤 해서 한참 을 찾 아 보 니 스타일 문제 라 는 것 을 알 게 되 었 다.아예 모든 상자 에 50%의 높이 를 설치 했다.
4.자,준비 조건 이 다 되 었 습 니 다.그 다음은 중요 한 장면 입 니 다.
xx.js
우선 페이지 에서 그 공식 구성 요 소 를 처음 도입 해 야 할 것 입 니 다.

import * as echarts from '../../ec-canvas/echarts';

먼저 표 에 보 여줄 스타일 설정 같은 것 을 설정 합 니 다.

function setOption(chart, xdata, ydata) {
    const option = {
        title: {
            text: '  ',
            padding: [10, 0, 0, 20],
            textStyle: {
                fontSize: 14,
                color: '#696969'
            },
            top: '10rpx'
        },
        backgroundColor: "#fff",
        color: ["#006EFF", "#67E0E3", "#9FE6B8"],
        animation: false,
        grid: {
            show: false
        },
        xAxis: {
            type: 'category',
            data: xdata,      //x         ，          
            axisLabel: {
                interval: 5,   //x         
                formatter: function (value) {   //    
                    var date = new Date(value * 1000);
                    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
                    return h + m
                },
                fontSize: 8
            }
        },
        yAxis: {
            x: 'center',
            scale: true,
            type: 'value',
            axisLabel: {
                formatter: function (value) {
                var val = value / 1000000000 + 'G';
                    return val
                }
            }
        },
        series: [{
            type: 'line',
            data: ydata,    //y          ，        
            symbol: 'none',
            lineStyle: {
                width: 1
            }
        }]
    };
    chart.setOption(option)
}

페이지 를 쓰 는 방법 들

Page({
    data: {
        ecOne: {
            lazyLoad: true
        },
        ecTwo: {
            lazyLoad: true
        },
        timer:''                 //        ，         
    },
    onLoad: function (options) {
        var _this = this;
        this.getOneOption();
        this.getTwoOption();
        this.setData({                    //         
            timer: setInterval(function () {
                    _this.getOneOption();
                    _this.getTwoOption();
                }, 60000)
        })
    },
    onReady: function () {               //          
        this.oneComponent = this.selectComponent('#mychart-one');  
        this.twoComponent = this.selectComponent('#mychart-two');
    },
    onUnload: function () {
        clearInterval(this.data.timer)
    },
    init_one: function (xdata, ydata) {           //        
        this.oneComponent.init((canvas, width, height) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            setOption(chart, xdata, ydata)
            this.chart = chart;
            return chart;
        });
    },
    init_two: function (xdata, ydata) {        //        
        this.storagemaxComponent.init((canvas, width, height) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            setOption(chart, xdata, ydata)
            this.chart = chart;
            return chart;
        });
    },
    getOneOption: function () {        //              
        var _this = this;
        wx.request({
            url: 'https://xxxxxxx.com',    //          
            method: 'POST',
            header: {
                "Content-Type": "application/json"
            },
            data: {               //    ，         
                id:xxxx
            },
            success:function(res){
     //      res.xdata res.ydata        ，  x  y      ，        ！
                _this.init_one(res.xdata,res.ydata)
            }
        })  
    },
    //            
    getTwoOption: function (){  
        var _this = this;
        wx.request({
            url: 'https://xxxxxxx.com',    //          
            method: 'POST',
            header: {
                "Content-Type": "application/json"
            },
            data: {                       //    ，         
                id:xxxx
            },
            success:function(res){
                _this.init_two(res.xdata,res.ydata)
            }
        })  
    }
})

자,대충 절차 가 이 렇 습 니 다.어쨌든 동적 변화 가 필요 하 다 면 매개 변수 로 들 어 갑 니 다.저 는 여기 서 onUnload 에서 타 이 머 를 지 웠 습 니 다.잘 모 르 겠 으 면 다른 페이지 로 넘 어가 면 계속 요청 할 것 입 니 다.그래서 이 페이지 를 떠 나 기 전에 타 이 머 를 지 워 야 합 니 다.기술 이 큰 소 도 아 닙 니 다.더 좋 은 방법 이 있다 면...대신 께 서 많이 지적 해 주시 기 를 바 랍 니 다!하하 하
총결산
위 챗 애플 릿+ECharts 의 동적 리 셋 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 위 챗 애플 릿+ECharts 동적 리 셋 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!