前言：

uCharts全新图表组件，全端全平台支持，开箱即用，可选择uCharts引擎全端渲染，也可指定PC端或APP端单独使用ECharts引擎渲染图表。支持极简单的调用方式，只需指定图表类型及传入符合标准的图表数据即可，使开发者只需专注业务及数据。同时也支持datacom组件读取uniClinetDB，无需关心如何拼接数据等不必要的重复工作，大大缩短开发时间。
致开发者

特别感谢开发者：秋云

项目场景：

使用：

大家使用uniapp都会用到插件市场，uCharts图表组件也是在uniapp的插件市场可以找到uCharts

直接把插件调入到HbuilderX

基本用法
template代码：

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

标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型）

chartData:{categories: ["2016", "2017", "2018", "2019", "2020", "2021"],series: [{name: "目标值",data: [35, 36, 31, 33, 13, 34]}, {name: "完成量",data: [18, 27, 21, 24, 6, 28]}]
}

标准数据格式2：（饼图、圆环图、漏斗图等不需要categories的图表类型）

chartData:{series: [{data: [{name: "一班",value: 50}, {name: "二班",value: 30}, {name: "三班",value: 20}, {name: "四班",value: 18}, {name: "五班",value: 8}]}]
}

开发者还提供了在线生成表格的文档
在线生成工具

生成的代码复制即可

酸狗今天的分享就到这里，希望有所帮助。See you！~

uni-app项目使用uCharts高性能跨全端图表组件相关推荐

【ucharts】uniapp -- 使用秋云 ucharts echarts高性能跨全端图表组件
uCharts简介 uCharts是一款基于canvas API开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web.iOS.Android(基于 uni-app / taro ). ...
uni-app如何导入秋云 ucharts echarts 高性能跨全端图表组件
感性认识想在 uni-app 中使用 ucharts 官方提供了两种方法: uni_modules版本非 uni_modules版本何为 uni_modules?请看官方文档 uni_modul ...
uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件
uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件首先下载地址如下秋云 ucharts echarts 高性能跨全端图表组件,如果是用uni_mo ...
高性能跨全端图表组件--uCharts
安装注意前提条件[版本要求:HBuilderX 3.3.8+] 使用HBuilderX导入插件:https://ext.dcloud.net.cn/plugin?id=271 导入成功后项目会多一个 ...
uni app 调用网络打印机_uni-app 的使用体验总结
[实践] uni-app 的使用总结最近使用 uni-app 的感受. 使用体验没用之前以为真和 Vue 一样,用了之后才知道.有点类似 Vue 和小程序结合的感觉.写类似小程序的标签,有着小程 ...
uniapp 使用秋云uCharts图表组件、echarts图表组件
一.uniapp 使用秋云uCharts图表组件 1.我们的项目是依赖uniapp的vue-cli项目操作:将uni_modules目录复制到src目录,即src/uni_modules. 2.页面 ...
魔坊APP项目-17-种植园，商城页面、服务端提供商品api，解决App打包编译以后的跨域限制、客户端获取商品列表并进行展示，集成Alipayplus模块完成支付
种植园一.商城页面 orchard.html,代码: <!DOCTYPE html> <html> <head><title>用户中心</tit ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
ucharts跨端图表使用
ucharts跨端图表使用 1.使用Hbuilderx导入插件 2.页面引入 3.基本使用(柱状图示例) 4.API参数 5.图表点击交互事件 5.1.@touchstart 监听点击 5.2.tou ...

uni-app项目使用uCharts高性能跨全端图表组件

前言：

项目场景：

使用：

uni-app项目使用uCharts高性能跨全端图表组件相关推荐

最新文章

热门文章