作为Web开发人员,在做项目的时候,项目都有一些报表的需求。今天给大家推荐一个图表库,兼容IOS、Android、各个平台小程序等。
项目简介
这是一个一款基于canvas API开发的适用于所有前端应用的图表库。报表种类齐全、功能强大,集成简单。兼容uni-app、taro 、各个小程序原生平台,可根据项目需求选型。
技术架构
1、技术:canvas API、JavaScript、Css。
2、兼容平台:uni-app、taro 、微信小程序、支付宝小程序、京东小程序、字节小程序、快手小程序、百度小程序等平台。
项目结构
**报表类型
**
1、柱状图:基本柱状图、堆叠柱状图、圆角+渐变+半透明柱状图、温度计图表、圆角温度计图表、柱状图滚动条、全圆角柱状图+标记线
2、山峰图:圆角山峰图、尖角山峰图、三角山峰图、直角山峰图、山峰图无边渐变色、山峰图有边透明渐变+滚动条、山峰图有边渐变+标记线、山峰图圆角渐变色柱状图
3、条状图:堆叠条状图、圆角条状图+渐变色
4、折线图:基本折线图、基本曲线图、基本时序图、折线图+断点续连connectNulls、折线图滚动条、时间轴折线图
5、区域图:基本折线区域图、渐变色曲线区域图、渐变色时序区域图、时间轴(矢量轴)区域图
6、散点图:散点图
7、气泡图:气泡图
8、混合图:多坐标系混合图
9、饼状图:基本饼状图、带分割线+渐变色、自定义标签内容、自定义标签隐藏
10、环形图:基本环形图、分割线+渐变色、自定义标签内容、自定义标签隐藏
11、玫瑰图:面积玫瑰图、半径玫瑰图+分割线+渐变色、自定义标签内容、自定义标签隐藏
12、雷达图:多边形雷达图、圆形雷达图、刻度标签+网格抽稀、渐变色雷达图、
13、进度条:圆弧进度条+渐变色、多重整圆进度条、逆时针+圆弧进度条、逆时针+多重整圆进度条、圆角整圆进度条、平角整圆进度条
14、仪表盘:基本仪表盘、其他仪表盘
15、漏斗图:标准漏斗图、渐变色+自定义标签、倒三角形漏斗图、金字塔形漏斗图
16、词云图:词云图
17、K线图:K线图+双指缩放
18、地图:地图
19、交互演示:交互数据应用示例、交互数据、TooltipFormat格式化示例、tooltipCustom自定义示例
使用方式
1、原生方式
HTML部分
<template>
<view>
<canvas canvas-id="myid" id="myid" class="charts" @tap="tap"/>
</view></template>
JS部分
<script>
import uCharts from '../u-charts.js';
var uChartsInstance = { };
export default {
data() {
return {
cWidth: 750,
cHeight: 500
};
},
onReady() { //这里的 750 对应 css .charts 的 width
this.cWidth = uni.upx2px(750); //这里的 500 对应 css .charts 的 height
this.cHeight = uni.upx2px(500); 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.drawCharts('myid', res);
}, 500);
},
drawCharts(id,data){ const ctx = uni.createCanvasContext(id, this);
uChartsInstance[id] = new uCharts({type: "column", context: ctx, width: this.cWidth, height: this.cHeight, categories: data.categories, series: data.series, xAxis: {disableGrid: true
}, yAxis: {data: [ {min: 0 } ]
}, extra: {column: {type: "group"
}
}
});
},
tap(e){
uChartsInstance[e.target.id].touchLegend(e);
uChartsInstance[e.target.id].showToolTip(e);
}
}
};
</script>
CSS部分
<style scoped>
.charts{ width: 750rpx; height: 500rpx;
}
</style>
2、组件方式
HTML部分
<template>
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartData" />
</view>
</template>
JS部分
<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 scoped>
.charts-box { width: 100%; height: 300px;
}
</style>
报表效果截图
柱状图
山峰图
条状图
折线图
区域图
散点图
气泡图
混合图
饼状图
环形图
玫瑰图
项目地址: https://gitee.com/uCharts/uCharts
- End -
专注分享编程知识、热门有用有趣的开源项目