uniapp ucharts统计图的使用

已于 2023-12-03 21:42:04 修改
阅读量3.8k 收藏 27
点赞数 7
分类专栏： 学习记录 好记性不如难笔头 工作中遇到的问题 文章标签： uni-app
于 2023-01-05 15:20:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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数据属性
在这里插入图片描述
在这里插入图片描述

CV大师杨某
关注
  • 7
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp ucharts统计图表
qq_58558773的博客
02-24 2173
ucharts图表的下载地址：uCharts高性能跨全端图表https://www.ucharts.cn/ 浏览案例地址：秋云uCharts图表组件https://demo.ucharts.cn/#/用于hbuilderx编程器；先下载然后用hbuilderx打开之后运行用谷歌打开就可以选择自己要用的饼状图、折线图等，选好之后就可以去hbuilderx里面看代码然后图表的数据自己根据接口赋值就行 以下是我写的案例 这就是没有数据时的界面效果，这不比啥也没有美观嘛 <template.
uniapp_统计图_uCharts.zip
01-05
【标题】"uniapp_统计图_uCharts"指的是在uni-app框架下使用uCharts库创建统计图表的应用示例。uni-app是一个多端开发框架，它允许开发者使用一套代码，跨平台构建iOS、Android、H5、小程序等多个平台的应用。...
uniapp引用ECharts实现图表功能
kepler星球的博客
07-29 1705
uniapp引用ECharts实现图表功能
uni canvas百分比统计图
晴天有何特别
03-02 552
<template> //我删除了部分代码只留了关键代码 <view class="list" v-for="(item,index) in list" :key="index"> <canvas class="canvas" :canvas-id="item.canvas"></canvas> </view> </...
毕业设计uniapp+vue有机农产品商城系统 销售统计图 微信小程序
专注分享bishe530的博客
05-05 615
在很多城市、镇子里面、超市里的水果蔬菜之类的农产品都昂贵非常的让人恐惧，而在农村了很多东西都烂在树上、拦在土地里、堆在家里都卖不出去，而你又需要某些东西却不知道到哪里去找，可能只能亲自或找人代去才能买到不然的话就要花大价钱被小贩当肥羊仔宰，还不一定能找到所需要的，同时还有可能受不同能量在空寂的空间流动的限制。在另一是事物的相同方面，农产品网站所提供的更加方便、更加简单的农产品的咨询查找；（2）农产品管理：农产品搜索；（1）用户管理：查看用户列表；（3）订单管理：查看订单；（5）公告管理：查看公告列表；
Uniapp中引入Ucharts统计表的使用
m0_50832030的博客
04-22 1294
效果： 实现步骤： 1.在插件市场下载插件，使用hbuilderx导入即可。https://ext.dcloud.net.cn/plugin?id=271 2.新建vue文件，无需引入。 源码： <template> <view class="box"> <view class="title"> 饼图 </view> <view clas...
uniapp uCharts的使用方法(含bug总结)
最新发布
wwf1225的博客
06-27 226
下拉框是固定在顶部的，当下面的图表向上滑动时，需求是文字和图表被下拉框隐藏，在微信开发者工具中调试是正常的，在真机调试的时候文字内容会默认隐藏掉，但canvas图表会遮盖下拉框，主要是canvas层级过高的原因导致的。查看代码发现，在组件挂载时已经获取了按钮1下的接口数据(每个按钮下会展示数据列表)，在切换按钮时，并对按钮2和按钮3都发起了请求，所以在切换按钮2和按钮3时又触发重绘。备注：在延时器内一定要转换this，涉及到this指向问题，我刚开始没转，花了很长时间才找到问题，切记！
uniapp:如何使用uCharts
qq_45796592的博客
12-04 1903
uniapp:如何使用uCharts
uniapp使用ucharts基本折线
小小天下飞的博客
12-16 2002
这个是插件主页 https://ext.dcloud.net.cn/plugin?id=271 导入项目之后，项目就会出现uni_modules目录 在这里可以生成代码 https://demo.ucharts.cn/ 代码 <template> <view class="qiun-columns"> <view class="qiun-charts" > <canvas canvas-id="canvasLineA" id="canvasLineA"
uni-app使用ucharts地图(主要微信小程序-初步使用)
三季雨
03-07 6553
uniapp 使用ucharts
android自定义环形统计图动画
01-03
本文实例为大家分享了android自定义环形统计图动画的具体代码，供大家参考，具体内容如下 一、测试截图 二、实现原理  package com.freedomanlib; import java.util.Timer; import java.util.TimerTask; import ...
Android环形统计图 自定义控件
06-08
Android环形统计图 既能展示百分比，又能展示描述文字，且从环上拉出一条线出去进行展示，并且有颜色区分； int[] data = {100,20,9,71}; String[] text = {"红色","黄色","蓝色","绿色"}; String[] colors = {"#ff...
java实现各种数据统计图
05-05
本篇文章将深入探讨如何使用JFreeChart来实现这些数据统计图。 首先，我们来了解一下JFreeChart库。JFreeChart是Java的一个图形库，它支持多种类型的图表，包括条形图（柱形图）、饼图、线图、散点图、面积图等。它...
jQuery圆形统计图开发实例
01-19
这里我们要给大家介绍一款圆形统计图circliful，它基于HTML5的画布和jQuery，无需使用图像轻松实现圆形统计图，而且有很多属性设置，使用起来非常方便。效果图如下： 首先我们需要将jquery库文件和jquery.circliful...
wx.getFuzzyLocation遇到的几个问题
热门推荐
yc1425869600的博客
07-19 1万+
wx.getFuzzyLocation遇到的几个问题
如何使用小乌龟拉取git仓库项目
yc1425869600的博客
10-28 8585
为了这群孩子，出一期如何用汉化小乌龟无脑操作git仓库，远程管理代码 下载git 首先下载git到本地，下载地址：https://git-scm.com/downloads（这是下载git的地址），下载之后进行安装，安装简单，一直next下一步、下一步、下一步…即可 下载小乌龟 下载好git之后，我们下载小乌龟，下载地址：https://tortoisesvn.net/downloads.zh.html，然后进行安装，注意：安装下一步之后，选择第二个选项为openssh，之后一直下一步即可 在桌
uniapp 打包生成EXE文件
yc1425869600的博客
02-26 5788
*uniapp及vue 打包electron生成EXE文件，并讲解给.exe新增头部菜单
解决vue项目运行出现warnings potentially fixable with the `--fix` option.的报错问题
yc1425869600的博客
12-29 5598
warnings potentially fixable with the `--fix` option.解决
uniapp多数据环形统计图
07-27
在UniApp中使用多数据环形统计图可以借助ECharts来实现。下面是一个示例代码，演示如何使用ECharts库绘制多数据环形统计图： 1. 安装ECharts库： 在项目根目录下的命令行中执行以下命令安装ECharts库： ``` npm install echarts --save ``` 2. 在页面中引入ECharts库： 在需要使用多数据环形统计图的页面中，引入ECharts库。可以在 `script` 标签中引入： ```javascript import * as echarts from 'echarts'; ``` 3. 创建一个容器来放置图表： 在页面中创建一个容器元素，用于放置多数据环形统计图。例如，在 `template` 标签中添加一个 `div` 元素，设置一个唯一的 `id` 作为容器的标识符： ```html <template> <div id="chartContainer" style="width: 100%; height: 400px;"></div> </template> ``` 4. 在页面的 `mounted` 生命周期钩子函数中，初始化并绘制图表： 在页面的 `mounted` 生命周期钩子函数中，使用 `echarts.init` 方法初始化图表，并使用相应的配置绘制图表。以下是一个简单示例： ```javascript export default { mounted() { const chartContainer = document.getElementById('chartContainer'); const myChart = echarts.init(chartContainer); // 设置图表的配置项和数据 const option = { series: [ { type: 'pie', data: [ { value: 335, name: '数据1' }, { value: 310, name: '数据2' }, { value: 234, name: '数据3' }, { value: 135, name: '数据4' }, { value: 1548, name: '数据5' }, ], }, ], }; // 使用配置项绘制图表 myChart.setOption(option); }, }; ``` 以上示例代码演示了如何在UniApp中使用ECharts库绘制一个简单的多数据环形统计图。你可以根据自己的需求修改配置项和数据来实现更复杂的图表效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值