高端的的网站建设公司,青岛网站建设服务器,关键词seo优化排名,宁波网络营销推广开发中心目录
第一章 前言
第二章 安装插件uCharts
第三章 使用uCharts
第四章 注意 第一章 前言
需求#xff1a;这是很久之前的一个项目的需求了#xff0c;当时我刚接触app#xff0c;有这么一个需求#xff0c;在uniapp写的app项目中做一些图表统计#xff0c;最开始以为…目录
第一章 前言
第二章 安装插件uCharts
第三章 使用uCharts
第四章 注意 第一章 前言
需求这是很久之前的一个项目的需求了当时我刚接触app有这么一个需求在uniapp写的app项目中做一些图表统计最开始以为用echarts就能解决用着用着发现有一个这么一个插件它兼容性更高因此就尝试了一个新的工具但是弄了一天才完全弄好于是就想着要留下这个使用的记录方便以后使用。查看兼容性echarts 查看uCharts官网原话——uCharts是一款基于canvas API开发的适用于所有前端应用的图表库开发者编写一套代码可运行到 Web、iOS、Android基于 uni-app / taro 、以及各种小程序微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东/360、快应用等更多支持 canvas API 的平台。 uchart官网 uCharts官网 - 秋云uCharts跨平台图表库 第二章 安装插件uCharts
找到插件安装 安装新插件 -前往插件市场安装 搜索找到我们要的uChart 下载并导入导入自己的项目中 选择即可 导入成功 第三章 使用uCharts 我们根据官网走就行 导入成功后我们直接使用就好
templateviewview classcharts-boxqiun-data-charts typecolumn :chartDatachartData //view/view
/template
scriptexport default {data() {return {chartData: {},};},onReady() {this.getServerData();},methods:{getServerData() {//模拟从服务器获取数据时的延时setTimeout(() {let res {categories: [2016,2017,2018,2019,2020,2021],series: [{name: 目标值,data: [35,36,31,33,13,34]},{name: 完成量,data: [18,27,21,24,6,28]}]};this.chartData JSON.parse(JSON.stringify(res));}, 500);},}}
/script style langscss
.charts-box {width: 100%;height: 1200rpx;
}
/style 效果图 说明我们使用没有问题具体使用我们可以根据demo形成初稿然后再修改细节。 第四章 注意 如果项目中出现如下问题先到官网查看是否包括然后再自行研究
