微信小程序基础教程之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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
You might like
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
js中url对象化管理分析
2017/12/29 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
Python open读写文件实现脚本
2008/09/06 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
法务专员岗位职责
2014/01/02 职场文书
网络程序员自荐信
2014/01/25 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
普通党员对照检查材料
2014/08/28 职场文书
社会实践活动总结格式
2015/05/11 职场文书
迎新生晚会主持词
2015/06/30 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
python 镜像环境搭建总结
2022/09/23 Python