uniapp ucharts统计图的使用

已于 2023-12-03 21:42:04 修改
阅读量4.6k 收藏 36
点赞数 9
分类专栏： 学习记录 好记性不如难笔头 工作中遇到的问题 文章标签： uni-app
于 2023-01-05 15:20:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yc1425869600/article/details/128563979
版权

结尾有搬运文档的资料；官网上是要付费的，我直接搬运过来了
官网链接：https://www.ucharts.cn/v2/#/tool/index
效果：
image.png

image.png

image.png

image.png

实现步骤：
1.在插件市场下载插件，使用hbuilderx导入即可。https://ext.dcloud.net.cn/plugin?id=271
http://upload-images.jianshu.io/upload_images/13594383-d93b1e63cfe09071.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp
在这里插入图片描述

2.新建vue文件，无需引入。
源码：

<template>
    <view class="box">
        <view class="title">
            饼图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="pie" :chartData="pieData" />
        </view>
        <view class="title">
            玫瑰图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="rose" :chartData="pieData" />
        </view>
        <view class="title">
            环形图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="ring" :chartData="pieData" />
        </view>
        <view class="title">
            柱状图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="column" :chartData="chartData" :ontouch="true" />
        </view>
        <view class="title">
            折线图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="line" :chartData="chartData" :ontouch="true" />
        </view>
        <view class="title">
            区域图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="area" :chartData="chartData" />
        </view>
        
        <view class="title">
            散点图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="scatter" :chartData="chartData" />
        </view>
        <view class="title">
            词云图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="word"  background="#000" :chartData="wordData" />
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                chartData:{
                  categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2020", "2021"],
                  series: [{
                    name: "目标值",
                    data: [36, 31, 33, 13, 34, 40, 34, 40]
                  }, {
                    name: "完成量",
                    data: [27, 21, 24, 6, 26, 30, 28, 30]
                  }]
                },
                pieData: {
                    "series":[
                        {"name":"一班","data":50},
                        {"name":"二班","data":30},
                        {"name":"三班","data":20},
                        {"name":"四班","data":18},
                        {"name":"五班","data":8},
                    ],
                },
                wordData: {
                    "series":[
                        {"name":"跨全端图表","textSize":25},
                        {"name":"微信小程序","textSize":20},
                        {"name":"支付宝小程序","textSize":20},
                        {"name":"百度小程序","textSize":20},
                        {"name":"QQ小程序","textSize":20},
                        {"name":"头条小程序","textSize":20},
                        {"name":"抖音小程序","textSize":20},
                        {"name":"360小程序","textSize":20},
                        {"name":"跨全端","textSize":10},
                        {"name":"跨全端","textSize":12},
                        {"name":"跨全端","textSize":10},
                        {"name":"跨全端","textSize":12},
                        {"name":"跨全端","textSize":10},
                        {"name":"跨全端","textSize":12},
                        {"name":"跨全端","textSize":10},
                        {"name":"跨全端","textSize":12},
                    ],
                }
            }
        },
        methods: {
            
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        padding: 30rpx;
        .title {
            font-size: 32rpx;
            font-weight: bold;
        }
        .charts-box{
          width: 100%;
          height:300px;
        }
    }
</style>

具体配置的修改在config-ucharts.js
image.png

官网文档：

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

