前言

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.读入数据

代码如下（示例）：

<template><view class="bottomContainer"><canvas :canvasId="canvasLineA" id="canvasListA" class="charts" @touchstart="touchstart"></canvas></view></template><script>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)},}
</script><style></style>

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

总结

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

uniapp使用uCharts制作趋势图相关推荐

【uniapp】3d轮播图/堆叠轮播图/层叠轮播图
前言 uniapp 3d轮播图 uniapp实现3D轮播图从uniapp插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=243#detail 操作步骤导入 ...
uni-app插入ucharts(echarts)图表,支持H5，APP，小程序
uni-app插入ucharts(echarts)图表,支持H5,APP,小程序这是uni-app里通用的图表方法,从ucharts官网上整理的链接: https://pan.baidu.com/ ...
uniapp配合colorUI制作简单的信封
uniapp配合colorUI制作简单的信封没有审美,所以样式比较简陋,背景图可以换成自己想要的样子一.先写一个点击事件用来弹出信封. <view @click="dianji&q ...
uni-app使用ucharts图表 ##uni-app ##uCharts
需求: 首页需要放一个圆环图显示数据. 查找文档:uni-app插件市场uCharts高性能跨全端图表 https://ext.dcloud.net.cn/plugin?id=271 uCharts官 ...
用Tableau制作瀑布图及拓展延伸
作者:Janie 公众号<溜溜笔记说>,纯干货分享 Tableau制作瀑布图,注意事项: 1.善用颜色区分. 2.善于拓展.自我创造,自己尝试对瀑布图做变形. 切记:每一个细节都不要放过. ...
java如何绘制温度实时曲线_Android实现天气预报温度/气温折线趋势图
Android实现天气预报温度/气温折线趋势图天气预报的APP应用中,难免会遇到绘制天气温度/气温,等关于数据趋势的折线或者曲线图,这类关于气温/温度的折线图,一般会有两条线,一条是高温线,一 ...
Tableau制作漏斗图的两种方法
很多业务都是由多个流程.多个环节组成,每一个环节的数据很多时候呈现逐级递减的趋势,如电商中用户的下单数据. 漏斗图主要用于展现每个环节的留存.转化情况,本文讲一下如何使用Tableau制作漏斗图. 本 ...
uniapp 使用ucharts插件绘制图表
需求效果图: 需求描述:佣金趋势图都是线图,佣金占比图为环图,点击可以切换,佣金趋势图可选择数据范围,前三个都是曲线图,最后一个是区域图. 插件:ucharts. HTML 代码 <!-- ...
如何利用可视化工具制作折线图？步骤是什么？
我们在写论文或者做一些PPT的时候,经常会需要画可视化折线图,虽然网上有很多可以制作折线图的可视化工具,但是大多都加了水印或者不够方便使用,直接用别人带水印的图显然是不行的.自己画的话又不会怎么办? ...
《Splunk智能运维实战》——3.9　制作面积图显示应用程序的性能统计数据
本节书摘来自华章计算机<Splunk智能运维实战>一书中的第3章,第3.9节,作者 [美]乔史·戴昆(Josh Diakun),保罗R.约翰逊(Paul R. Johnson),德莱克·默 ...

uniapp使用uCharts制作趋势图

文章目录

前言

一、uCharts是什么？

二、使用步骤

1.引入库

2.读入数据

总结

uniapp使用uCharts制作趋势图相关推荐

最新文章

热门文章