如何在uniapp中实现图表展示功能-猿码集

在如今信息爆炸的时代，数据展示在各个领域都是非常重要的一项工作，而对于APP应用来说，图表展示更是必不可少的功能之一。本文将介绍如何在uniapp中实现图表展示功能。

一、uniapp简介

uni-app是一个使用Vue.js开发跨平台应用的框架。它可以将一个Vue组件编译成各种小程序平台（如微信小程序、支付宝小程序、百度智能小程序等）以及APP（Android、iOS等）平台的原生组件，从而实现一份代码，多端运行。使用uni-app开发可以做到快速开发、快速迭代、快速上手。

二、图表展示框架的选择

前端的图表展示框架有很多，本文提供两个常用的框架供大家选择：echarts和D3.js。它们都有各自的特点，选择合适自己的框架能够更好地完成开发任务。

2.1 echarts框架

echarts是一个纯Javascript图表库，可以用于构建各种各样的图表，包括折线图、柱状图、饼图等等。有着简单易用、强大灵活等特点。

2.2 D3.js框架

D3.js是一个基于数据的文档操作库，可以将数据与DOM进行绑定并进行数据驱动的操作。D3.js可以构建交互性、动态性的可视化效果，支持各种各样的图表类型。

在本文的开发任务中，本人选择了echarts框架来完成图表展示的任务。

三、如何在uniapp中使用echarts

3.1 echarts引入

使用echarts需要将echarts的脚本文件引入到项目中。我们可以将echarts的脚本文件下载到本地，或者使用cdn。本人使用cdn方式引入：


<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>

在引入脚本文件之后，我们需要在Vue文件的<template>标签中添加一个包含echarts图表的DOM节点，该节点可以在后面动态地往其中添加图表。


<template>
  <view class="echarts-wrapper">
    <div id="echartsDom"></div>
  </view>
</template >

3.2 echarts配置

配置是echarts图表展示中的一个非常重要的环节，因为每个图表都有其自身的属性，我们需要在代码中将这些属性进行设置。在本篇文章中，我们以柱状图为例子：


import * as echarts from 'echarts';
export default {
  name: 'echartsDemo',
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //获取echarts的dom节点
      const ecDom = document.getElementById('echartsDom');
      //创建echarts实例
      const echartsInstance = echarts.init(ecDom);
      //图表配置项
      const option = {
        title: {
          text: '柱状图'
        },
        tooltip: {},
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10]
          }
        ]
      };
      //将配置项设置给echarts实例
      echartsInstance.setOption(option);
    }
  }
};

在以上代码中，我们首先获取了echarts的dom节点，然后创建了一个echarts实例，通过图表的配置进行了初始化，最后将配置项设置给echarts实例。在上面的代码中，我们添加了一个柱状图的配置，其中包含了标题、数据等属性，这些属性可以根据实际需要进行修改。

四、图表展示的示例（柱状图）

在上述的代码基础上，我们可以根据数据的不同进行分类展示，下面的示例为使用echarts展示西瓜和香蕉的销售情况。

4.1 基础柱状图展示


<template>
  <view class="echarts-wrapper">
    <div id="echartsDom"></div>
  </view>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'echartsDemo',
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //获取echarts的dom节点
      const ecDom = document.getElementById('echartsDom');
      //创建echarts实例
      const echartsInstance = echarts.init(ecDom);
      //图表配置项
      const option = {
        title: {
          text: '水果销售情况'
        },
        tooltip: {},
        xAxis: {
          data: ['西瓜', '香蕉']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [20, 36]
          }
        ]
      };
      //将配置项设置给echarts实例
      echartsInstance.setOption(option);
    }
  }
};
</script>

五、总结

通过本文的介绍，我们可以看到在uniapp中使用echarts进行图表展示并不难，只需要引入echarts库、设置echarts图表的配置项，即可完成图表展示功能。在实际开发过程中，可以根据实际业务需求进行修改。希望本文对大家有所帮助。

如何在uniapp中实现图表展示功能