微信小程序基础教程之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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
vue 如何使用递归组件
Oct 23 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
You might like
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
浅析js封装和作用域
2013/07/09 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
python fabric实现远程操作和部署示例
2014/03/25 Python
Python3使用requests发闪存的方法
2016/05/11 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
可靠的数据流传输TCP
2016/03/15 面试题
《月光启蒙》教学反思
2014/03/01 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
安全生产演讲稿
2014/05/09 职场文书
红色旅游心得体会
2014/09/03 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
心灵捕手观后感
2015/06/02 职场文书
技术转让协议书
2016/03/19 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL