当前位置：首页 > news >正文

uniapp+vue+uCharts开发常见问题汇总

news 2025/8/28 5:21:20

项目结构：uniapp + vue2 + uni-ui + uCharts

1、chunk-vendors.js:2765[Vue warn]: Invalid prop: custom validator check failed for prop "navigationBarTextStyle".

检索发现原因：在 pages.json 文件中，navigationBarTextStyle 属性被设置为 "#ffffff"，但根据 uni-app 的规范，该属性只接受 "black" 或 "white" 两个值。

2、<template>标签前有黄色波浪线，且提示：Failed to write the global types file. Make sure that:
1. "node_modules" directory exists.
2. "vue" is installed as a direct dependency.
Alternatively, you can manually set "vueCompilerOptions.globalTypesPath" in your "tsconfig.json".
If all dependencies are installed, try running the "vue.action.restartServer" command to restart Vue and TS servers.vue(404)

当前项目不支持ts

3、uCharts写法

npm安装ucharts，之后将node_modules/@qiun/uni-charts/components/u-charts文件夹下的config-charts.js和u-charts.js文件放到代码路径components中。

实现方法

<qiun-data-chartsref="chartRef"type="mix":chartData="data":ontouch="true":onzoom="true"inScrollView="true"canvas2dcanvasId="canvasId"@getIndex="showMyTooltip":opts="lineOptions"class="chart-content"
/>

type=mix是因为使用双坐标轴。

ontouch和onzoom是为了支持手指触摸方法的

lineOptions是图表的配置，配置字段和常规echarts有一些不同。

然后就开始了ucharts的踩坑记录啦！

4、ucharts实现图表后，鼠标放在折线图上不显示tooltip，点击图例lengend无反应。

解决方法：

（1）确认图表是否放在scroll-view滚动区域内，有则删除。

（2）确认添加ontouch和onzoom

（3）确认父级元素的样式是否有position定义，有则删除。

（4）确认父级元素是否使用uni-card，这个组件也不行，有的话用普通view实现。

（5）比较私人的一个因素，查看发现页面背景使用了backdrop-filter: blur(10px);删除就好了。

5、ucharts折线图的Y轴展示数字无法格式化。

注意ucharts的yAxis配置方法不一样，是写在data中的。

yAxis: {gridType: "dash", //横向网格样式  solid实线axisLine: false, //坐标轴线是否显示axisLineColor: "#767272", //坐标轴颜色gridColor: "rgba(86,94,107,0.1)", //网格颜色// dashLength: 3, //网格dash宽度showTitle: true,splitNumber: 5,data: [{//这里y轴分组   left是下标为0的第一组y数据在最左侧position: "left",axisLine: false, //坐标轴轴线是否显示axisLineColor: "#767272", //坐标轴轴线颜色fontColor: "#767272",fontSize: 10,titleFontSize: 10,disabled: false, //是否绘画y轴  true不 默认为falsetitle: '金额',titleOffsetY: -6,titleOffsetX: 0,formatter: function (value) {const formattedValue = value / 10000; // 转换为“万”return `${formattedValue.toFixed(0)}万`; // 保留两位小数并添加“万”单位},},{//这里y轴分组   right是下标为1的第二组y数据在最右侧position: "right",axisLine: false, //坐标轴轴线是否显示axisLineColor: "#767272", //坐标轴轴线颜色fontColor: "#767272",fontSize: 10,titleFontSize: 10,disabled: false, //是否绘画y轴  true不 默认为falsetitle: "指标",titleOffsetY: -6,titleOffsetX: 0,formatter: function (value) {console.log("Formatting y-axis value:", value); // 打印原始值const formattedValue = value / 10000; // 转换为“万”return `${formattedValue.toFixed(2)}万`; // 保留两位小数并添加“万”单位},},],},

上述formatter配置是不生效的。

需要将fomatter方法写在components/u-charts/config-ucharts.js文件中，然后在当前折线图配置中使用。