微信小程序基础教程之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 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
You might like
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
php短信接口代码
2016/05/13 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
jquery tab插件精简版分享
2011/09/10 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
理解javascript对象继承
2016/04/17 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
JS实现打字游戏
2019/12/17 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
js实现搜索提示框效果
2020/09/05 Javascript
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
高中数学教师求职信
2013/10/30 职场文书
党员实事承诺书
2014/03/26 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
合作合同协议书范本
2015/01/27 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
golang中的并发和并行
2021/05/08 Golang