前言

将接口返回的数据做一下简单处理，处理成组件要求的格式即可

一、处理前的代码

<template><view class="charts-box"><qiun-data-charts type="column":opts="opts":chartData="chartData"/></view>
</template><script>
export default {data() {return {chartData: {},//这里的 opts 是图表类型 type="column" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['column'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。opts: {timing: "easeOut",duration: 1000,rotate: false,rotateLock: false,color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],padding: [15,15,0,5],fontSize: 13,fontColor: "#666666",dataLabel: true,dataPointShape: true,dataPointShapeType: "solid",touchMoveLimit: 60,enableScroll: false,enableMarkLine: false,legend: {show: true,position: "bottom",float: "center",padding: 5,margin: 5,backgroundColor: "rgba(0,0,0,0)",borderColor: "rgba(0,0,0,0)",borderWidth: 0,fontSize: 13,fontColor: "#666666",lineHeight: 11,hiddenColor: "#CECECE",itemGap: 10},xAxis: {disableGrid: true,disabled: false,axisLine: true,axisLineColor: "#CCCCCC",calibration: false,fontColor: "#666666",fontSize: 13,rotateLabel: false,rotateAngle: 45,itemCount: 5,boundaryGap: "center",splitNumber: 5,gridColor: "#CCCCCC",gridType: "solid",dashLength: 4,gridEval: 1,scrollShow: false,scrollAlign: "left",scrollColor: "#A6A6A6",scrollBackgroundColor: "#EFEBEF",format: ""},yAxis: {data: [{min: 0}],disabled: false,disableGrid: false,splitNumber: 5,gridType: "solid",dashLength: 8,gridColor: "#CCCCCC",padding: 10,showTitle: false},extra: {column: {type: "group",width: 30,activeBgColor: "#000000",activeBgOpacity: 0.08,seriesGap: 2,categoryGap: 3,barBorderCircle: false,linearType: "none",linearOpacity: 1,colorStop: 0,meterBorder: 1,meterFillColor: "#FFFFFF"},tooltip: {showBox: true,showArrow: true,showCategory: false,borderWidth: 0,borderRadius: 0,borderColor: "#000000",borderOpacity: 0.7,bgColor: "#000000",bgOpacity: 0.7,gridType: "solid",dashLength: 4,gridColor: "#CCCCCC",fontColor: "#FFFFFF",splitLine: true,horizentalLine: false,xAxisLabel: false,yAxisLabel: false,labelBgColor: "#FFFFFF",labelBgOpacity: 0.7,labelFontColor: "#666666"},markLine: {type: "solid",dashLength: 4,data: []}}}};},onReady() {this.getServerData();},methods: {getServerData() {//模拟从服务器获取数据时的延时setTimeout(() => {//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接let res = {categories: ["2016","2017","2018","2019","2020","2021"],series: [{name: "目标值",data: [35,36,31,33,13,34]},{name: "完成量",data: [18,27,21,24,6,28]}]};this.chartData = JSON.parse(JSON.stringify(res));}, 500);},}
};
</script><style scoped>/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */.charts-box {width: 100%;height: 300px;}
</style>

二、处理后的代码

methods: {getServerData() {let tableData = {categories: [],series: [{name: "目标值",data: []},{name: "完成量",data: []}]};let param = {token: this.$storage.getStore("token")}let res = await getList(param)// 将获得的数据放进categories[],series.data[]中for (var i = 0; i < res.List.length; i++) {tableData.categories.push(res.List[i].data)tableData.series[0].data.push(parseInt(res.List[i].data)) //记得使用parseInt()转换数据格式为int格式}//模拟从服务器获取数据时的延时setTimeout(() => {//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接this.chartData = JSON.parse(JSON.stringify(tableData));}, 500);},}

三、总结

思路就是把接口返回是数据通过数组的方法放到指定data中即可

ucharts 图表接口数据处理相关推荐

uCharts图表在小程序中的使用
1.uCharts 简介高性能跨平台图表库,支持H5.APP.小程序(微信小程序.支付宝小程序.钉钉小程序.百度小程序.头条小程序.QQ小程序.360小程序).Vue.Taro等更多支持canvas ...
uniapp使用ucharts图表及问题汇总
uniapp使用ucharts图表及问题汇总本文主要描述如何通过组件的方式引入ucharts图表,并汇总了使用过程中踩到的坑,如层级过高问题.默认显示提示框tooltip.提示框显示内容格式化等等. ...
uniapp 使用秋云uCharts图表组件、echarts图表组件
一.uniapp 使用秋云uCharts图表组件 1.我们的项目是依赖uniapp的vue-cli项目操作:将uni_modules目录复制到src目录,即src/uni_modules. 2.页面 ...
uniapp中秋云uCharts图表组件基础使用
官方文档:秋云uCharts图表组件 1.导入到对应项目中根目录会多出文件夹uni_modules 柱状图基础使用完整代码: <template><view><vie ...
uniapp 中使用图表（秋云uCharts图表组件）
在用uniapp做项目时,遇到要做折线图的需求,但是又不想用echarts,在uniapp中dom操作非常的麻烦.于是找到了一个专门为app而生的图表插件uCharts(秋云uCharts图表组件), ...
微信小程序使用 uCharts 图表
前端图表的插件库有很多 echarts 跟 uCharts - echarts 更适合应用于后台管理系统或者pc 端当小程序使用echarts 并且引用echarts 他会提示一段话然后报错 ...
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官 ...
uni-app、Vue3 + ucharts 图表 H5 无法渲染
当学习成为了习惯,知识也就变成了常识.感谢各位的点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github,欢迎 Watch 和 Star. 简介 ...

ucharts 图表接口数据处理

文章目录

前言

一、处理前的代码

二、处理后的代码

三、总结

ucharts 图表接口数据处理相关推荐

最新文章

热门文章