首页 >微信小程序 >小程序开发 > 正文

微信小程序中echarts的用法和可能遇见的坑,快来收藏避雷!!

转载2021-09-30 19:55:340725
本篇文章给大家分享一些微信小程序中使用echarts的使用方法和问题总结,让大家可避坑踩雷,希望能够给大家提供帮助!

微信小程序的使用方法和一些避雷踩坑的问题,希望能够给大家提供帮助

微信小程序中使用echarts

一、下载小程序版的echarts

下载地址:https://github.com/ecomfe/echarts-for-weixin

二、使用步骤

1.引入项目依赖

将微信小程序版 echarts 从 github 上拉下来后,将文件里的 ec-canvas 文件复制一个到自己项目里,实际就是微信小程序版 echarts 的依赖文件。

【相关学习推荐:小程序开发教程

1.png

2.引入库

在使用的 echarts 的页面的 json 文件中引入 echarts ,引入的路径根据自己的项目结构来引入

在全局配置文件 app.json 里引入也可以,这样就全部页面通用,不用一个个页面引入,当多个页面使用 echarts 时,比较方便

2.png

在使用的 echarts 的页面的 js 文件中引入 echarts ,引入的路径根据自己的项目结构来引入

3.png

使用方法

wxml中使用组件<ec-canvas>,id 和 canvas-id 都可以自行命名

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

js 代码

关于 option 配置,可自行去官网看文档或者参照示例,https://echarts.apache.org/zh/option.html#title

import * as echarts from '../../ec-canvas/echarts';

const app = getApp();

function initChart(canvas, width, height, dpr) {
  //主要是这个 echarts 的创建
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  
  // option 的配置可以根据自己的需求去 echarts 官网查看配置的属性方法
  var option = {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: [{
        value: 55,
        name: '北京'
      }, {
        value: 20,
        name: '武汉'
      }, {
        value: 10,
        name: '杭州'
      }, {
        value: 20,
        name: '广州'
      }, {
        value: 38,
        name: '上海'
      }]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
  }
});

css 代码

.container{
  width: 100%;
  height: 100vw;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

避坑踩雷

1、关于引入依赖,引入库,按照官方的使用方法使用后,echarts 图不显示的问题

解决办法:html在使用 echarts 时,外层包裹着的 view 标签也要设置宽高 (官方的方法样式里没有设置外层元素的宽高,在官方的示例中又可以显示,这就误导了很多人会掉坑)

4.png

2、关于 devicePixelRatio 的作用

可以看到官方代码里初始创建 echarts 时,代码如下图,当你设置了 devicePixelRatio 后,echarts的图表在微信开发者工具中看到的 echarts 图表像素是很差的,用手机预览的时候,是很清晰的,当把 devicePixelRatio 去掉后,微信开发者工具中看到的 echarts 图表像素变得很清晰,手机看到的是像素变差了,所以这个应该是根据设备的像素单位来适配图表的像素吧

5.png

更多编程相关知识,请访问:编程视频!!

以上就是微信小程序中echarts的用法和可能遇见的坑,快来收藏避雷!!的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

  • 相关标签:微信小程序 echarts
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php怎么判断有几位小数442
    php中转换首字母大写的函数是什么370
    Javascript怎么检查对象是否为空890
    推荐视频教程
  • 微信小程序项目实战视频教程微信小程序项目实战视频教程
  • 微信小程序开发视频教程微信小程序开发视频教程
  • 开发微信小程序视频教程开发微信小程序视频教程
  • 最新微信小程序开发视频教程最新微信小程序开发视频教程
  • 2019新版小程序+tp5.1实战开发(其他机构)2019新版小程序+tp5.1实战开发(其他机构)
  • 视频教程分类