在原生微信小程序中使用 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
就可以展示出图表，如果需要更换其他图表更换 option 的配置项即可

[外链图片转存中...(img-2TXBNgcO-1683960179758)]

## 五、结语

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