这款高颜值、兼容多平台的开源项目一定不能错过！！

程序员老鱼

发布于 2024-02-03 07:28:28

32200

代码可运行

文章被收录于专栏：前端实验室前端实验室

运行总次数：0

代码可运行

最近在使用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>