小程序项目开发总结--小程序项目中echarts图表的使用

微信小程序 · lvlvjs · 于 2个月前 发布 · 114 次阅读

构建小程序步骤

从git库中拉下来的小程序项目需要构建npm包

//初始化
npm init
//安装依赖
npm install
安装完依赖后把node_modules和package.json文件复制一份放到miniprogram文件中,然后点击开发者工具中的工具->构建npm就可以构建了,构建成功后就可以把miniprogram文件下的node_modules和package.json文件删除就可以了

小程序项目中echarts图表的使用

引入图表

网上有提供小程序的echarts插件,将整个项目clone到本地,把项目中的ec-canvas文件复制一份到自己的项目中的专门放置组件的文件夹下

然后再在需要使用的页面json文件中引入

就可以在页面中使用了

//wxml
<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

//ts
function initChart(canvas, width, height, dpr) {
  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: {
      onInit: initChart
    }
  }
});

这对于所有 ECharts 图表都是通用的,用户只需要修改上面 option 的内容,即可改变图表。option 的使用方法参见echarts配置手册 完整的例子请参见ecomfe/echarts-for-weixin 项目

文件太大怎么办?

插件默认提供的 ECharts 文件是最新版本的包含所有组件文件。可以下载不同版本的 ECharts 进行替换。建议调试时使用未压缩版本,发布时使用压缩版本,否则文件会太大无法发布。 发布时,如果对文件大小要求更高,可以在 echarts定制网页下载仅包含必要组件的包,并且选择压缩。 下载的文件要替换 ec-canvas文件下的echarts.js,注意一定需要重命名为 echarts.js。 此外,还可考虑使用微信小程序的分包策略

小程序使用echarts报错 t.addEventListener 未定义

下载定制后的echarts.js文件会报 t.addEventListener 未定义 这个错。推测是5.2.2包没有更新问题,重新更新解决。 下载下来的原始js文件 解决方法:

echarts层级太高,遮盖页面,影响功能

echarts图表的层级是最高的,如果只是用wx:if来控制图表的显示和隐藏是不行的,即使是隐藏了,但是还是占着位置的,影响了页面的功能使用。在此项目中的解决办法就是使用hidden属性和css来控制显示隐藏

//wxml
     <view class="{{indexEchartsClass}}" hidden="{{hiddenChart}}">
          <ec-canvas class="ec-canvas" ec="{{ec}}" />
      </view>

//ts
page({
data: {
    hiddenChart: true,
    indexEchartsClass: 'index-echarts-hide',
  },

    if (括号里是控制图表显示和隐藏的条件)) {
      this.setData({
        hiddenChart: false,
        indexEchartsClass: 'index-echarts',
      })
    }
})

//wxss
.index-echarts {
  width: 100%;
  height: 800rpx;
}
.index-echarts-hide {
  height: 100%;
  width: 0rpx;
}
共收到 0 条回复
没有找到数据。
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册