微信小程序使用 uCharts 图表

前端图表的插件库有很多

echarts 跟 uCharts …

echarts 更适合应用于后台管理系统或者pc 端

当小程序使用echarts 并且引用echarts 他会提示一段话然后报错

小程序“文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理，手机端使用过大的js库影响性能。”问题处理

所以我就换了uCharts

现在记录一下自己的uCharts 在小程序中使用

uCharts链接 https://www.ucharts.cn
下载uCharts https://gitee.com/uCharts/uCharts

找到微信小程序

复制 js 文件

在小程序components 文件夹下面建立 u-charts文件夹把你刚刚复制的js文件粘贴进来

页面使用

  <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" bindtouchstart="touchColumn"></canvas>

那个文件需要就在那个文件的js 中引用

import uCharts from '../../components/u-charts/u-charts.min'

import uCharts from '../../components/u-charts/u-charts.min'
var _self;
var canvaColumn = null;
Page({/*** 页面的初始数据*/data: {cWidth: '',cHeight: '',},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {_self=this;this.cWidth = wx.getSystemInfoSync().windowWidth;this.cHeight = 500 / 750 * wx.getSystemInfoSync().windowWidth;this.getServerData()},//   这里 先暂时 应用 ucharts 里面提供的数据 调取他们的接口 getServerData: function () {wx.request({url: 'https://www.ucharts.cn/data.json',data: {},success: function (res) {let Column = { categories: [], series: [] };Column.categories = res.data.data.ColumnB.categories;Column.series = res.data.data.ColumnB.series;//自定义标签颜色和字体大小Column.series[1].textColor = 'red';Column.series[1].textSize = 11;_self.showColumn("canvasColumn", Column);},fail: () => {console.log("请点击右上角【详情】，启用不校验合法域名");},})},showColumn(canvasId, chartData) {canvaColumn = new uCharts({$this: _self,canvasId: canvasId,type: 'line',legend: true,fontSize: 11,background: '#FFFFFF',pixelRatio: 1,animation: true,categories: chartData.categories,series: chartData.series,xAxis: {disableGrid: true,},yAxis: {  //disabled:true},dataLabel: true,width: _self.cWidth ,height: _self.cHeight ,extra: {column: {type: 'group',width: _self.cWidth * 0.45 / chartData.categories.length}}});}
})

css 也一定要写上不然图表出不来

/**index.wxss**/
.qiun-charts {width: 750rpx;height: 500rpx;background-color: #FFFFFF;
}
.charts {width: 750rpx;height: 500rpx;background-color: #FFFFFF;
}

练习的时候需要把这个打上勾

然后图标展示出来了

微信小程序使用 uCharts 图表相关推荐

在微信小程序中绘制图表（part2）
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part3) 关注我的 github 项目查看完整代码. 确 ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...
微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大引入echarts组件展示echarts图表数据延迟加载图表如何解决echarts文件过大引入echarts组件 ...
微信小程序中绘制图表（AntV F2 的使用）
1.安装小程序F2组件 npm i @antv/f2-canvas 2.安装好相关依赖包之后,使用微信开发者工具运行项目,点击开发者工具顶部详情,勾选使用npm模块,再点击菜单栏中工具下的构建npm ...
微信小程序引入echarts图表（保姆式）
在开发微信小程序时,有需求需要使用到柱状图,饼图等图表,但是echarts官网没有小程序版,不过已经有人在github发布echarts的小程序版本了,感谢大佬的分享. 首先,下载echarts微信版 ...
微信小程序使用echarts图表（ec-canvas）
本文微信小程序开发所使用技术:taro+vue+less taro:v3.3.14 vue:v2.6.14 若使用ec-canvas加载图表时报错如下图: 解决方法①: 将echarts.js源码中的 ...
微信小程序使用Echarts图表组件，动态加载数据，图表模糊处理
1:下载 GitHub 上的项目 https://github.com/ecomfe/echarts-for-weixin 2:项目下载之后,打开小程序开发工具,可以看到效果如下 3:如果是在项目里面 ...
uniapp(微信小程序)使用ucharts环状图文字重叠
环状图文字折叠文档里未找到设置最小角度的方法 offsetAngle Number 0 起始角度偏移度数,顺时针方向,起点为3点钟位置为0度(比如要设置起点为12点钟位置,即逆时针偏移90度,传入- ...

微信小程序使用 uCharts 图表

前端图表的插件库有很多

echarts 跟 uCharts …

echarts 更适合应用于后台管理系统或者pc 端

当小程序使用echarts 并且引用echarts 他会提示一段话然后报错

所以我就换了uCharts

现在记录一下自己的uCharts 在小程序中使用

找到微信小程序

复制 js 文件

在小程序components 文件夹下面建立 u-charts文件夹把你刚刚复制的js文件粘贴进来

页面使用

那个文件需要就在那个文件的js 中引用

css 也一定要写上不然图表出不来

练习的时候需要把这个打上勾

然后图标展示出来了

相关配置文档会写的很清楚虽然功能比不上 echars 但uCharts的功能也能满足一些小需求并且是小程序上面的

微信小程序使用 uCharts 图表相关推荐

最新文章

热门文章

微信小程序 使用 uCharts 图表

前端 图表的插件库 有很多

echarts 跟 uCharts …

echarts 更适合应用于后台管理系统 或者pc 端

当小程序使用echarts 并且引用echarts 他会提示一段话 然后报错

所以 我就换了uCharts

现在记录一下自己的uCharts 在小程序中使用

找到微信小程序

复制 js 文件

在小程序components 文件夹下面 建立 u-charts文件夹 把你刚刚复制的js文件粘贴进来

页面使用

那个文件需要 就在那个文件的js 中引用

css 也一定要写上 不然图表出不来

练习的时候需要把这个打上勾

然后图标展示出来了

相关配置 文档会写的很清楚 虽然功能比不上 echars 但uCharts的功能 也能满足一些小需求 并且是小程序上面的

微信小程序 使用 uCharts 图表相关推荐

最新文章

热门文章

微信小程序使用 uCharts 图表

前端图表的插件库有很多

echarts 更适合应用于后台管理系统或者pc 端

当小程序使用echarts 并且引用echarts 他会提示一段话然后报错

所以我就换了uCharts

在小程序components 文件夹下面建立 u-charts文件夹把你刚刚复制的js文件粘贴进来

那个文件需要就在那个文件的js 中引用

css 也一定要写上不然图表出不来

相关配置文档会写的很清楚虽然功能比不上 echars 但uCharts的功能也能满足一些小需求并且是小程序上面的

微信小程序使用 uCharts 图表相关推荐