UNIAPP微信小程序使用Echarts

这篇具有很好参考价值的文章主要介绍了UNIAPP微信小程序使用Echarts。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

UNIAPP微信小程序使用Echarts

1. 前言

​ 最近要在uniapp做的小程序中使用echarts,网上搜了很多教程都很麻烦,这里提供一种简便快捷CV方案。

​ 先说下图表选型的问题,如果你只用于微信小程序,可以使用本方案,Echarts丰富多样的图表和广大的开源图库都已使用。如果要考虑兼容性问题,比如兼容支付宝小程序、APP、百度小程序……这里推荐使用uchart。缺点就是图表样式没有Echarts丰富。

2. 下载EchartsForWx插件

需要首先确保本机安装了Hbuilder

  1. 打开插件市场的**echarts-for-wx**插件。点击使用Hbuilder导入插件。

UNIAPP微信小程序使用Echarts

  1. 导入插件后,在项目目录会有一个js_sdk的文件夹生成。复制js_sdk下的uni-ec-canvas到根目录的components目录。

3. 自定义Echarts组件

​ 在根目录的components文件夹下此时已经有了一个uni-ec-canvas的组件。我们这里新建一个pieChart的组件。

​ 组件内容如下

<template>
	<view>
		<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
		</uni-ec-canvas>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		props: {
			abnormal: {
				type: Number,
				// 定义是否必须传
				required: true,
				// 定义默认值
				default: 0
			},
			absence: {
				type: Number,
				// 定义是否必须传
				required: true,
				// 定义默认值
				default: 0
			},
		},
		data() {
			return {
				ec: {
					//是否懒加载
					lazyLoad: true
				},
			}
		},
		methods: {
			initChart(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				var data=[{value:this.abnormal, name:'正常',"itemStyle":{"normal":{"color":"#00CCB8"}}},
					{value:this.absence, name:'异常',"itemStyle":{"normal":{"color":"#FFCB96"}}}];
				var dataName = data.reduce((per,cur,i)=>{per[i]=cur.name;return per},[]);
				var a=0;
				for(var i=0; i<data.length; i++)
				{
					a+=data[i].value;
				}
				data.push({value:a, name:'__other', itemStyle:{normal:{color:'rgba(0,0,0,0)'}}});
				let option = {
					legend: {
						orient: "horizontal",//图例的布局,水平布局、垂直布局
						icon:'circle',
						bottom:50,
						textStyle: {//图例字体样式
							color: "#00CCB8",
							fontSize: 15,
							fontFamily: "微软雅黑"
						},
						data:dataName,
						formatter: e =>{
							let val=0;
							data.forEach(el => {
								if(e == el.name) val = el.value
							});
							return `${e}${val}天`
						}
					},
					series : [
						{
							name: '上下班统计',
							type: 'pie',
							startAngle:-180,
							radius : '95%',
							center: ['50%', '60%'],
							data:data,
							itemStyle: {
								borderRadius:0,
								borderColor:'#fff',
								borderWidth:5
							},

							label: {
								normal: {
									show: false,
								},
							},
							labelLine: {
								normal: {
									show: false
								}
							},
						}
					]
				};
				chart.setOption(option)
				return chart
			},
		},
		mounted() {
			this.$refs.canvas.init(this.initChart)
		}
	}
</script>
<style>
	.uni-ec-canvas {
		width: 100%;
		height: 500rpx;
		display: block;
		margin-top: 30rpx;
	}
</style>

4. 使用组件

<template>
	<view>
		<pie-chart :abnormal="abnormal" :absence="absence"></pie-chart>
	</view>
</template>

<script>
	import pieChart from '@/components/pieChart/index'
	let chart = null
	export default {
		components: {
			pieChart
		},
		data() {
			return {
				abnormal:10,
				absence:19,
			}
		},
	}
</script>

5. 效果图

UNIAPP微信小程序使用Echarts文章来源地址https://www.toymoban.com/news/detail-485984.html

6. Echarts各式各样的定制化图表

  1. Made A Pie https://madeapie.com 复刻Make A Pie
  2. Echarts社区makeapie https://www.makeapie.cn/echarts 复刻Make A Pie
  3. MCChart http://echarts.zhangmuchen.top/#/index
  4. PPChart http://ppchart.com/
  5. ISQQW https://www.isqqw.com/homepage
  6. chartsdev http://chartsdev.com/ 复刻Make A Pie

