uniapp ucharts统计图表

ucharts图表的下载地址：uCharts高性能跨全端图表https://www.ucharts.cn/

hbuilderx用到的插件：

秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场 uCharts v2.3.7支持Vue3！全新官方图表组件，支持H5及APP用ECharts渲染图表，uniapp可视化首选组件https://ext.dcloud.net.cn/plugin?id=271浏览案例地址：秋云uCharts图表组件https://demo.ucharts.cn/#/用于hbuilderx编程器；先下载然后用hbuilderx打开之后运行用谷歌打开就可以选择自己要用的饼状图、折线图等，选好之后就可以去hbuilderx里面看代码然后图表的数据自己根据接口赋值就行

以下是我写的案例

这就是没有数据时的界面效果，这不比啥也没有美观嘛

<template>
<view class="select"><!-- 这个是没有数据时显示的界面，以免没数据时界面不美观--><u-empty class="custom-image" v-if="cusImage" text="该时间段没有数据" mode="data"icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty><!-- 饼图 --><view class="charts-box" v-if="disab"><qiun-data-charts type="pie" :chartData="chartsDataPie1" /></view><view class="charts-box" v-if="fires"><qiun-data-charts type="pie" :chartData="chartsDataPie2" /></view><!-- 折线图 --><!-- 开启滚动条，需要开启拖动功能，即:ontouch="true"，微信小程序需要开启canvas2d，否则会很卡，开启2d需要指定canvasId  :canvas2d="true" --><view class="charts-box"><qiun-data-charts type="line" canvasId="scrolllineid":opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}":chartData="chartsDataLine4" :ontouch="true" :reshow="supervise" /></view>
</view>
</template><script>export default{data(){return {//这些定义的false根据自己需要定义，这个是用于显示隐藏的搭配v-if或v-show使用。比如说：你现在有三个按钮，点击不同按钮有不同数量的统计图就可以使用// 统计图cusImage: false,//折线图chartsDataLine4: {},chartsDataLine5: {},disab: false,//饼图chartsDataPie1: {},chartsDataPie2: {},fires: false,}}onShow: function() {//这个是进入页面时需要显示的数据就可以通过吧定义的方法放在这里来实现，比如你要显示哪个统计图就可以吧在data定义的false换成true来实现let _self = this;this.disab = truethis.supervise = true},methods：{getServerData() {setTimeout(() => {//因为组件内监听了chartData，构造chartData的时候，一定要先定义一个临时变量，构造完成后统一赋值给chartData绑定的变量，否则会导致多次渲染图表//饼图let DataPie1 = JSON.parse(JSON.stringify(this.demodata.PieA))this.chartsDataPie1 = DataPie1let DataPie2 = JSON.parse(JSON.stringify(this.demodata.PieB))this.chartsDataPie2 = DataPie2//折线图let DataLine4 = JSON.parse(JSON.stringify(this.demodata.Line))this.chartsDataLine4 = DataLine4console.log(this.chartsDataLine4)}, 1500);},getlist() {this.demodata.Line.categories = []//每次请求的时候先清空一下列表要不然会出现数据叠加的情况// this.demodata.Line.series = []let lodat = {projectIds: this.projectId,startTime: this.startTime,endTime: this.endTime,}mobileQueryAllFireStatusNumStatistics(lodat).then((res) => {console.log(res.data)console.log(res.data.zhenShiNum)this.num = res.data.zhenShiNum + res.data.wuBaoNum + res.data.weiQueRenNumif (this.num == 0) {this.cusImage = truethis.disab = false} else {this.cusImage = falsethis.disab = trueif (res.data.zhenShiNum) {this.demodata.PieA.series[0].data.push({name: "真实",value: res.data.zhenShiNum,})}if (res.data.wuBaoNum) {this.demodata.PieA.series[0].data.push({name: "误报",value: res.data.wuBaoNum,})}if (res.data.weiQueRenNum) {this.demodata.PieA.series[0].data.push({name: "未确认",value: res.data.weiQueRenNum,})}}}).catch((err) => {console.log(err)})//统计图this.getServerData()},}          }
</script>

uniapp ucharts统计图表相关推荐

uni-app使用ucharts图表 ##uni-app ##uCharts
需求: 首页需要放一个圆环图显示数据. 查找文档:uni-app插件市场uCharts高性能跨全端图表 https://ext.dcloud.net.cn/plugin?id=271 uCharts官 ...
uniapp ucharts统计图的使用
结尾有搬运文档的资料:官网上是要付费的,我直接搬运过来了官网链接:https://www.ucharts.cn/v2/#/tool/index 效果: 实现步骤: 1.在插件市场下载插件,使用hbu ...
uni-app使用ucharts地图(主要微信小程序-初步使用)
下载 https://ext.dcloud.net.cn/plugin?id=271 描述根据数据门店数量地图颜色逐步加深效果使用目录结构新建index.vue (复制以下内容) < ...
uniapp使用ucharts图表及问题汇总
uniapp使用ucharts图表及问题汇总本文主要描述如何通过组件的方式引入ucharts图表,并汇总了使用过程中踩到的坑,如层级过高问题.默认显示提示框tooltip.提示框显示内容格式化等等. ...
使用uniapp绘制一个折线图（uCharts）
uCharts简介,这是官方介绍,上面有全部的示例,我这篇只是取一部分实现的需要引入u-charts.js,这个文件的代码我放在最后面,当然也可以官方Gitee下载效果图代码: <temp ...
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 ...
【ucharts】uniapp -- 使用秋云 ucharts echarts高性能跨全端图表组件
uCharts简介 uCharts是一款基于canvas API开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web.iOS.Android(基于 uni-app / taro ). ...
uni-app如何导入秋云 ucharts echarts 高性能跨全端图表组件
感性认识想在 uni-app 中使用 ucharts 官方提供了两种方法: uni_modules版本非 uni_modules版本何为 uni_modules?请看官方文档 uni_modul ...

uniapp ucharts统计图表

uniapp ucharts统计图表相关推荐

最新文章

热门文章