uniapp使用uCharts制作趋势图

2024-07-06 13:15| 来源: 网络整理| 查看: 265

文章目录前言一、uCarts是什么？二、使用步骤 1.引入库2.读入数据总结

前言

uniapp使用uCharts制作趋势图，适用于小程序。

提示：以下是本篇文章正文内容，下面案例可供参考

一、uCharts是什么？

uCharts v2.3上线，支持nvue！全新官方图表组件，支持H5及APP用ECharts渲染图表，uniapp可视化首选组件

二、使用步骤 1.引入库

//网站地址秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

import uCharts from '../components/achieve/leiqch-ucharts/js/u-charts.js'

2.读入数据

代码如下（示例）：

import uCharts from '../components/achieve/leiqch-ucharts/js/u-charts.js' var canvaLineA=null export default{ data () { return { cWidth:'', cHeight:'', pixelRatio:1, canvasLineA:"canvasLineA" } }, components: { }, methods: { uni.hideLoading(); }, //趋势图 tendencyChartList(agentId){ //访问后端数据 this.$api.achieve.tendencyChart(agentId).then((res)=>{ //获取后端返回数据 let lineA={ categories:[], series:[{ name:'客', data:[], color:'#5B8FF9' }, { name:'我', data:[], color:'#5AD8A6' }] } //把数据放在lineA中 res.data.forEach((item)=>{ lineA.categories=lineA.categories.concat(item.selectDate) lineA.series[0].data=lineA.series[0].data.concat(item.visitCount) lineA.series[1].data=lineA.series[1].data.concat(item.shareCount) }) console.log("lineA",lineA) this.showLineA(this.canvasLineA,lineA) }) }, //创建趋势图 showLineA(canvasId,chartData){ canvaLineA=new uCharts({ $this:this, canvasId: canvasId, type: 'line', fontSize:11, legend:{show:true}, dataLabel:false, dataPointShape:true, background:'#FFFFFF', pixelRatio:this.pixelRatio, categories: chartData.categories, series: chartData.series, animation: true, // x轴显示的内容 xAxis: { type:'grid', gridColor:'#DADDE6', gridType:'solid', dashLength:8, disableGrid:true, rotateLabel:true, }, // y轴显示的内容 yAxis: { gridType:'solid', gridColor:'#DADDE6', dashLength:8, splitNumber:5, min:0, // format:((val)=>{return val.toFixed(1)}) }, width: this.cWidth*this.pixelRatio, height: this.cHeight*this.pixelRatio, extra: { line:{ type: 'straight' } } }) }, // 点击图表显示的内容 touchstart(e){ console.log("图表显示的内容",e) canvaLineA.showToolTip(e,{ format: function (item, category) { return category + ' ' + item.name + ':' + item.data } }) }, }, onLoad() { this.tendencyChartList(10) }, }

该处使用的url网络请求的数据。

总结

提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了uCarts的使用，而uCarts提供了大量趋势图

【本文地址】

公司简介

联系我们