uniapp对接ucharts图表

本文介绍了在H5页面使用uni-app对接ucharts图表的项目场景和详细步骤,包括从官网获取资源、插件导入、代码实现(HTML、JS、CSS)以及两种自定义图表的方法:通过组件文档配置和直接修改配置文件。
摘要由CSDN通过智能技术生成

项目场景:

在这里插入图片描述

在H5页面中插入ucharts图表


使用步骤

准备工作:
uCharts官网地址:https://www.ucharts.cn/
uni-app插件市场uCharts高性能跨全端图表 https://ext.dcloud.net.cn/plugin?id=271

1.导入/下载插件(我是直接导入的)
在这里插入图片描述
使用的话有两种方式,原生方式和组件方式(具体请看官方文档)
2.代码部分

HTML部分

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

js部分

<script>
export default {
   
  data() {
   
    return {
   
      chartData: {
   },
    };
  },
  onReady() {
   
    this.getServerData();
  },
  methods: {
   
    getServerData() {
   
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
   
        let res = {
   
            "categories": ["4.3","4.4","4.5","4.6","4.7","4.8"],
		    "series": [{
   
				"name": "最低值",
		            "data": [92.5,91.8,92.3,93,90.7,93
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值