微信小程序使用Echarts-for-weixin实现图表动态更新数据、懒加载(干货满满!!!)

这篇具有很好参考价值的文章主要介绍了微信小程序使用Echarts-for-weixin实现图表动态更新数据、懒加载(干货满满!!!)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

后端开发入坑全栈之 微信小程序 + Echarts图表
上需求,如下:
微信小程序echart,微信小程序,微信小程序,echarts,前端

一、Echarts介绍

Apache Echarts是一个基于JavaScript的开源可视化图表库,用于创建各种类型图表,常用图表类型有柱状图、折线图、饼状图、散点图等等。废话不多说,直接上干货!耶✌

二、微信小程序中使用 Echarts

1、下载Echart-for-weixin项目

echart-for-weixin 项目提供了一个小程序组件(ec-canvas),用这种方式可以方便地使用Echarts
微信小程序echart,微信小程序,微信小程序,echarts,前端
解压下载下来的项目文件去小程序中打开效果如下:
微信小程序echart,微信小程序,微信小程序,echarts,前端

2、小程序项目中引入echarts

将Echart-for-weixin项目的 ec-cancas组件 复制到你的小程序开发项目目录下,既然是组件,那我就放到pages外了,养成好习惯~
微信小程序echart,微信小程序,微信小程序,echarts,前端

3、根据项目需求在线定制图表

考虑到小程序后期上线会对文件大小有限制,建议到官网进行 在线定制图形 按需下载相应的echarts图表、坐标系和组件
微信小程序echart,微信小程序,微信小程序,echarts,前端
将下载好生成的图表定制文件echarts.min.js重命名为echarts.js并替换掉项目组件ec-cancas中的echarts.js,启动项目…
微信小程序echart,微信小程序,微信小程序,echarts,前端
啊?报错了。。。刷新、编译都没用?别慌,我们来看看提示说 ec-canvas/ec-canvas.js 已被代码依赖分析忽略,无法被其他模块引用?
有3种解决方案:

  1. project.config.json 中 settings 选项添加 "ignoreDevUnusedFiles": false, "ignoreUploadUnusedFiles": false
  2. 详情 -> 本地设置 -> 上传时过滤无依赖文件 勾选去掉 即可
    微信小程序echart,微信小程序,微信小程序,echarts,前端
  3. 清缓存!!!(好家伙,一步到位,以上两种都是关闭过滤无依赖文件,以后遇到奇奇怪怪的报错问题都知道先怎么做了叭?直接给我清缓存,如果没用再去百度🤒)

