目录
uCharts简介
uCharts
是一款基于canvas API
开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web、iOS、Android(基于 uni-app / taro )、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东/360)、快应用等更多支持 canvas API 的平台
uniapp使用
原生 uCharts 您只需获取 u-charts.js 或 u-charts.min.js 单个文件,在页面中引用这个 js 即可开始使用,您可通过以下方式获得 uCharts:
git clone
把基础库文件放入项目
柱状图组件
<!-- import uCharts from '@/utils/u-charts.js'; -->
<template>
<view>
<canvas canvas-id="uvCaEJCYWTckEanlkQiJOrPEevYpMnRq" id="uvCaEJCYWTckEanlkQiJOrPEevYpMnRq" class="charts" @touchend="tap"/>
</view>
</template>
<script>
import uCharts from '@/utils/u-charts.js';
var uChartsInstance = {};
export default {
data() {
return {
cWidth: 680,
cHeight: 420
};
},
onReady() {
// 对应 css .charts 的 width
this.cWidth = uni.upx2px(680);
// 对应 css .charts 的 height
this.cHeight = uni.upx2px(420);
this.getServerData();
},
methods: {
getServerData() {
//模拟从服务器获取数据时的延时
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
let res = {
categories: ["2016","2017","2018","2019","2020","2021"],
series: [
{
name: "营业收入",
data: [300,900,600,200,400,100]
}
]
};
this.drawCharts('uvCaEJCYWTckEanlkQiJOrPEevYpMnRq', res);
},
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,
animation: true,
background: "#FFFFFF",
// 主题颜色,16进制颜色格式
color: ["#1EB064","##A6DD57",],
padding: [15,15,0,5],
// 图标配置 是否显示图例标识
legend: {
show:false
},
xAxis: {
disableGrid: true
},
yAxis: {
data: [
{
min: 0
}
]
},
extra: {
column: {
type: "stack",
width: 30,
activeBgColor: "#000000",
activeBgOpacity: 0.08
}
}
});
},
tap(e){
uChartsInstance[e.target.id].touchLegend(e);
uChartsInstance[e.target.id].showToolTip(e);
}
}
};
</script>
<style scoped>
.charts{
width: 680rpx;
height: 420rpx;
}
</style>
导入 注册使用
import echarts from '@/pages/index/components/echarts'
components: {
echarts,
},
<echarts></echarts>