1.uCharts

简介
高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图。

uCharts—gitee
uCharts—官网

效果展示

uCharts图表

2.uCharts使用以及相关的配置

1.快速上手

快速上手

2.相关配置

在线生成工具

修改一些默认的内容

<qiun-data-charts id="echart" type="arcbar" :opts="options" :chartData="chartData" style="width: 180rpx;height: 180rpx" />

 export default {data() {return {options: {"title": {"name": "","fontSize": 25,"color": "#00FF00"},"subtitle": {"name": "","fontSize": 15,"color": "#666666"},fontSize: 10,extra: {arcbar: {type: 'circle',width: 4,startAngle: 1.5,endAngle: 1.5}}}   }}}

上面的数字样式定位在圆弧图表会产生一个问题：在手机和真机测试的时候，canvas会穿透，canvas会在最顶层，将需要定位在canvas上的内容使用cover-view进行包裹

cover-view

当横坐标的文字过长，将文字进行倾斜

 options: {xAxis: {rotateLabel: true,axisLabel: {  interval:0,  rotate:30  }  }}

很多配置直接在在线生成工具的左侧配置中勾选，右侧会有对应的效果，可自行查看对应的效果

uCharts图表在小程序中的使用相关推荐

在微信小程序中绘制图表（part2）
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part3) 关注我的 github 项目查看完整代码. 确 ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...
微信小程序中绘制图表（AntV F2 的使用）
1.安装小程序F2组件 npm i @antv/f2-canvas 2.安装好相关依赖包之后,使用微信开发者工具运行项目,点击开发者工具顶部详情,勾选使用npm模块,再点击菜单栏中工具下的构建npm ...
如何在微信小程序中使用ECharts图表
在微信小程序中使用ECharts 1. 下载插件首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目. 下载链接:ecomfe/echarts-for-weixi ...
支付宝小程序中使用F2图表
支付宝小程序中使用F2图表介绍最近在支付宝小程序开发中接到显示图表的需求,因为支付宝小程序方未提供相关插件,并且目前支付宝小程序不支持document,所以根据推荐使用f2-canvas图表组件. ...
小程序多个echars_微信小程序中使用echarts以及踩坑总结
人在家中坐,锅从天上来. 半个月前本来在家写着一个项目,还没来得及提测,领导突然一个电话,需要立刻去支援另一个项目,一打听,一个烂尾半年的项目,纵使内心不愿意,还是要去啊.因为鲁迅说过,生活就像强*, ...
微信小程序中使用ECharts--折线图、柱状图、饼图等
微信小程序开发者的反馈,表示他们强烈需要像 ECharts 这样的可视化工具.但是微信小程序是不支持 DOM 操作的,Canvas 接口也和浏览器不尽相同. 因此,ECharts 团队和微信小程序官方 ...
微信小程序中使用Echarts（折线图）
一.微信中使用 Echars 直接在官网小程序使用Echarts中(文档-教程-在微信中使用Echarts),找到GitHub上的DEMO下载链接,官网有详细的使用步骤官网:http://echar ...
Canvas 动画引擎解析与微信小程序中的应用
点击观看大咖分享抗击疫情,腾讯云在行动.在开发微信小程序的过程中,我们经常需要展现一些图形和图表.目前市面上有好几款常用的图形库,在这些图形库的底层都有渲染引擎在支撑. ZRender 是其中一款非 ...

uCharts图表在小程序中的使用

1.uCharts

效果展示

2.uCharts使用以及相关的配置

1.快速上手

2.相关配置

当横坐标的文字过长，将文字进行倾斜

uCharts图表在小程序中的使用相关推荐

最新文章

热门文章