uni-app 使用uCharts图表插件

1.下载：https://ext.dcloud.net.cn/plugin?id=271

2.使用实例

<template><view class="qiun-columns"><view class="qiun-charts" ><canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas></view></view>
</template><script>// 引入uCharts 方法组件。import uCharts from '@/components/u-charts/u-charts.js';// 定义全局变量var _self;var canvaLineA=null;export default {data() {return {cWidth:'',cHeight:'',pixelRatio:1,}},// 页面加载执行的函数onLoad() {_self = this;// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化this.cWidth=uni.upx2px(750);this.cHeight=uni.upx2px(500);this.getServerData();},methods: {// 获取数据，发请求getServerData(){uni.request({// 请求地址url: 'https://www.ucharts.cn/data.json',// 请求参数data:{},// 请求成功的回调函数success: function(res) {console.log(res.data.data.LineA,res.data.data.LineA.categories)let LineA={categories:[],series:[]};//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去// 自己可以定义数据/*let LineA={categories:[],series:[]};LineA.categories=['2010','2012','2014','2016','2018','2020'];LineA.series=[{name:"南京",data:[12,15,10,18,6,13],color:'#409eff'},{name:"苏州",data:[15,6,13,18,8,14],color:'#e6a23c'},{name:"无锡",data:[13,12,13,16,9,10],color:'#f56c6c'}];*/ LineA.categories=res.data.data.LineA.categories;LineA.series=res.data.data.LineA.series;// 找到id为canvasLineA的块_self.showLineA("canvasLineA",LineA);},// 请求失败的回调函数fail: () => {_self.tips="网络错误，小程序端请检查合法域名";},});},// 展示图标的函数 接收参数，一个块的id,一个数据showLineA(canvasId,chartData){canvaLineA=new uCharts({$this:_self,canvasId: canvasId,// 图标类型type: 'line',fontSize:11,legend:{show:true},dataLabel:false,dataPointShape:true,background:'#FFFFFF',pixelRatio:_self.pixelRatio,categories: chartData.categories,series: chartData.series,animation: true,// x轴显示的内容xAxis: {type:'grid',gridColor:'#CCCCCC',gridType:'dash',dashLength:8},// y轴显示的内容yAxis: {gridType:'dash',gridColor:'#CCCCCC',dashLength:8,splitNumber:5,min:10,max:180,format:(val)=>{return val.toFixed(0)+'元'}},width: _self.cWidth*_self.pixelRatio,height: _self.cHeight*_self.pixelRatio,extra: {line:{type: 'straight'}}});},// 点击图表显示的内容touchLineA(e) {// 使用声明的变量canvaLineAcanvaLineA.showToolTip(e, {format: function (item, category) {return category + ' ' + item.name + ':' + item.data }});}}}
</script><style scoped>/*样式的width和height一定要与定义的cWidth和cHeight相对应*/.qiun-charts {width: 750upx;height: 500upx;background-color: #FFFFFF;}.charts {width: 750upx;height: 500upx;background-color: #FFFFFF;}
</style>

3.样式展示

uni-app 使用uCharts图表插件相关推荐

uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
微信小程序图表插件wxcharts.js使用小记，Echarts.js，推荐uCharts.js
一.wxcharts.js 参考地址:https://github.com/xiaolin3303/wx-charts/issues/58 参数含义参考:https://www.cnblogs.com ...
uniapp 中使用图表（秋云uCharts图表组件）
在用uniapp做项目时,遇到要做折线图的需求,但是又不想用echarts,在uniapp中dom操作非常的麻烦.于是找到了一个专门为app而生的图表插件uCharts(秋云uCharts图表组件), ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
uCharts图表在小程序中的使用
1.uCharts 简介高性能跨平台图表库,支持H5.APP.小程序(微信小程序.支付宝小程序.钉钉小程序.百度小程序.头条小程序.QQ小程序.360小程序).Vue.Taro等更多支持canvas ...
wxml 点击图片下载_小程序图表插件
最近做小程序需要统计一些数据,需要用到图表插件,所有在网上找了找,找到了wx-charts这个插件,看着挺好用的,和jq的echarts类似,所有选择用这个插件来画图表,wx-charts是基于can ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...

uni-app 使用uCharts图表插件

1.下载：https://ext.dcloud.net.cn/plugin?id=271

2.使用实例

3.样式展示

uni-app 使用uCharts图表插件相关推荐

最新文章

热门文章