uCharts基本使用方法

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

首先下载ucharts文件

https://gitee.com/uCharts/uCharts

下载下来看到有这些文件，小伙伴们可以先去示例项目里面看

H5端

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#aaa {width: 100%;height: 500px;}</style>
</head><body><canvas id="aaa"></canvas>
</body></html>
<script src="../statics/js/jquery.min.js"></script>  // 自行替换
<script src="../statics/js/assets/js/u-charts.js"></script>  // 自行替换
<script>var option = {animation: true,background: "#FFFFFF",categories: ["2016", "2017", "2018", "2019", "2020", "2021"],color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],extra: {column: {type: "group",width: 30,activeBgColor: "#000000",activeBgOpacity: 0.08}},legend: {},padding: [15, 15, 0, 5],series: [{name: "目标值",data: [35, 36, 31, 33, 13, 34]},{name: "完成量",data: [18, 27, 21, 24, 6, 28]}],type: "column",xAxis: {disableGrid: true},yAxis: {data: [{min: 0}]}}setTimeout(() => {let uChartsInstance = {}const canvas = document.getElementById('aaa');const ctx = canvas.getContext("2d");canvas.width = canvas.offsetWidth;canvas.height = canvas.offsetHeight;option.height = canvas.heightoption.width = canvas.widthoption.context = ctx;   // 找到目标元素uChartsInstance.aaa = new uCharts(option)  // 元素包裹着方便找到模块，方便注册事件canvas.onclick = function (e) {    uChartsInstance.aaa.touchLegend(getH5Offset(e));uChartsInstance.aaa.showToolTip(getH5Offset(e));};canvas.onmousemove = function (e) {uChartsInstance.aaa.showToolTip(getH5Offset(e));};console.log(uChartsInstance)}, 1000);</script>

微信小程序( uniapp )

方法写入两种方式

第一种方式 ucharts下载下来的文件，只引入js文件

在项目中引入

第二种方式直接在插件市场里导入到项目

就可以看到有一个完整的模块插件

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

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

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

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

<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(){setTimeout(() => {this.chartData = {categories: ['2016', '2017', '2018', '2019', '2020', '2021'],series: [{name: "成交量",data: [35, 32, 36, 34, 38, 30]}]}_self.showLineA("canvasLineA", this.chartData);}, 800)},// 展示图标的函数 接收参数，一个块的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,context:uni.createCanvasContext(canvasId, _self), // 这里很重要// 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>

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

<template><view><view class="charts-box"><qiun-data-chartstype="column":chartData="chartData"background="none"/></view></view>
</template><script>export default{data(){return{// chartData:{//   categories:[],//   series:[],// },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]}]}}}}
</script>
<style>/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */.charts-box{width: 100%;height:300px;}
</style>

获取到数据即可实现，如果需要更改样式，可以去在线编译处调整好在替换掉对应的类型就好，也可以自定类型的名字

实现图

有新姿势可以留言，谢谢各位观赏！！

uCharts基本使用方法相关推荐

在 Oracle Enterprise Linux 和 iSCSI 上构建您自己的 Oracle RAC 11g 集群
作者:Jeffrey Hunter 了解如何以低于 2,700 美元的费用在 Oracle Enterprise Linux 上安装并配置 Oracle RAC 11g 第 2 版开发集群. 本指南中 ...
Java面试题大全2021版
一.Java 基础 JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java Run ...
uniapp图表库ucharts双y轴实现方法
1.首先要设置属性为混合mix模式,这里用到的是ucharts的组件. <view class="moreline_cavcans"><qiun-data-cha ...
u-charts 曲线图中间有部分没数据，导致点和点无法连成线的问题解决
解决曲线图或者折线图在两端中间没有数据时无法绘画成线的问题源码修改, 解决方案: 在数据之间填充假数据,并且创建一个和点的数据同级的 list 来验证是不是假数据,如果是假数据就不绘制点,是真数据才绘 ...
uniapp使用uCharts区域图
ucharts区域图的使用一.引入uCharts插件二.定义html模板和样式三.定义变量及宽高度四.调用接口获取数据五.ucharts图表数据渲染显示六.个人感悟一.引入uCharts ...
uni-app插入ucharts(echarts)图表,支持H5，APP，小程序
uni-app插入ucharts(echarts)图表,支持H5,APP,小程序这是uni-app里通用的图表方法,从ucharts官网上整理的链接: https://pan.baidu.com/ ...
uni-app中内嵌u-charts图标导致页面在图表无法滑动
uni-app中内嵌u-charts图标导致页面在图表无法滑动以下有两种方法 1.第一种方法 2.第二种方法以下有两种方法这个问题是在我现在的开发项目中发现的,由于之前图表页面是单个页面写的,不 ...
uni-app 使用uCharts图表插件
1.下载:https://ext.dcloud.net.cn/plugin?id=271 2.使用实例 <template><view class="qiun-column ...
uni-app使用ucharts图表 ##uni-app ##uCharts
需求: 首页需要放一个圆环图显示数据. 查找文档:uni-app插件市场uCharts高性能跨全端图表 https://ext.dcloud.net.cn/plugin?id=271 uCharts官 ...

uCharts基本使用方法

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

H5端

微信小程序( uniapp )

uCharts基本使用方法相关推荐

最新文章

热门文章