<script>
export default {
  data() {
    return {
      chartData: {},
      //这里的 opts 是图表类型 type="column" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['column'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        timing: "easeOut",
        duration: 1000,
        rotate: false,
        rotateLock: false,
        color: ["#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc","#ea7ccc"],
        padding: [15,15,0,5],
        fontSize: 13,
        fontColor: "#666666",
        dataLabel: false,
        dataPointShape: true,
        dataPointShapeType: "solid",
        touchMoveLimit: 60,
        enableScroll: false,
        enableMarkLine: false,
        legend: {
          show: false,
          position: "bottom",
          float: "center",
          padding: 5,
          margin: 5,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 0,
          fontSize: 13,
          fontColor: "#666666",
          lineHeight: 11,
          hiddenColor: "#CECECE",
          itemGap: 10
        },
        xAxis: {
          disableGrid: true,
          disabled: false,
          axisLine: true,
          axisLineColor: "#CCCCCC",
          calibration: false,
          fontColor: "#666666",
          fontSize: 13,
          lineHeight: 20,
          marginTop: 0,
          rotateLabel: false,
          rotateAngle: 45,
          itemCount: 5,
          boundaryGap: "center",
          splitNumber: 5,
          gridColor: "#CCCCCC",
          gridType: "solid",
          dashLength: 4,
          gridEval: 1,
          scrollShow: false,
          scrollAlign: "left",
          scrollColor: "#A6A6A6",
          scrollBackgroundColor: "#EFEBEF",
          title: "",
          titleFontSize: 13,
          titleOffsetY: 0,
          titleOffsetX: 0,
          titleFontColor: "#666666",
          format: ""
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ],
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridType: "solid",
          dashLength: 8,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: false
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            seriesGap: 2,
            categoryGap: 3,
            barBorderCircle: false,
            linearType: "none",
            linearOpacity: 1,
            colorStop: 0,
            meterBorder: 1,
            meterFillColor: "#FFFFFF",
            labelPosition: "outside"
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: "#000000",
            borderOpacity: 0.7,
            bgColor: "#000000",
            bgOpacity: 0.7,
            gridType: "solid",
            dashLength: 4,
            gridColor: "#CCCCCC",
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: "#FFFFFF",
            legendShow: true,
            legendShape: "auto",
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: "#FFFFFF",
            labelBgOpacity: 0.7,
            labelFontColor: "#666666"
          },
          markLine: {
            type: "solid",
            dashLength: 4,
            data: []
          }
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2018","2019","2020","2021","2022","2023"],
            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>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用场景及处理方法：
1、在这里插入图片描述
解决方法：

   yAxis: {
                gridType: "dash",
                dashLength: 2,
                data: [{
                    min: 0,
                    max: 100
                }]  //设置固定最大最小值
            },

区域图

组件props
在这里插入图片描述
在这里插入图片描述

基本配置 opts.
在这里插入图片描述

X轴配置 opts.xAxis.
在这里插入图片描述

Y轴配置 opts.yAxis.
在这里插入图片描述

图例配置 opts.legend.
在这里插入图片描述

扩展配置 opts.extra.
在这里插入图片描述

提示窗配置 opts.extra.tooltip.
在这里插入图片描述

组件事件
在这里插入图片描述

chartData.series数据属性
在这里插入图片描述
在这里插入图片描述

uniapp饼图和叠堆统计图
前端视听
05-26 3825
uniapp饼图和叠堆统计图，示例代码如下所示 <template> <view class=" bg-white" style=''> <view class="cu-card case bg-white" > <view class="qiun-charts3"> <!-- <canvas canvas-id="canvasArcbar3" id="canvasArcbar3" class="charts3"
uniapp ucharts统计图表
qq_58558773的博客
02-24 2378
ucharts图表的下载地址：uCharts高性能跨全端图表https://www.ucharts.cn/ 浏览案例地址：秋云uCharts图表组件https://demo.ucharts.cn/#/用于hbuilderx编程器；先下载然后用hbuilderx打开之后运行用谷歌打开就可以选择自己要用的饼状图、折线图等，选好之后就可以去hbuilderx里面看代码然后图表的数据自己根据接口赋值就行 以下是我写的案例 这就是没有数据时的界面效果，这不比啥也没有美观嘛 <template.
uniapp_统计图_uCharts.zip
01-05
uniapp_统计图_uCharts.zip
uniapp 微信小程序 使用ucharts
最新发布
weixin_44185995的博客
04-02 611
【代码】uniapp 微信小程序 使用ucharts。
uni-app学习笔记-实现一个简单统计图（三）
祈澈菇凉
12-07 3007
根据原型需要，先来写一个统计图，其实和vue实现一个统计图的方法是一样的。axios请求Echarts折线图 https://www.jianshu.com/p/9f872bee0e6a 1：在HBuilderX里面 下载一个内置的终端插件，或者直接使用cmd命令 2：打开终端，在项目里面安装折线图 cnpm install echarts --s ...
在uniapp 中使用Ucharts 进行可视化图表开发，折线统计图。
weixin_51614564的博客
02-23 3682
首先我们得 在uniapp 插件市场中找到Ucharts 这款插件，我这里是使用uni_modules导入这款插件。Js逻辑的代码如下，也是相关的配置图标配置的代码如下：同时我们可以按照官方文档进行参考。我们这时可以在页面中使用组件的方式进行使用。chartData：图表相关的数据存储。legend : 图例配置。opts : 图形基本配置。详细属性代码属性下面的配置。xAxis: X轴配置。yAxis：Y 轴配置。
uniapp 使用秋云uCharts图表组件、echarts图表组件
热门推荐
我的博客
09-16 3万+
uniapp 使用秋云uCharts图表组件、echarts图表组件
uniapp使用uCharts绘制ring图
ybyshezhang的博客
09-14 1417
<template> <view class="qiun-charts"> <canvas canvas-id="canvasRing" id="canvasRing" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','m
uniapp - 微信小程序 - 使用uCharts的一些问题
weixin_44167504的博客
04-07 2154
一、开发者工具显示正常，真机调试统计图不随页面滚动 二、数据过多开启滚动条，无法滑动滚动条 三、饼图点击不显示提示窗/点击位置bug、多个同类型统计图点击不显示提示框问题 四、 formatter 自定义
uniapp通过ucharts实现图表的显示
m0_74289031的博客
05-13 625
在做项目时避免不了要完成数据的分析及数据的可视化，uniapp可以使用ucharts和echarts来实现数据的可视化，今天，我们就来学习一下用ucharts来实现图表。作者声明：由于本人才疏学浅，本文可能会出现错误，望诸位海涵。我们现在先用本地数据实现图表（以饼图为例）同理，柱状图以及折线图可以根据此来完成。这样可以通过request请求获取数据。折线图以及柱状图也是相同用法。如有侵权，请联系作者删除。
echarts uniapp 如何使用echarts做统计图
weixin_59638880的博客
03-22 2132
uniapp如何使用echarts
uni-app echarts所有示例
11-30
uni-app echarts所有示例,每个示例均可运行
uview uniapp数据展示图表统计源码.zip
12-09
数据展示，图表查看，统计结果展示页面，用HBuilder X直接打开直接可用
使用uniapp绘制一个折线图（uCharts）
苦夏木禾
01-29 1万+
uCharts简介，这是官方介绍，上面有全部的示例，我这篇只是取一部分实现的 需要引入u-charts.js，这个文件的代码我放在最后面，当然也可以官方Gitee下载 效果图 代码： <template> <view> <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchmove="moveLineA" @touchend="moveLineA"></canvas>
uni-app使用echarts图表进行数据可视化展示
weixin_48373171的博客
03-31 4433
uni-app使用echarts
uni-app中统计图可使用的插件
竹哎
04-08 322
uni-app中统计图可使用的插件（适用APP） 暂时推荐使用 秋云 ucharts echarts 高性能跨全端图表组件 网址 https://ext.dcloud.net.cn/plugin?id=271
uniapp使用uChart图表插件
love_yourself_ok的博客
03-21 373
【代码】uniapp使用uChart图表插件。
uniapp引用ECharts实现图表功能
kepler星球的博客
07-29 1827
uniapp引用ECharts实现图表功能
uni-app 使用uCharts-进行图表展示（折线图带单位）
路虽远行则将至，事虽难做则必成。
09-08 5833
在uni-app经常是需要进行数据展示，针对这个情况也是有人开发好了第三方包，来兼容不同平台展示uCharts和pc端的Echarts使用差不多，甚至会感觉在uni-app使用uCharts更轻便，更舒服但是这个第三方包有优点就会有缺点，还会有坑的地方下面我会一一讲解。
uniapp 统计图
01-07
### 实现 UniApp 统计图表功能 #### 使用 uCharts 图表组件 uCharts 是一款专为 uni-app 设计的高性能跨平台图表组件，适用于 H5 和 APP 开发[^1]。该组件提供了丰富的图表类型，如柱状图、折线图、饼图等，并且易于集成到 uni-app 项目中。 为了在一个页面上显示多个 uCharts 图表，在创建每个图表实例时需确保其 `canvasId` 属性唯一[^2]。以下是配置多图表的具体方法： ```javascript // pages/multiChartPage/multiChartPage.js import uCharts from '@/components/u-charts/u-charts.js'; export default { data() { return { canvasObj: {} }; }, methods: { initCharts(canvasId, chartData) { this.canvasObj[canvasId] = new uCharts({ $this: this, canvasId: canvasId, type: 'line', // 可替换为你想要使用的其他类型的图表 fontSize: 11, legend: {}, background: '#FFFFFF', pixelRatio: 1, categories: ['Mon', 'Tue', 'Wed'], series: [ { name: "Series A", data: [35, 80, 45], } ], animation: true, width: 750 * (window.screen.width / 375), height: 500, extra: { lineStyle: 'straight' } }); } }, onReady() { const lineChartData = { /* ... */ }; const barChartData = { /* ... */ }; this.initCharts('chart-line-id', lineChartData); this.initCharts('chart-bar-id', barChartData); } } ``` 对于希望尝试更多高级特性的开发者来说，还可以考虑 Highcharts 这样的第三方 JavaScript 库来增强应用中的数据可视化能力[^4]。不过需要注意的是，Highcharts 并不是专门为 uni-app 打造的产品，因此可能需要额外的工作来进行适配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值