• 数据可视化——ucharts的使用

    目录

    1.引入 uCharts插件

    2.使用组件

    1.html 

    2.css

    3.js 

    4.处理渲染显示宽高问题

    3.修改默认渲染数据的内容

     1.修改柱状图上面渲染的内容

    2.修改点击展示的内容

     1.修改展示内容

    2.自定义展示内容

    4.自定义颜色

    5.修改其他设置查看官方文档

     官网地址：uCharts官网 - 秋云uCharts跨平台图表库

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

    我以微信小程序为例进行展示

    1.引入 uCharts插件

    https://gitee.com/uCharts/uCharts

    到gitee上面下载文件到本地然后在里面找到u-charts.js这个文件放到自己项目里面(放哪里都可以)

     

    在需要用到图表的js页面里面引入这个文件 

    引入的路径根据自己的位置来

    import uCharts from "../../utils/u-charts"

    2.使用组件

    1.html 

    <canvas canvas-id="column" id="column" class="charts" bindtouchend="tap" />

    2.css

    1. // 图表
    2. .charts {
    3.   display: flex;
    4.   justify-content: center;
    5.   align-items: center;
    6.   width: 100%;
    7.   min-height: 550rpx;
    8.   margin-top: 20rpx;
    9. }

    3.js 

    1.   // 1.定义回款柱状图数据
    2.     getData() {
    3.     //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    4.     // let res = {
    5.     // 柱状图分类名
    6.     //   categories: ["计算1部", "计算2部", "超算部门"],
    7.     // 柱状图内容，一个对象就是一条柱，里面的name就是这个柱子的名字，data是柱子的数据，只能是数字
    8.     //   series: [{
    9.     //       name: "总回款",
    10.     //       data: [100,200,300]
    11.     //     },
    12.     //     {
    13.     //       name: "已回款",
    14.     //       data:  [100,200,300]
    15.     //     },
    16.     //     {
    17.     //       name: "待回款",
    18.     //       data:  [100,200,300]
    19.     //     }
    20.     //   ]
    21.     // };
    22.  
    23.     // 提取数据修改成规定的数据格式
    24.     let title = [] // 部门名称
    25.     let sum = [] // 总回款
    26.     let already = [] // 已回款
    27.     let stay = [] // 待回款
    28.     // 循环数据提取到对应数组中
    29.     this.data.moneylist && this.data.moneylist.forEach(item => {
    30.       title.push(item.title)
    31.       sum.push(item.money)
    32.       already.push(item.return_money)
    33.       stay.push(item.get_money)
    34.     })
    35.     let res = {
    36.     // 这些数据都是数组形式可以直接赋值
    37.       categories: title,
    38.       series: [{
    39.           name: "总回款",
    40.           data: sum
    41.         },
    42.         {
    43.           name: "已回款",
    44.           data: already
    45.         },
    46.         {
    47.           name: "待回款",
    48.           data: stay
    49.         }
    50.       ]
    51.     };
    52.     // 调用生成柱状图方法，生成柱状图 这里的column是html页面上面绑定的canvas-id的值可自定义
    53.     this.setcolumn('column', res);
    54.   },
    55.  
    56.  
    57.   // 生成柱状图
    58.   setcolumn(id, data) {
    59.     const ctx = wx.createCanvasContext(id, this);
    60.     uChartsInstance[id] = new uCharts({
    61.       type: "column", //展示方式  柱状图
    62.       context: ctx, //指定给页面上对应id的标签上生成
    63.       width: 400, //生成的宽度 单位为px不可更改
    64.       height: 300, //生成的高度 单位为px不可更改
    65.       categories: data.categories, //生成图形下面的数据说明，就是上面定义的res里面的categories数据
    66.       series: data.series, //生成的图形数据，就是上面定义的res里面的series数据
    67.       animation: true, //是否加载生成动画
    68.       background: "#FFFFFF", //背景颜色
    69.       padding: [30, 0, 0, 0], //边距
    70.       fontSize: 10, //字体大小
    71.       animation:true,//是否加生成过渡效果
    72.       xAxis: {
    73.         disabled: false, //是否不显示x轴线 包括名称
    74.         disableGrid: true //是否不加中间分割线，
    75.       },
    76.       yAxis: {
    77.         disabled: false, //是否不显示y轴线刻度
    78.         disableGrid: false, //是否不显示刻度分割线
    79.         data: [{
    80.           min: 0 //数据开始显示的最小值
    81.         }]
    82.       },
    83.       extra: {
    84.         column: {
    85.           type: "group",
    86.           width: 30, //每条柱子的宽度
    87.           activeBgColor: "#000000", //选中背景颜色
    88.           activeBgOpacity: 0.1, //选中背景透明度
    89.           labelPosition: "", //设置柱子上面的数值位置
    90.         }
    91.       }
    92.     });
    93.   },
    94.   // 点击柱状图展示对应数据
    95.   tap(e) {
    96.     uChartsInstance[e.target.id].touchLegend(e);
    97.     uChartsInstance[e.target.id].showToolTip(e);
    98.   },

    4.处理渲染显示宽高问题

     原因：因为手机尺寸不同，需要兼容不同手机屏幕，需要根据手机尺寸计算不同的大小，主要是宽度在生成柱状图的时候赋值，因为这个属性不能直接设置100%这种自适应的值 

    获取手机尺寸，生成自适应宽高 

    1. Page({
    2.   data: {
    3.     // 柱状图的宽高
    4.     cWidth: 0,
    5.     cHeight: 270,
    6.     },
    7.   onShow() {
    8.     // 获取屏幕宽度设置自适应
    9.     let w = wx.getSystemInfoSync().windowWidth
    10.     let h = wx.getSystemInfoSync().windowHeight
    11.     // console.log("w", w, "h", h);
    12.     this.setData({
    13.       cWidth: w * 0.87,
    14.       })
    15.     }
    16. })

     在生成柱状图里面赋值给宽高使用

    1. width: this.data.cWidth, //自适应宽度
    2. height: this.data.cHeight, //自适应高度

    3.修改默认渲染数据的内容

     1.修改柱状图上面渲染的内容

    直接渲染数据不能渲染非数字的内容，使用formatter自定义内容

    1. let res = {
    2.       categories: title,
    3.       series: [{
    4.           name: "目标",
    5.           data: sum,
    6.         },
    7.         {
    8.           name: "已完成",
    9.           data: already,
    10.           // 使用formatter 循环already定义的值val就是原本展示的值，i就是对应下标
    11.           formatter: function (val, i) { //修改顶部展示内容
    12.             // 这里使用已完成除以目标计算出完成率进行展示，为什么不直接渲染完成率呢，因为哪里不能渲染非数字类型，因为有百分号，所以要在这里使用自定义的方式进行修改
    13.            return val + '|' + (val / sum[i]).toFixed(2) * 100 + '%'
    14.           }
    15.         },
    16.       ],

    2.修改点击展示的内容

    默认情况下，点击展示的是柱状图的柱子名称和数据 

     1.修改展示内容

    只能改变有的数据，只有两个柱子就最多只能展示二条

    1.     // 修改点击柱状图展示的数据
    2.     tap2(e) {
    3.     let num = 0 + "%"
    4.     uChartsInstance[e.target.id].touchLegend(e);
    5.     uChartsInstance[e.target.id].showToolTip(e, {
    6.       formatter: function (item, category, index, opts) {
    7.         // console.log("1", item);
    8.         // console.log("2", category);
    9.         // console.log("3", index);
    10.         // console.log("4", opts);
    11.         // 这里以展示完成率为需求
    12.         // 判断目标是否为0 为0表示没有设置，有就算出完成率
    13.         if (opts.series[0].data[index] != 0) {
    14.           num = (opts.series[1].data[index] / opts.series[0].data[index]) * 100 
    15.         } else {
    16.           num = "未设置目标"
    17.         }
    18.         // 修改已完成为完成率展示
    19.         if (item.name == "已完成") {
    20.           return "完成率" + '：' + num.toFixed() + '%'
    21.         }
    22.       },
    23.     });
    24.   },

    2.自定义展示内容

    自定义，没有修改限制，上面图片展示三个数据就是自定义的

    1.     // 修改点击柱状图展示的数据
    2.     tap2(e) {
    3.     // 定义自定义展示内容，这里设置显示三个
    4.     let arr = [{
    5.         text: "",// 内容
    6.         color: "#1890FF",// 字体颜色
    7.       },
    8.       {
    9.         text: "",
    10.         color: "#91CB74"
    11.       },
    12.       {
    13.         text: "",
    14.         color: "#fac858"
    15.       }
    16.     ]
    17.     let i = 0
    18.     let num = ""
    19.     uChartsInstance[e.target.id].touchLegend(e);
    20.     uChartsInstance[e.target.id].showToolTip(e, {
    21.       formatter: function (item, category, index, opts) {
    22.         // console.log("1", item);
    23.         // console.log("2", category);
    24.         // console.log("3", index);
    25.         // console.log("4", opts);
    26.         // 这里以展示完成率为需求
    27.         // 判断目标是否为0 为0表示没有设置，有就算出完成率
    28.         if (opts.series[0].data[index] != 0) {
    29.           num = (opts.series[1].data[index] / opts.series[0].data[index]) * 100 
    30.         } else {
    31.           num = "未设置目标"
    32.         }
    33.           arr[2].text = "完成率" + '：' + num.toFixed() + '%'
    34.           arr[i].text = item.name + '：' + opts.series[i].data[index]
    35.           i++
    36.           return item.name + '：' + item.data
    37.       },
    38.       textList: arr, //添加自定义显示内容
    39.     });
    40.   },

     

    4.自定义颜色

    图1：设置二端颜色进行渐变                                  图二：只设置一个颜色，自动由深到浅渐变

    1.         series: [{
    2.           name: "目标",
    3.           data: sum,
    4.           color: "#6453f1", //修改柱子颜色
    5.         },
    6.         {
    7.           name: "完成率",
    8.           data: already,
    9.           color: "#efe66c", //修改柱子颜色
    10.         },
    11.       ],

     在生成柱状图的extra属性里面设置颜色渐变 linearType: "custom" //开启渐变

    1.      extra: {
    2.         column: {
    3.           type: "group",
    4.           width: 30, //条柱宽度
    5.           seriesGap: 0, //条柱间距
    6.           activeBgColor: "#000000", //选中背景颜色
    7.           activeBgOpacity: 0.05, //选中背景透明度
    8.           labelPosition: "", //设置柱子上面的数值位置
    9.           linearType: "custom", //开启渐变
    10.           // 如果开启渐变不设置customColor属性就是由上面设置颜色的值由深变浅，第二个图就是
    11.           customColor: ["#288bf7", "#87d370"], //这里设置渐变颜色的上面部分，渐变颜色的底部颜色在series里面设置
    12.           colorStop: "0" //渐变比例
    13.         }
    14.       },

    5.修改其他设置查看官方文档

     uCharts官网 - 秋云uCharts跨平台图表库

  • 相关阅读:
    Vue3新增加的css语法糖
    Python文件操作指南：从基础到高级
    .Net中字符串不变性与相等判断的特殊场景
    ActiveMQ面试题(二)
    react 初体验
    vue 的常用事件
    async 和 await 原来这么简单
    阿里云的域名和ip绑定
    【云原生 | 从零开始学Kubernetes】二、使用kubeadm搭建K8S集群
    算法与数据结构-图
  • 原文地址：https://blog.csdn.net/weixin_70563937/article/details/133695951