小程序开发加载Echarts图表（touchWX载入）

最新推荐文章于 2024-08-07 09:26:17 发布

置顶

北纬_13度

最新推荐文章于 2024-08-07 09:26:17 发布

阅读量5.1k

点赞数 1

分类专栏： HTML5 微信小程序 touchWX 文章标签： H5 微信小程序 touchWX echarts 组件

本文链接：https://blog.csdn.net/u014223679/article/details/81100990

版权

本文分享了如何在微信小程序中使用touchWX框架加载Echarts图表。通过介绍touchWX的便利性和Echarts的加载过程，作者提供了一个简化版的Echarts组件创建步骤，并展示了组件的代码结构。

摘要由CSDN通过智能技术生成

小程序蛮火的咱也搞一个

echarts加载稍微复杂一点这里写一下我的经验

小程序和百度echarts一起做了这个小程序版的echarts，官方有示例，也有好多博客写了，这里放一个之前看过的

touchWX

简单说下我用了touchWX的感受

单文件的开发方式，真正的比小程序那一个页面4个文件不知道爽多少倍，再也不用写一个页面开4个窗口了
实时编辑预览保存了就会自动执行，编译成小程序格式的文件
丰富的组件，其实没用上多少。个性化的项目，能照搬的没多少，也就定位/提示用用

echarts加载

话不多说，进入正题，怎么在touchWX中用上echarts？

官方给的是4文件的小程序组件，而touchWX的组件是单文件.wxc，在编译的时候再转成4个文件，所以要把官方的整合起来，方便直接编译调用。

在调用echarts组件的时候还会调用两个核心js echarts.js和wx-canvas.js,所以把这两个拷贝到package下的ec-canvas文件夹里，然后新建一个index.wxc(touchWX的组件方法)，再把echaert官方组件整合到index.wxc中

结构如下
文件夹结构

index.wxc代码如下

<template>
    <canvas class="ec-canvas" canvas-id="{
    { canvasId }}" bindinit="init" bindtouchstart="{
    { ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{
    { ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{
    { ec.disableTouch ? '&