WeChat Mini Program Basic Tutorial: Use of Echart

Preface

Let’s take a look at the final effect first – a small demo I made myself

First go to ECharts official website to download the official website address

Download the code from the URL above and copy the ec-canvas file to your own project.

I put it in the tool folder, just pay attention to the path when you import it

2. Use

Then import it on the page you need and add it to json. Pay attention to the path echart.json

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

3 Rendering

First, make a simple layout and style 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>

Style echart.wxss

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

echart.js

First introduce

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: 'Expenditures'
            },
            {
                id: 'income',
                text: 'Income'
            },
        ],
        activeTab: 'outcome',
        echartsData: null, //echarts data},
    // Income and expenditure switching event changePeriodType(e) {
        console.log(e, '<=income expenditure switching event')
        this.setData({
            activeTab: e.detail.params.type
        })
        // Requery the list this.getEchartData();
    },
    // Query income and expenditure data 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
    },
    /**
   * Life cycle function--listen for page loading*/

  init_one: function (data) { // Initialize the chart 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()
    },

    /**
     * Life cycle function - listen for the completion of the initial rendering of the page*/
    onReady: function () {
        this.echartComponent = this.selectComponent('#mychart-dom-bar');  
    },

})

Tips for finding pits: If the picture configured according to the tutorial does not turn out as expected, please pay attention to adding the following styles

Summarize

This is the end of this article about the basic tutorial on the use of echart in WeChat mini-programs. For more relevant content on the use of echart in WeChat mini-programs, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: