目录
[第一章 前言](#第一章 前言)
[第二章 安装插件uCharts](#第二章 安装插件uCharts)
[第三章 使用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
- 我们根据官网走就行
- 导入成功后,我们直接使用就好
html
<template>
<view>
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartData" />
</view>
</view>
</template>
javascript
<script>
export 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>
css
<style lang="scss">
.charts-box {
width: 100%;
height: 1200rpx;
}
</style>
- 效果图
- 说明我们使用没有问题
- 具体使用,我们可以根据demo形成初稿,然后再修改细节。
第四章 注意
如果项目中出现如下问题,先到官网查看是否包括,然后再自行研究