unchart 一个跨平台的图表组件，两种使用方式

国际惯例，官网简介

uCharts是一款基于canvas API开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等更多支持 canvas API 的平台。

uni-app 插件市场地址

官网地址

使用

uCharts要求传入特定格式的数据，包括x轴和y轴数据等。使用过echart之类的图表，应该并不陌生。

uCharts使用有两种方式，原生和组件，分别来介绍一下。

原生方式

安装

npm i @qiun/ucharts --save

引入

import uCharts from '@qiun/ucharts'

使用

具体使用，参照官网例子，一步步来。

打包成小程序，也可以。

demo代码

使用起来和echart差不多，同样是在canvas画布上绘制。需要配置项opts和数据源。

点击详情，查看完整代码。

<template>
  <view>
    <canvas canvas-id="myid" id="myid" class="charts" />
  </view>
</template>
<script>
import uCharts from "@qiun/ucharts";
var uChartsInstance = {};
export default {
  data() {
    return {
      cWidth: 750,
      cHeight: 500,
    };
  },
  // 在 onReady生命周期中，进行图表操作。onReady生命周期中，页面加载完成
  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 = {
          series: [
            {
              data: [
                { name: "一班", value: 82 },
                { name: "二班", value: -63 },
                { name: "三班", value: 86 },
                { name: "四班", value: -75 },
                { name: "五班", value: 79 },
              ],
            },
          ],
        };
        this.drawCharts("myid", res);
      }, 500);
    },
    drawCharts(id, data) {
      const ctx = uni.createCanvasContext(id, this);
      let opts = {
        // 图表类型，可选值为pie, line, column, area, ring, radar, gauge
        type: "mount",
        // 画布容器
        context: ctx,
        // 宽度
        width: this.cWidth,
        // 高度
        height: this.cHeight,
        // 数据源
        series: data.series,
        // 下面都是配置项
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          data: [
            {
              min: -100,
              max: 100,
            },
          ],
          splitNumber: 4,
        },
        extra: {
          mount: {
            type: "mount",
            widthRatio: 1.5,
            borderWidth: 0,
            linearType: "custom",
          },
        },
      };
      // 实例化图表
      uChartsInstance[id] = new uCharts(opts);
    },
  },
};
</script>
<style scoped>
.charts {
  width: 750rpx;
  height: 500rpx;
}
</style>

组件方式

官网tips：

相比原生 uCharts 我们更推荐使用组件方式来绘制图表，

组件方式使您只需专注数据与业务，

大大提高了页面的可读性以及避开了一些平台容易出问题的地方。

组件代码，我直接在 uCharts的Gitee地址 上找的。

因为，我是用 cli脚手架搭建的 uni-app 项目，没有使用 xhbuilder

所以，我选择的 qiun-data-charts(非uniCloud) 文件夹

组件都在 components 文件夹下面

安装说明

1、请将static目录下文件复制到根目录的static文件夹下

2、qiun-title-bar文件夹可删除

3、其他的都不要动，直接原样复制到您项目中的components目录

接下来，打开 ucharts官网的演示demo 点击查看代码，复制代码。

H5环境下，正常显示。

小程序，微信开发工具，也能正常显示。

demo代码

点击详情，查看完整代码。

<template>
  <view class="charts-box">
    <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
  </view>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [15, 10, 0, 15],
        dataLabel: false,
        dataPointShape: false,
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          data: [
            {
              min: 0,
              max: 150,
            },
          ],
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
            linearType: "custom",
            onShadow: true,
            animation: "horizontal",
          },
        },
      },
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
          series: [
            {
              name: "成交量A",
              linearColor: [
                [0, "#1890FF"],
                [0.25, "#00B5FF"],
                [0.5, "#00D1ED"],
                [0.75, "#00E6BB"],
                [1, "#90F489"],
              ],
              setShadow: [3, 8, 10, "#1890FF"],
              data: [15, 45, 15, 45, 15, 45],
            },
            {
              name: "成交量B",
              data: [55, 85, 55, 85, 55, 85],
            },
            {
              name: "成交量C",
              linearColor: [
                [0, "#FAC858"],
                [0.33, "#FFC371"],
                [0.66, "#FFC2B2"],
                [1, "#FA7D8D"],
              ],
              setShadow: [3, 8, 10, "#FC8452"],
              data: [95, 125, 95, 125, 95, 125],
            },
          ],
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  },
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}
</style>

最后的话

以上，如果对你有用的话，不妨点赞收藏关注一下，谢谢 🙏

😊 微信公众号: OrzR3

💖 不定期更新一些技术类，生活类，读书类的文章。