微信小程序基础教程之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 基础篇4 window对象,DOM
Mar 14 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
js实现照片墙功能实例
Feb 05 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
js与applet相互调用的方法
Jun 22 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
php截取中文字符串函数实例
2015/02/23 PHP
如何在PHP中读写文件
2020/09/07 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
vue中template的三种写法示例
2020/10/21 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python模拟实现斗地主发牌
2020/01/07 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
python实现图片横向和纵向拼接
2020/03/05 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
最新的互联网创业计划书
2014/01/10 职场文书
决心书标准格式
2014/03/11 职场文书
学历公证书范本
2014/04/09 职场文书
学雷锋的心得体会
2014/09/04 职场文书
银行业务授权委托书
2014/10/10 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书