4、在页面中使用Echarts图表

  • (1) 在页面json文件中引入ec-canvas组件
    pages/test/test.json
{
	"usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}
  • (2) 在页面wxml文件中使用ec-canvas组件(图表组件标签内添加 force-use-old-canvas=“true” 避免上下滑动页面图表出现漂移)
    pages/test/test.wxml
<view style="display: flex;">
  <button class="{{isSel == 1 ? 'selColor': ''}}" bindtap="selectTap" data-sel="1"></button>
  <button class="{{isSel == 2 ? 'selColor': ''}}" bindtap="selectTap" data-sel="2"></button>
  <button class="{{isSel == 3 ? 'selColor': ''}}" bindtap="selectTap" data-sel="3"></button>
</view>
<!-- 使用ec-canvas组件 -->
<view class="main">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
</view>
  • (3) 在页面wxss文件中给ec-canvas图表组件设置高度(使用图表的容器必须给定高度!!!)
    pages/test/test.wxss
.main {
  height: 400rpx;
}

ec-canvas {
  width: 100%;
  height: 100%;
}

.selColor {
  background: #3FD0AA;
  color: #ffffff;
}
  • (4) 在页面js文件中配置echart图表样式(这里我对图表的配置选项option做了封装,便于动态更新数据和切换图表类型)
    pages/test/test.js
import * as echarts from '../../ec-canvas/echarts';
const chartsOption = require('../../utils/chartsOption')

Page({
  data: {
    isSel: 1,
    barData: {
      xData: ['10:20', '10:30', '10:50'],
      yData: [90, 60, 80]
    },
    ec: {
      lazyLoad: true // 懒加载
    }
  },

  selectTap(e) {
    const isSel = e.currentTarget.dataset.sel
    const that = this
    const barData = that.data.barData
    console.log(barData);
    if (isSel == 1) {
      barData.xData = ['10:20', '10:30', '10:50']
      barData.yData = [90, 60, 80]
    } else if (isSel == 2) {
      barData.xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      barData.yData = [23, 50, 18, 25, 80, 25, 100]
    } else {
      barData.xData = ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07']
      barData.yData = [90, 60, 80, 70, 40, 50, 100]
    }
    that.setData({
      isSel,
      barData
    })
    that.initChart(that.data.barData)
  },

  initChart(barData) {
    // 绑定组件
    this.barComponent = this.selectComponent("#mychart-dom-bar");
    // 初始化柱状图
    this.barComponent.init((canvas, width, height, dpr) => {
      // 初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 解决模糊显示问题
      })
      // 开发中根据从后端获取barData数据,动态更新图表
      chart.setOption(chartsOption.barOption(barData))
      return chart
    })
  },

  onShow() {
    this.initChart(this.data.barData)
  }
})

  • (5) chartsOption.js文件封装图表的配置选项option,便于切换图表(option配置项内容有点多,就不一一介绍了,感兴趣的小伙伴可以去官网开看一下,活学活用~)
    utils/chartsOption.js
// 柱状图
function barOption(data) {
	// 图表内容配置项
	const option = {
		xAxis: {
			// 隐藏x轴刻度线
			axisTick: {
				show: false
			},
			data: data.xData
		},
		yAxis: {
			// 隐藏y轴网格线
			splitLine: {
				show: false
			},
			// 隐藏y轴数值
			axisLabel: {
				show: false
			},
		},
		grid: {
			top: '10%',
			right: '3%',
			left: '3%',
			bottom: '22%'
		},
		series: [{
			type: 'bar',
			barWidth: '20', // 柱的宽度
			data: data.yData,
			// 柱的数值显示
			label: {
				show: true,
				position: 'top',
			},
			itemStyle: {
				color: '#3FD0AA',
				barBorderRadius: 2,
				borderWidth: 1,
				shadowColor: '#3FD0AA',
				borderType: 'dashed'
			}
		}],
		// Echarts 横向滚动
		// dataZoom: [{
		// 	type: 'slider',
		// 	show: true,
		// 	xAxisIndex: [0],
		// 	startValue: 0,
		// 	endValue: 7,
		// 	height: '5%', // 滚动条高度
		// 	bottom: '5%',
		// 	left: '2%',
		// 	right: '3%'
		// }]
	}
	return option
}

// 其他图表的配置...

module.exports = {
	barOption
}

效果如下:

微信小程序+Echarts图表

结语

最近工作上遇到在小程序中使用Echarts图表做数据统计,刚从后端转前端开发(也就是全干😐),刚开始一头雾水,花了一些时间整理了下,这里只是简单记录下用法、公司项目上也只是用到了柱状图展示、至于其他的图表就不给大家展示了,用到哪些图表可以在线定制下来,最好封装一下配置选项,方便灵活切换图表。全栈中的菜鸟一枚,对本文有什么疑问或者更好的建议,欢迎各位大佬提出指正!文章来源地址https://www.toymoban.com/news/detail-757758.html

