wx小程序如何实现数据可视化

1.克隆模板

克隆地址: git@gitee.com:lv-zirui/mini-program-project-template.git// git 命令git clone git@gitee.com:lv-zirui/mini-program-project-template.git

首先我们需要将我写的现成的模板拉入本地

2.运行到微信开发者工具

首先我们需要用hbuilder X将项目打开

在编辑器的最上边找到运行 -> 运行到小程序模拟器 -> 微信开发者工具

点击我们会发现,项目正在进行编译

编译完之后呢,我们会发现项目跑起来了,一个简单的小程序模板就呈现出来了。

紧接着我们来做一下数据看表

这里的图表,我选择使用ucharts插件

ucharts官网: https://www.ucharts.cn/v2/#/guide/index

3.引入ucharts插件

按照官方提示,我们找到了该插件

我们只需要将该插件下载并导入项目即可

该项目模板里面已经给大家导入了

就不做一一讲解了,我们来看一下如何使用吧

4.使用ucharts组件

首先我们需要在chart组件中,引入ucharts插件

<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />

type表示该图表是什么类型的图表,比如折线图,饼图,柱状图等等。

opts表示图标的一些配置项,比如图标的颜色,x轴样式,y轴样式,距离上下左右的距离等等。

chartData表示图表的数据来源,我们请求来的数据要处理好并深拷贝给chartData。

5.ucharts配置项

data() {      return {        wrap_con: '',        chartData: {},        //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。        opts: {          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",            "#ea7ccc"          ],          padding: [15, 15, 0, 5],         enableScroll: false,          legend: {},          xAxis: {          disableGrid: true          },          yAxis: {            data: [{              min: 0            }]          },          extra: {            column: {              type: "group",              width: 30,              activeBgColor: "#000000",              activeBgOpacity: 0.08            }          }        }      };    },

6.ucharts数据

  methods: {      getServerData() {        //模拟从服务器获取数据时的延时        setTimeout(() => {          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接          let res = {            categories: ["2018", "2019", "2020", "2021", "2022", "2023"],            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);      },    },

最后我们在小程序的onReady生命周期中调用并赋值即可

这样我们的小程序可视化就实现了

7.最终效果