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

原生微信小程序使用 echarts

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

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

文件地址https://github.com/ecomfe/echarts-forweixin/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"&gt;
      <!-- 使用 ec-canvas 组件,此处的命名为引入组件路径前面定义 key 键的名字 --&gt;
      <!-- 需要设置 id canvas-id ec 三个属性 --&gt;
      <!-- id canvas-id ec名称可以自己定义,符合命名规范即可 --&gt;
      <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) {
      // 使用引入的 echartsinit方法对 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) {
      // 使用引入的 echartsinit方法对 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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注