위 챗 애플 릿 기초 튜 토리 얼 echart 사용

머리말
최종 적 으로 이 루어 지 는 효 과 를 먼저 보 겠 습 니 다.C 가 직접 만 든 데모.

먼저 ECharts 홈 페이지 에서 다운로드 하 세 요홈 페이지 주소
위의 사이트 주소 다운로드 코드 에 따라 ec-canvas 파일 을 복사 하여 자신의 프로젝트 에 넣 습 니 다.
내 가 놓 은 것 은 tool 폴 더 아래 입 니 다.당신들 이 마음대로 도입 할 때 경 로 를 주의 하면 됩 니 다.

2.사용
그리고 필요 한 페이지 에 제 이 슨 에 추가 합 니 다.경로 echart.json 에 주의 하 십시오.

"usingComponents": {
    "tab":"../../component/tabs/tab",
    "ec-canvas":"../../tools/ec-canvas/ec-canvas"
  },

3 렌 더 링
먼저 간단 한 레이아웃 과 스타일 을 echart.wxml 로 만 듭 니 다.

<view class="echart">
 <tab active-tab="{{activeTab}}" period-list="{{periodList}}" bind:changePeriodType='changePeriodType'></tab>
 <view class="echart-position">
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar"></ec-canvas>
 </view>
 
</view>

스타일 echart.wxss

.echart-position {
    position:relative;
    height: 280px;
    overflow:hidden;
  }

echart.js
선 도입

import * as echarts from '../../tools/ec-canvas/echarts';
function setOption(chart,data){
    var option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            data: []
        },
        series: [{
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
               ...data
            ]
        }]
    };
    chart.setOption(option);
    return chart;
}
Page({
    data: {
        periodList: [
            {
                id: 'outcome',
                text: '  '
            },
            {
                id: 'income',
                text: '  '
            },
        ],
        activeTab: 'outcome',
        echartsData: null, // echarts   
    },
    //         
    changePeriodType(e) {
        console.log(e, '<=        ')
        this.setData({
            activeTab: e.detail.params.type
        })
        //       
        this.getEchartData();
    },
    //         
    getEchartData() {
        wx.cloud.database().collection('spendD').where({
            type: this.data.activeTab == 'outcome' ? 0 : 1
        }).get().then(res => {
            let calcResult  = this.handleOriginData(res.data);
            this.setData({
                echartsData:calcResult
            })
            this.init_one(calcResult)
        })
    },
    handleOriginData(array) {
        let result = [];
        let obj = {}
        array.forEach(item => {
            if (!obj[item.name]) {
                obj[item.name] = 0;
            }
            obj[item.name] += Number(item.amount);
        })

        for(let key in obj){
            let temp  = {};
            temp['name'] = key;
            temp['value']= obj[key];
            result.push(temp);
        }
        console.log(result,'result')
        return result
    },
    /**
   *       --      
   */

  init_one: function (data) {           //     
    this.echartComponent.init((canvas, width, height) => {
        const chart = echarts.init(canvas, null, {
            width: width,
            height: height
        });
        setOption(chart,data)
        this.chart = chart;
        return chart;
    });
},
    onLoad: function (options) {
        this.getEchartData()
    },

    /**
     *       --          
     */
    onReady: function () {
        this.echartComponent = this.selectComponent('#mychart-dom-bar');  
    },

})

채 갱 tips 는 튜 토리 얼 에 따라 그림 이 예상 되 지 않 았 을 때 스타일 을 추가 하 는 것 에 주의 하 십시오.
총결산
위 챗 애플 릿 기초 튜 토리 얼 의 echart 사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 애플 릿 echart 사용 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!