微信小程序基础教程之echart的使用


Posted in Javascript onJune 01, 2021

前言

先看下最终实现的效果?自己做的小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,
                    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使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
You might like
php win下Socket方式发邮件类
2009/08/21 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
js实现图片轮播效果
2015/12/19 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
javascript中this指向详解
2016/04/23 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
Django如何实现内容缓存示例详解
2017/09/24 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
大学生创业计划书怎么写
2014/09/15 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2015元旦节寄语
2014/12/08 职场文书
五一劳动节慰问信
2015/02/14 职场文书
审美与表现自我评价
2015/03/09 职场文书
公司处罚决定书
2015/06/24 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
如何正确理解python装饰器
2021/06/15 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS