微信小程序基础教程之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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
微信小程序实现左右列表联动
May 19 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 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初学者头疼问题总结
2006/07/08 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
Python文件去除注释的方法
2015/05/25 Python
python中的随机函数小结
2018/01/27 Python
Python实现购物车程序
2018/04/16 Python
Python基于百度云文字识别API
2018/12/13 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
应届生幼儿园求职信
2013/11/12 职场文书
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
两只小狮子教学反思
2014/02/05 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
人力资源求职信
2014/05/25 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
工作经验交流材料
2014/12/30 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书