微信小程序（一）：小程序中使用EChart、控制EChart显示隐藏及数据懒加载

效果

引入ECharts

参见 https://github.com/ecomfe/echarts-for-weixin

源码

`pages/index/index.json`

{"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
}

`pages/index/index.wxml`

<!--index.wxml-->
<view class="container"><button bindtap="chartInit" size="mini" type="primary">请求数据加载图表</button><button bindtap="chartReLoad" size="mini" type="primary">修改数据重载图表</button><button bindtap="chartClear" size="mini" type="primary">清除图表数据</button><button bindtap="chartShow" size="mini" type="primary">显示图表（使用保存起来的数据的副本）</button><button bindtap="chartDispose" size="mini" type="primary">释放图表</button><view class="chart" hidden="{{ !isShow }}"><ec-canvas id="my-chart" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas></view><button bindtap="bindToggle" size="mini" type="primary">切换显示隐藏 {{isShow}}</button>
</view>

`pages/index/index.wxss`

/**index.wxss**/
button{display: block!important;margin: 10rpx;
}
.chart {display: block;width: 100%;height: 500rpx;background-color: #b9b8b8;
}ec-canvas{display: block;width: 100%;height: 500rpx;
}

`pages/index/index.js`

import * as echarts from '../../ec-canvas/echarts';Page({ecComponent: null,chart: null,onLoad() {const that = this;// 获取组件that.ecComponent = that.selectComponent('#my-chart');},data: {isShow: false,ec: {// 将 lazyLoad 设为 true 后，需要手动初始化图表lazyLoad: true},option: {grid: {left: 20,right: 40,bottom: 15,top: 40,containLabel: true},xAxis: {type: 'value',},yAxis: {type: 'category',data: [],},series: [{type: 'bar',data: [],}]},},// 点击按钮后初始化图表chartInit() {const that = this;if (!that.ecComponent) return wx.showToast({icon: "error",title: '请初始化组件',});that.ecComponent.init((canvas, width, height, dpr) => {// 获取组件的 canvas、width、height 后的回调函数// 在这里初始化图表const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});// 模拟请求接口setTimeout(() => {that.data.option.yAxis.data = ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'];that.data.option.series[0].data = [300, 270, 340, 344, 300, 320, 310];let option = JSON.parse(JSON.stringify(that.data.option));chart.setOption(option);}, 1000)// 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问that.chart = chart;console.log(chart);// 注意这里一定要返回 chart 实例，否则会影响事件处理等return chart;});},// 重新加载chartReLoad() {const that = this;if (that.chart) {that.data.option.yAxis.data = ['汽车之家', '今日头条', '百度贴吧'];that.data.option.series[0].data = [300, 270, 340];let option = JSON.parse(JSON.stringify(that.data.option));that.chart.setOption(option);};},// 清除图表数据chartClear() {const that = this;if (that.chart) that.chart.clear();},// 显示chartShow(){const that = this;if (that.chart){let option = JSON.parse(JSON.stringify(that.data.option));that.chart.setOption(option);} },// 销毁chartDispose() {const that = this;if (that.chart) that.chart.dispose();},// 切换显示隐藏bindToggle(e){const that = this;that.setData({isShow: !that.data.isShow})if(that.data.isShow){that.chartInit();}}
});

微信小程序（一）：小程序中使用EChart、控制EChart显示隐藏及数据懒加载相关推荐

微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.10 image组件，如何实现图片懒加载？
一.与image组件有关的技术问题 1.1 什么是WebP? webp是image组件的一个boolean属性,开启这个属性之后,代表url可以设置webp这种格式的图片.webP是一种同时提供了有损 ...
小程序看练代码02--模板、封装模板，include模板，wxs，全局样式，导入样式，微信基础样式库，hover-class等，过渡动画，空格使用，图片懒加载，ico图标，图像vh居中，矢量库，表单
1.定义及使用模板模板没有自己的js,也没有自己的监听,而是直接使用页面的js和监听.请更倾向去使用组件 <text>模板的使用</text> <!--模板的定义,要给 ...
工作中遇到的懒加载问题
1.懒加载懒加载(LazyLoad)一直是前端的优化方案之一.它的核心思想是:当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 2.遇到的问 ...
java中什么叫懒加载_java懒加载的原理
聊一下以下名词.概念或用法:lazy.lazy="extra".inverse.fetch.fetch="join".fetch=" subselec ...
微信小程序--图片懒加载
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力.惰性加载是程序人性化的一种体现,提高用户体验,防止 ...
可免费阅读各种漫画的微信小程序，内附好用的图片懒加载组件
一个基于漫画台App原生应用的漫画阅读的微信小程序.所有漫画可免费观看(前提是得有资源?). 项目地址:github源码 API接口文档:API 前言? 在学习一门新的语言或者框架时,做好的方法应该是 ...
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...
微信小程序优化：如何实现图片懒加载？
前言当我们在使用微信小程序浏览图片时,不可避免地会遇到加载缓慢的情况.这不仅会影响用户体验,还会耗费用户的流量.那么,有没有一种方法可以让图片在用户需要时再进行加载,从而提升用户体验和减少流量消耗呢 ...
微信小程序双瀑布流布局+动态懒加载
效果图实现代码: 思路: 将双瀑布流分为left.right两个数据流,通过动态获取两边数据的动态高度来进行判断,下一条数据插入低的一方. 因为用户所上传图片高度不一致,所以image的mode属性 ...

微信小程序（一）：小程序中使用EChart、控制EChart显示隐藏及数据懒加载

效果

引入ECharts

目录

源码

`pages/index/index.json`

`pages/index/index.wxml`

`pages/index/index.wxss`

`pages/index/index.js`

微信小程序（一）：小程序中使用EChart、控制EChart显示隐藏及数据懒加载相关推荐

最新文章

热门文章