在原生微信小程序中使用echarts

在原生微信小程序中使用 echarts

现在越来越多的项目都在使用可视化的功能,那么使用 echarts 实现是一种不错的选择,本文将带给大家如何在原生微信小程序中使用 echarts,保姆级教程

一、下载微信小程序版本 echarts 文件

文件地址:https://github.com/ecomfe/echarts-for-weixin/tree/master

在这里插入图片描述

二、引入echarts

  1. 创建一个微信小程序项目或打开已有的微信小程序项目,下述示例采用全新创建的方式,在电脑文件中创建一个空的文件夹,命名自定义即可
    在这里插入图片描述
  2. 将下载好的 echarts 文件放入创建好的空文件中
    在这里插入图片描述
  3. 使用微信开发者工具打开创建的文件夹
    在这里插入图片描述
  4. 查看创建结果
    在这里插入图片描述

三、使用前处理事项(萌新看——老手略过)

  1. 需要找到 app.wxss 文件中,将默认给 container 的代码注释或清空,或者后续容器不使用 container 类名
    在这里插入图片描述
  2. 如果是新建项目可以删除默认生成的页面文件
    在这里插入图片描述
  3. 并修改 app.json 文件中的 pages 配置选项
    在这里插入图片描述
    在这里插入图片描述

四、在项目中使用 echarts 文件

  1. 在页面的 json文件中引入 echarts.js 文件

    {
    	"usingComponents":{
    		// 引入目录以自己当前项目的路径为准,省略后缀.js
    		"ec-canvas":"../../ec-canvas/ec-canvas" 
    	}
    }
    
  2. 在页面的 wxml 文件中创建 dom 结构及使用

    <!-- 创建容器-此区域用于展示图表 -->
    <view class="container">
      <!-- 使用 ec-canvas 组件,此处的命名为引入组件路径前面的定义 key 键的名字 -->
      <!-- 需要设置 id canvas-id ec 三个属性 -->
      <!-- id canvas-id ec名称可以自己定义,符合命名规范即可 -->
      <ec-canvas id="myChart" canvas-id="myChart" ec="{{ec}}"></ec-canvas>
    </view>
    
  3. 在页面的 wxss 文件中为容器定义大小与样式

    /* 定义容器大小 */
    .container{
      width: 100%;
      height: 500rpx;
      background-color: bisque;
    }
    
    /* ec-canvas 组件宽高与父元素一致即可 */
    ec-canvas{
      width: 100%;
      height: 500rpx;
    }
    
  4. 其中 ec 是一个我们在 index.js 中定义的对象,它使得图表能够在页面加载后被初始化并设置,在页面的 js 文件中使用 echarts

    // 引入 echarts 文件
    import * as echarts from '../../ec-canvas/echarts';
    
    // 定义 initChart 方法
    // initChart 需要传递四个参数 canvas, width, height, dpr
    function initChart(canvas, width, height, dpr) {
      // 使用引入的 echarts的init方法对 chart 变量赋值进行初始化
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
      });
    
      canvas.setChart(chart);
    	
      // 此为配置项。配置图表展现样式与数据
      var option = {};
    
      chart.setOption(option);
    
      return chart;
    }
    
    Page({
      data: {
        // 此处的ec名称与wxml结构中命名保持一致
        ec: {
          // 使用 onInit 方法定义
          onInit: initChart
        }
      }
    });
    
  5. 此时我们的 option 配置项还是为空,接下来我们可以配置一下,进入 echarts 官网,进入示例,https://echarts.apache.org/examples/zh/index.html

  6. 选择自己需要的图表,点击进入,本示例使用柱形图作为示范
    在这里插入图片描述

  7. 复制配置项
    在这里插入图片描述

  8. 将复制的配置项放入我们代码的 option 配置项中

    // 引入 echarts 文件
    import * as echarts from '../../ec-canvas/echarts';
    
    // 定义 initChart 方法
    // initChart 需要传递四个参数 canvas, width, height, dpr
    function initChart(canvas, width, height, dpr) {
      // 使用引入的 echarts的init方法对 chart 变量赋值进行初始化
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
      });
    
      canvas.setChart(chart);
    
      var option =  {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }
    
      chart.setOption(option);
    
      return chart;
    }
    
    Page({
      data: {
        // 此处的ec名称与wxml结构中命名保持一致
        ec: {
          // 使用 onInit 方法定义
          onInit: initChart
        }
      }
    });
    
  9. 现在也没就可以展示出图表,如果需要更换其他图表更换 option 的配置项即可
    在这里插入图片描述

五、结语

以上就是 echarts 在小程序中基本的使用方法,如果需要自己定义图表的样式可以参考文档进行个性化的定制:https://echarts.apache.org/zh/option.html

  • 10
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值