uCharts是一款基于canvas API开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等更多支持 canvas API 的平台。
用uCharts写了一个折线图
1.下载uCharts
npm i @qiun/ucharts
2.在需要图表的页面引入uCharts
import uCharts from '@/common/u-charts.js'
var uChartsInstance = {};
3.因为我需要的是一个可滚动的折线图，所以在写的时候，会用scroll-view去包裹
<view class="chart_cons">
<scroll-view scroll-x="true" class="scroll">
<view class="uni-scroll-view">
<view class="scorll_cons">
<view class="charts-box">
<canvas canvas-id="charts_order" id="charts_order" class="charts_order" :disable-scroll="false" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
</view>
</view>
</view>
</scroll-view>
</view>
4.我们需要在请求数据之后把数据修改成我们所需要的数据
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
//这是uCharts需要的数据格式
let res = {
categories: ["2016","2017","2018","2019","2020","2021"],
series: [
{
name: "成交量A",
data: [35,8,25,37,4,20]
},
{
name: "成交量B",
data: [70,40,65,100,44,68]
},
{
name: "成交量C",
data: [100,80,95,150,112,132]
}
]
};
//data数据
data(){
return{
chartsOptions:{
type: "line", //图表类型
context: null,//canvas上下文
width: 0, //图表宽度
height: 0, //高度
categories: null, //x轴刻度数据
series: null, //折线数据
animation: true, //初始化动画
background: "#313131", //全局背景色
color: ["#d9b06d", "#F7C91D"], //线条颜色 暂不支持渐变色
padding: [20, 0, 32, 12], //画布填充边距，顺序为上右下左，
enableScroll: true, //是否开启滚动
dataLabel: false, //是否显示图表区域内数据点上方的数据文案
legend: { //## 图例配置
show: false // 不显示
},
xAxis: {
disableGrid: true, //不绘制纵向网格(即默认绘制网格)
scrollShow: true, //是否显示滚动条，配合拖拽滚动使用
itemCount: 3.5, //单屏数据密度即图表可视区域内显示的X轴数据点数量，仅在启用enableScroll时有效
scrollColor: "#313131", //滚动条颜色
scrollBackgroundColor: "#313131", //滚动条底部背景颜色
axisLineColor: '#3F3F40', //坐标轴轴线颜色
fontColor: '#6F6F6F' //数据点（刻度点）字体颜色
},
yAxis: { //## 多Y轴配置 opts.yAxis.data[i] 用来解决y轴轴线不显示
gridType: 'solid', //横向向网格线型，可选值：'solid'实线,'dash'虚线
gridColor: '#3F3F40', //横向网格颜色
data: [{
axisLine: false, //坐标轴轴线是否显示（数据还能显示）
fontColor: '#6F6F6F',
calibration: true, //刻度线是否显示
min: 0, //当前Y轴起始值（默认数据中的最小值）
max: 0 //当前Y轴终止值（默认数据中的最大值）
}]
},
extra: {
line: {
type: 'curve',//折线图类型，可选值："straight"尖角折线模式,"curve"曲线圆滑模式,"step"时序图模式
width: 3
},
tooltip: { // ## 提示窗配置 opts.extra.tooltip.
gridColor: '#FFFFFF',
gridType: 'dash', //分割线线型
dashLength: 3
},
},
}
}
},
onReady() {
//这里的 750 对应 css .charts 的 width
this.chartsOptions.width = uni.upx2px(654);
//这里的 500 对应 css .charts 的 height
this.chartsOptions.height = uni.upx2px(500);
},
async getUchartsData() {
let res = await this.UchartsData()
this.originChartData = [
{
order_num:1,
order_sum:0.00,
create_time:2022-04-23 00
},
{
order_num:21,
order_sum:0.02,
create_time:2022-04-23 01
},
{
order_num:21,
order_sum:0.02,
create_time:2022-04-23 01
},
{
order_num:21,
order_sum:0.02,
create_time:2022-04-23 01
},
{
order_num:21,
order_sum:0.02,
create_time:2022-04-23 01
}
] // 后端返回的数据
//我们需要处理一下数据，使数据变成我们想要的样子，我这个数据是因为只是展示一个订单数量和金额并不复杂
this.getChartData()
},
getChartData(){
let datas = [];
let orderNum = []
for (let i in this.originChartData) {
let times = this.originChartData[i].create_time
datas = datas.concat(times);
orderNum = orderNum.concat(this.originChartData[i].order_num);
}
//uCharts的Y轴刻度默认是5条，当我们的数据没有超过5和都是0的时候就会出现问题
//数据大于0等于2 就会出现 0 0 1 1 2 2的问题，都是0就会出现000000的问题而且线条不展示，所以我们需要去动态配置一下Y轴的最大最小值
var max = Math.max.apply(null, orderNum);
var min = Math.min.apply(null, orderNum);
if (max % 5 == 0) {
this.chartsOptions.yAxis.data[0].max = max
} else {
this.chartsOptions.yAxis.data[0].max = max + (5 - max % 5)
}
if (min == 0) {
this.chartsOptions.yAxis.data[0].min = min
} else {
if (min % 5 == 0) {
this.chartsOptions.yAxis.data[0].min = min
} else {
this.chartsOptions.yAxis.data[0].min = min - min % 5
}
}
this.chartsOptions.categories = datas
this.chartsOptions.series = [{
name: '订单数',
data: orderNum
}]
this.drawCharts('charts_order')
},
drawCharts(id) {
const ctx = uni.createCanvasContext(id, this);
this.chartsOptions.context = ctx
uChartsInstance[id] = new uCharts(this.chartsOptions)
}
这样一个折现图就配置好了
