uCharts基本使用方法_Sky_Bug_ucharts

irpas 02-07 7845

图表组件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.height option.width = canvas.width option.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) { // 使用声明的变量canvaLineA canvaLineA.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-charts type="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>

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

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