以前pc端我们做图表展示,大屏展示会用到echarts,uniapp也有它的配套的比较好用的插件uCharts。
使用时如果使用hbuilder可以直接导入使用,我没有用hbuilder,需要从仓库上下载代码,拷贝到自己项目中。
一、gitee.com/uCharts/uCh…这是插件仓库地址,登录后下载压缩包,里边有我们引用的组件和官方示例。
按上边目录找到这个文件夹,然后把下边几个文件夹拷贝到自己项目components目录下。
同时把这几个文件夹(static里边的)放到自己项目static目录下。
完了之后有个文件里引用路劲需要改下,这个文件里搜一下components,有6处
这个路劲根据自己项目配的别名填写就可以。
二、完了之后在项目中就可以正常引入使用了。
三部曲(也可以注册为全局组件)
1、引入 import qiunDataCharts from '@components/qiun-data-charts/qiun-data-charts.vue'
2、注册 components: {qiunDataCharts}
3、使用 <qiun-data-charts :canvas2d="true" type="line" :opts="opts" :chartData="chartData" />
这里具体代码从文档上复制就可以,现成的。www.ucharts.cn/v2/#/demo/i…
个别图像需要个性化配置的可以查看官方配置文档
三、有两个需要注意的点:
1、运行在小程序时,在模拟器上展示正常,运行到手机上时图像就飘了,尝试设置定位啥的都不好使。这里需要开启2d模式。
<qiun-data-charts _:canvas2d="true"_ type="line" :opts="opts" :chartData="chartData" />
开启以后手机上显示正常了,但是模拟器上又乱了,很坑。只能模拟器调试时候关闭2d,手机上运行时候打开2d 了
2、官网上给出了自定义坐标轴的方法 format
尝试后发现小程序上并没有生效,后来查看之前下载的压缩文件发现它给出的demo里有使用到自定义坐标轴。
配置项中
引用配置项中定义的函数(可以改成自己想要的处理)修改成功。