到了这里,关于微信小程序使用Echarts-for-weixin实现图表动态更新数据、懒加载(干货满满!!!)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用ECharts----折线图

    微信小程序的开发者在很多情况下需要使用图形化数据展示,现有的 ECharts 这样的可视化工具由于一些原因并不能在微信小程序中使用。 因此,ECharts 团队和微信小程序官方团队合作,提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式,快速开发图表,

    2024年04月15日
    浏览(65)
  • uniapp 微信小程序使用echarts

    本文目的:通过分包的方式,尽可能在微信小程序中使用最新的echarts。 当然你也可以直接使用现成的uchart或者市场里别人封好的echarts. 准备工作 下载echarts-for-weixin源码。 复制 ec-canvas 文件夹以及下属文件,在uniapp项目中与pages同级的地方创建 wxcomponents 文件夹,将复制的文件

    2024年02月04日
    浏览(49)
  • UNIAPP微信小程序使用Echarts

    ​ 最近要在uniapp做的小程序中使用echarts,网上搜了很多教程都很麻烦,这里提供一种简便快捷CV方案。 ​ 先说下图表选型的问题,如果你只用于微信小程序,可以使用本方案,Echarts丰富多样的图表和广大的开源图库都已使用。如果要考虑兼容性问题,比如兼容支付宝小程序

    2024年02月09日
    浏览(45)
  • 微信小程序中使用动态echarts

    解压后打开,把ec-canvas文件夹复制到项目pages同目录下 如有必要,将 ec-canvas 目录下的 echarts.js 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用自定义构建生成并替换 echarts.js 进入官网echarts点击下载 然后根据自己的需求选择需要的图表、坐标系、组件进行打包下

    2024年02月14日
    浏览(44)
  • 微信小程序中简单使用echarts图表

       1.复制组件至page同级目录下(ec-canvas) 2. 在js中引入 3.在wxml写个标签 样式我是这么设置的(在wcss),差不多大写微信里尺寸可以 4.编写数据咯(数据肯定是从接口传的,我就不写死了 直接方法也贴出来) 先创建对象 初始化图表 定义option 定义方法掉接口数据定义optio

    2024年02月09日
    浏览(51)
  • uniapp微信小程序中使用echarts

    可以先随便建个文件夹,然后 npm init。运行下面的命令行,下载依赖 找到node_modulesmpvue-echarts下的文件,保留src文件夹,其他删除,复制mpvue-echarts文件夹到项目的components中 1.2、获取定制echarts的js文件 在https://echarts.apache.org/zh/builder.html定制echarts的js文件,然后下载,放到c

    2024年02月15日
    浏览(49)
  • 微信小程序使用echarts动态加载数据

    官网地址 GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本  将官网代码下载到本地,并进行解压,可以运行一下查看示例代码 将图示中的文件夹复制粘贴到小程序相应位置,建议放在components文件夹中  json文件,路径要与文件的位置保持一致  wxml文件,给ec-canvas一

    2024年04月12日
    浏览(39)
  • 在原生微信小程序中使用echarts

    现在越来越多的项目都在使用可视化的功能,那么使用 echarts 实现是一种不错的选择,本文将带给大家如何在原生微信小程序中使用 echarts,保姆级教程 文件地址:https://github.com/ecomfe/echarts-for-weixin/tree/master 创建一个微信小程序项目或打开已有的微信小程序项目,下述示例采

    2024年02月09日
    浏览(48)
  • 在原生微信小程序中使用 echarts

    1.创建一个微信小程序项目或打开已有的微信小程序项目,下述示例采用全新创建的方式,在电脑文件中创建一个空的文件夹,命名自定义即可 2.将下载好的 echarts 文件放入创建好的空文件中 3.使用微信开发者工具打开创建的文件夹 4.查看创建结果 1.需要找到 app.wxss 文件中,

    2024年02月05日
    浏览(42)
  • 在uniapp,微信小程序中使用echarts

    一、使用npm或yarn安装mpvue-echars 二、可在echarts官网在线定制,下载echarts.min.js文件 ECharts 在线构建 三、在node_modules中找到mpvue-echarts,将src中的文件复制出来,作为组件,将第二步下载的echarts.min.js放进去  四、改写echarts.vue文件 这里我直接把我项目中的代码放上来了 五、引入

    2024年02月09日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包