uCharts基本使用方法

图表组件uCharts, 小程序上开发者们如果有图表的需求可以尝试使用

首先下载ucharts文件

https://gitee.com/uCharts/uCharts

uCharts基本使用方法_第1张图片
下载下来看到有这些文件,小伙伴们可以先去示例项目里面看

H5端

引入u-charts.js文件,主要构建就是new uCharts和配置context,其他的就跟其他charts配置一样
可以看例子写的,也可以自己试验一波





    
    
    
    Document
    



    



  // 自行替换
  // 自行替换

微信小程序( uniapp )

方法写入两种方式

第一种方式 ucharts下载下来的文件,只引入js文件
uCharts基本使用方法_第2张图片
在项目中引入
uCharts基本使用方法_第3张图片
第二种方式 直接在插件市场里导入到项目
uCharts基本使用方法_第4张图片
就可以看到有一个完整的模块插件

两种方法的区别在于,只引入js的 需要自己配置参数,直接导入的只需要获取数据即可

https://demo.ucharts.cn/#/

ucharts提供了一个可以实时编译的平台,可以在线调整完之后在替换项目内容

以下具体实现
第一个只引入js的方法










另一种引入了整个插件的方式





获取到数据即可实现,如果需要更改样式,可以去在线编译处调整好在替换掉对应的类型就好,也可以自定类型的名字
uCharts基本使用方法_第5张图片
实现图
uCharts基本使用方法_第6张图片
uCharts基本使用方法_第7张图片

你可能感兴趣的:(微信小程序,小程序,前端)