微信小程式基礎教程之echart的使用

阿新 • • 發佈：2021-06-02

前言

先看下最終實現的效果–自己做的小demo

微信小程式基礎教程之echart的使用

首先到ECharts官網下載官網地址

根據上面的網址下載程式碼把ec-canvas檔案拷貝下來放到你自己的專案中，

我放的是tool資料夾下面，你們隨意引入的時候注意路徑就行

微信小程式基礎教程之echart的使用

2.使用

然後在你需要用的頁面引入，在json中加入，這裡要注意路徑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,http://www.cppcns.com                 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)
        })
    },handxOEMtGHEfZ 
leOriginData(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) {           //初始化圖表
    thishttp://www.cppcns.com.echartComponent.init((canvas,width,height) => {
        const chart = echarts.init(canvas,null,{
            width: width,height: height
        });
        setOption(chart,data)
        this.chart = chart;
        return chartwww.cppcns.com;
    });
},onLoad: function (options) {
        this.getEchartData()
    },/**
     * 生命週期函式--監聽頁面初次渲染完成
     */
    onReady: function () {
        this.echartComponent = this.selectComponent('#mychart-dom-bar');  
    },})

採坑tips 當按照教程配置好圖沒有預想出來時注意新增下樣式