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 2175
ucharts图表的下载地址：uCharts高性能跨全端图表https://www.ucharts.cn/ 浏览案例地址：秋云uCharts图表组件https://demo.ucharts.cn/#/用于hbuilderx编程器；先下载然后用hbuilderx打开之后运行用谷歌打开就可以选择自己要用的饼状图、折线图等，选好之后就可以去hbuilderx里面看代码然后图表的数据自己根据接口赋值就行 以下是我写的案例 这就是没有数据时的界面效果，这不比啥也没有美观嘛 <template.
echarts uniapp 如何使用echarts做统计图
weixin_59638880的博客
03-22 2039
uniapp如何使用echarts
uniapp引用ECharts实现图表功能
kepler星球的博客
07-29 1707
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 616
在很多城市、镇子里面、超市里的水果蔬菜之类的农产品都昂贵非常的让人恐惧，而在农村了很多东西都烂在树上、拦在土地里、堆在家里都卖不出去，而你又需要某些东西却不知道到哪里去找，可能只能亲自或找人代去才能买到不然的话就要花大价钱被小贩当肥羊仔宰，还不一定能找到所需要的，同时还有可能受不同能量在空寂的空间流动的限制。在另一是事物的相同方面，农产品网站所提供的更加方便、更加简单的农产品的咨询查找；（2）农产品管理：农产品搜索；（1）用户管理：查看用户列表；（3）订单管理：查看订单；（5）公告管理：查看公告列表；
uniapp_统计图_uCharts.zip
01-05
uniapp_统计图_uCharts.zip
uniapp 使用秋云uCharts图表组件、echarts图表组件
热门推荐
我的博客
09-16 2万+
uniapp 使用秋云uCharts图表组件、echarts图表组件
uniapp中uCharts的使用
hu104160112的博客
11-20 9017
先看效果 注意前提条件【版本要求：HBuilderX 3.1.0+】 1、插件市场点击右侧绿色按钮【使用HBuilderX导入插件】，或者【使用HBuilderX导入示例项目】查看完整示例工程 2、依赖uniapp的vue-cli项目：请将uni-modules目录复制到src目录，即src/uni_modules。（请升级uniapp依赖为最新版本） 3、页面中直接按下面用法直接调用即可，无需在页面中注册组件qiun-data-charts 4、注意父元素class='charts-box’这个样式需要
数据可视化——ucharts的使用(自定义修改文字，颜色，自适应屏幕宽度)
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
10-11 1万+
直接渲染数据不能渲染非数字的内容，使用formatter自定义内容。自定义，没有修改限制，上面图片展示三个数据就是自定义的。默认情况下，点击展示的是柱状图的柱子名称和数据。只能改变有的数据，只有两个柱子就最多只能展示二条。在需要用到图表的js页面里面引入这个文件。1.修改柱状图上面渲染的内容。我以微信小程序为例进行展示。引入的路径根据自己的位置来。修改默认渲染数据的内容。2.修改点击展示的内容。
【uniapp】使用图表
Qxn530的博客
10-14 6729
图表的使用以及遇到的问题
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...
在uniapp 中使用Ucharts 进行可视化图表开发，折线统计图。
weixin_51614564的博客
02-23 3165
首先我们得 在uniapp 插件市场中找到Ucharts 这款插件，我这里是使用uni_modules导入这款插件。Js逻辑的代码如下，也是相关的配置图标配置的代码如下：同时我们可以按照官方文档进行参考。我们这时可以在页面中使用组件的方式进行使用。chartData：图表相关的数据存储。legend : 图例配置。opts : 图形基本配置。详细属性代码属性下面的配置。xAxis: X轴配置。yAxis：Y 轴配置。
uniapp之 对ucharts图表的使用
HQ\(^o^)/的博客
12-09 4608
因项目的需求，需要在小程序uniapp 的项目中渲染一个折线图，因此在搜索图表的时候发现了ucharts这个插件，最开始以为很简单，谁知道，这个组件却困扰我好几天。
uni app中使用图表
qq_46784478的博客
03-05 8585
uni app,ucharts,echarts
uni-app中使用echarts教程
shi450561200的博客
04-06 2万+
一、下载echart方法一：从下载的源代码或编译产物安装方法二：从 npm 安装方法三：选择需要的模块，在线定制下载即echarts.min.js 下载二、引入。
在uni-app中使用ECharts - 配置四种不同的图表
杜永康的博客
10-31 9168
在uni-app中集成ECharts可以为我们的应用提供强大的图表功能。我们详细说一下如何在uni-app中使用ECharts，并配置四种不同的图表。在uniapp中使用echarts的好处：数据可视化：ECharts提供了丰富的图表类型和交互功能，可以将数据以直观、可视化的方式展示出来。在uniapp项目中，通过使用ECharts可以轻松创建各种图表，如折线图、柱状图、饼图等，帮助用户更好地理解和分析数据。
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、付费专栏及课程。

余额充值