ucharts最详细教程(含踩坑记录)

ucharts介绍

uCharts是一款基于canvas API开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东/360）、快应用等更多支持 canvas API 的平台。

• 这是一款为uniapp而生的图表可视化库
• 上手简单、易用、示例丰富、省时间
  官网: https://www.ucharts.cn/v2/#/

使用

• 由于本人正在开发uniapp应用涉及到了图表，便查阅到该图表库，觉得很易用便分享给大家

官方文档:https://www.ucharts.cn/v2/#/document/index
由于示例丰富，除非涉及到细节的东西可以查阅文档进行配置
查看官网的示例，根据示例去复制代码即可

使用官方代码之前记得引入ucharts.
这里推荐使用它的组件方式(简单易用)
使用hbuildx导入插件即可,地址:https://ext.dcloud.net.cn/plugin?id=271

这里我演示一下条形图如何使用吧

首先保证引入了ucharts插件
然后上官网条形图复制它的代码

template中:

<view class="charts-box">
		    <qiun-data-charts 
		      type="bar"
		      :opts="opts"
		      :chartData="chartData"
			  tooltipFormat="ypjcBar"
		    />
		  </view>

js中

<script>
	export default {
		data() {
			return {
				 chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			  opts: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [15,30,0,5],
				legend: {
					"position":"top",
					"float":"left",
				},
				xAxis: {
				  boundaryGap: "justify",
				  disableGrid: false,
				  min: 0,
				  axisLine: false,
				  max: 70
				},
				yAxis: {},
				extra: {
				  bar: {
					type: "stack",
					width: 30,
					meterBorde: 1,
					meterFillColor: "#FFFFFF",
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
					categoryGap: 2
				  }
				}
			  },
		},
		computed: {},
		mounted() {
			this.getServerData();//渲染图表
		},
		methods: {
			//图表渲染
			getServerData() {
			  //模拟从服务器获取数据时的延时
			  setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ["加工业","种植业","畜牧业"],
					series: [
					  {
						name: "合格样品",
						data: [35,36,31]
					  },
					  {
						name: "不合格样品",
						data: [18,27,21]
					  },
					  {
						name: "待检测样品",
						data: [18,27,21]
					  },
					]
				  };
				  console.log(res)
				this.chartData = JSON.parse(JSON.stringify(res));
				
			  }, 1000);
			},
			
		}

	}
</script>

css中

主要是设置图表大小

.charts-box {
	    width: 100%;
	    height: 300px;
	  }

这样即可实现一个图表~
对于图表中的配置可自行查看文档
由于项目要求，需要自行实现一些修改

实现自定义tooltip以及文本换行

这个是使用ucharts最容易遇到的问题，需要修改它的文件
找到config-ucharts,js文件
在formatter中自定义tooltip显示内容

可以看到我上方使用了tooltipFormat="ypjcBar"
这个属性是用于自定义tooltip的
这里给的值是ypjcBar，所以需要在里边编写该函数

这里主要是实现一个百分比计算显示在提示框上，至于我为何循环遍历，可自行打印函数中各个参数的值，通过匹对你会发现如何计算得到你想要实现的功能！！！

//样品检测中的条形图
	"ypjcBar":function(item,category,index,opts){
		let sum=0;
		for(let i=0;i<opts.series.length;i++){
				sum+=opts.series[i].data[index]
		}
		return `${item.name}  ${item.data}   ${Number((item.data/sum)*100).toFixed(2)}% `
	},

这里献上截图方便你们知道编写代码的位置

这样我们就已经实现了自定义提示框了，效果图如下:

这里只是将百分比放在每项的后边，如果需要单独放一行呢，此时此刻就需要换行了，而ucharts不支持\n等实现换行，这时候又遇到一个需要深究的问题，这里分享给大家解决办法

提示框上文本换行

这里我另一个表用到了文本换行…
写法与上方一致，只是修改了tooltipFormat="rykhBar"即可
然后在config-ucharts,js文件中编写该函数

//人员考核中的条形图
	"rykhBar":function(item,category,index,opts){
		let sum=0;
		let areaName='';
		for(let i=0;i<opts.series.length;i++){
				sum+=opts.series[i].data[index]
		}
		return areaName+sum+`${item.name}  ${item.data}分`
	},

这样就导致内容在一行了。。。。

而我们要实现的效果是地区与总分单独显示一行
现在我们只需要加个判断，由于知道每项有个固定值所以判断写死

"rykhBar":function(item,category,index,opts){
		let sum=0;
		let areaName='';
		for(let i=0;i<opts.series.length;i++){
				sum+=opts.series[i].data[index]
		}
		if(item.name=='监管数据量平均分'){
			sum=`总分平均分${sum}分  /`
			areaName=`${opts.categories[index]}:`;
		}else{
			sum=''
			areaName=''
		}
		return areaName+sum+`${item.name}  ${item.data}分`
	},

这样只显示在第一项前面了，还是没有达到换行效果，这里你是不是很好奇为什么加个/，方便后边截取换行~

这是判断后的效果图，现在去实现换行
找到u-charts.js文件
由于知道第一行的内容有总分平均分的字，所以判断写死并且通过/去截取
找到drawToolTip函数，在里边加个判断

if(textList[0].text.split("/")[0].indexOf("总分平均分")!==-1){
			let newTextList={
				"text":textList[0].text.split("/")[0]
			}
			textList[0].text=textList[0].text.split("/")[1]
			textList.push(newTextList)
			textList=textList.reverse();//数组反转
	  }

• 然后通过截取将需要放在第一行的内容push到textList中，这样导致会在最后
• 再通过reverse实现数组反转~
• 这样就实现了o

效果图:

大概最常见的问题就这些,如果有什么不懂的可以评论区问我✌