uniapp ucharts统计图的使用

结尾有搬运文档的资料;官网上是要付费的,我直接搬运过来了
官网链接: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数据属性
在这里插入图片描述
在这里插入图片描述

  • 7
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值