到了这里,关于UNIAPP微信小程序使用Echarts的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【uniapp】微信小程序迁移至uniapp以及echarts图表

    需要对微信小程序开发和uniapp开发都有了解 目标: 微信小程序原生开发转为uni-app开发 微信小程序云开发转为uniCloud阿里云开发,涉及云数据库和云存储的迁移 迁移后依然发行至微信小程序 借助 miniprogram-to-uniapp 工具,源项目同级目录下会生成后缀为 _uni 的uniapp项目 微信云

    2024年02月09日
    浏览(55)
  • uniapp/微信小程序解决echarts层次问题

    1.由于原生的canvas组件高于其他组件 2.这样设置z-index没有用 3.大部门解决办法是将echarts转化成图片 看了微信小程序官方文档,官方提供了一种cover-view标签来覆盖canvas、video等层级过高问题   所以本次使用cover-view来解决层级问题一下 以下是代码实现: cover-view class=\\\"customerb

    2024年02月09日
    浏览(40)
  • uniapp echarts 适配H5与微信小程序

    接上文:uniapp 微信小程序使用echarts,这篇文章目的为使用uniapp时提供一个同时兼容H5和小程序的echarts组件,在使用时尽量减少心智负担。 首先修改uniapp 微信小程序使用echarts中的 ec-canvas 组件,将initChart方法置于该组件内部,而不是存在于业务组件中。 1.1 在 ec-canvas 组件m

    2024年02月06日
    浏览(44)
  • uniapp微信小程序接入echarts(踩坑无数)

    因为本次小程序开发使用到了echarts 发现接入有点麻烦,记录一下 使用了uniapp插件市场的 echarts-for-wx插件 导入到自己的项目会多出以下文件夹,真正有用的是红框内的三个文件,可以将其移入到components下,具体哪个页面/组件使用了就引入 这里我是把uni-ec-canvas移入到compone

    2024年02月12日
    浏览(45)
  • uniapp 微信小程序 echarts地图 点击显示类目

    效果如图: 在tooltip内axisPointer内添加 label:{show:true} 即可显示“请求离婚”的标题

    2024年02月13日
    浏览(48)
  • 【uniapp】中 微信小程序实现echarts图表组件的封装

     插件地址:echarts-for-uniapp - DCloud 插件市场 图例: 一、uniapp 安装   二、文件夹操作 将 node_modules 下的 uniapp-echarts 文件夹复制到 components 文件夹下  当前不操作此步骤的话,运行 - 运行到小程序模拟器 - 微信开发者工具 时,echarts图表显示不出来 原因:运行到小程序打包过

    2024年02月12日
    浏览(46)
  • uniapp微信小程序+echarts简单图表以及与后端交互

    效果图:   需要的两个主要文件就是  echarts.min.js   和  echarts.vue  1、 echarts.min.js 可以去官网定制 链接   ECharts 在线构建   或者直接去GitHub - Tawesome666/echarts: echarts 下载 (注意:我这个只有柱状图和折线图) 2、 echarts.vue  可以使用 Visual Studio Code  打开你的文件夹使用命

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

    前期准备 : 1.echarts提供了一个微信小程序原生组件,下载地址:ecomfe/echarts-for-weixin ,拿到 ec-canvas 文件夹 2. 到 echarts官网 在线定制组件包 注意:版本一定要和 ec-canvas 相同 3.将下载的 echarts.min.js 替换掉原本的 echarts.js ,小程序文件过大影响发布 4.引入 ec-canvas.json ec-canvas

    2023年04月23日
    浏览(50)
  • 微信小程序中使用echarts方法

    echarts是一个基于JS的数据可视化图标库,它提供了直观,生动,可交互,可个性定制的数据可视化图表。一般在vue中会使用到,并且官网也详细的说明了如何在vue中使用,但是今天我想来探讨的是,如何在 微信小程序中使用echarts : 1. ec-canvas的github仓库 官网中介绍到:echa

    2024年02月15日
    浏览(52)
  • 微信小程序使用ECharts----折线图

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

    2024年04月15日
    浏览(65)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包