最近在使用uniapp开发小程序,所以经常翻看Dcloud插件市场,发现了一款超高颜值、兼容多平台的开源组件——图鸟图表
图鸟图表
是基于uni-app进行开发的UI框架,提供丰富的组件进行快速开发,已经支持H5、微信小程序和APP,包含常用表单组件、信息展示组件等,并提供丰富的酷炫页面模板。
图鸟图表是 图鸟UI & uCharts 联合开发的前端图表,支持微信小程序、APP和H5。该组件支持多种图表样式
uni-app安装:
uni_modules 版本:通过 uni-app 插件市场 uCharts 发布页面点击使用 HBuilderX 导入插件按钮导入到您的项目中
npm安装:
npm i @qiun/ucharts
安装成功后即可使用 import 或 require 进行引用。
<template>
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartData" />
</view>
</template>
<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>
<style scoped>
.charts-box {
width: 100%;
height: 300px;
}
</style>
还可以在官网演示菜单的各个 demo 下的查看代码来查看具体写法: