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
效果图:
大概最常见的问题就这些,如果有什么不懂的可以评论区问我✌