微信小程序如何引入使用ECharts（附带自定义定制流程）

已于 2023-08-01 16:45:03 修改
阅读量2.2k 收藏 4
点赞数 2
文章标签： 微信小程序 echarts 小程序
于 2023-08-01 13:38:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71156997/article/details/132039163
版权

微信小程序引入ECharts教程

开发中有时候避免不了引入各种第三方库，以下是详细讲解了微信小程序如何引入ECharts图表

第一步

去echarts官网。下载echarts-for-weixin项目

官网地址 https://echarts.apache.org/zh/index.html
根据以下操作找到小程序需要下载的项目
在这里插入图片描述点击使用手册找到应用篇

在这里插入图片描述或者在搜索框搜索小程序也可以找到。

第二部

使用git Bash Here拉取项目echarts-for-weixin的代码

在这里插入图片描述

第三步

拷贝项目中的ec-canvas文件夹到项目中的pages同级目录下
在这里插入图片描述
到这里已经完成了然后去看项目的案例即可套入使用，案例在下载的echarts-for-weixin项目中

扩展

到这一步的时候已经算是完成了，但这时候发现引入的echarts太大，这个时候希望包的体积能减少。

那么就可以去官方哪里，进行在线定制表格，选取自己需要的表格和规格

在这里插入图片描述

然后选好表格后，根据当前的开发环境选择压缩下载或者普通下载

下载完成后会有一个echarts.js文件，这个时候组需要把项目中的echarts.js替换成我们自定义下载的表格文件即可

ps:压缩文件下载的后缀是echarts.min.js的，我们可以改成echarts.js；不会影响这个文件的内容，普通文件可以让我们更加直观的检查代码。如果是使用TypeScript模板开发的小程序可以把后缀改成.ts

@奇怪的前端
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
微信小程序——Echarts使用（保姆式教程）
不迁怒，不贰过。小知识，大智慧。
06-17 9355
一、Echarts 简介 二、小程序中引入 Echarts 1、下载echarts插件 2、定制图形，生成 echarts.min.js 文件 3、替换 echarts.js 文件 三、小程序中使用 Echarts
微信小程序开发中的数据可视化与图表展示
最新发布
m0_72166538的博客
05-02 499
在initChart函数中，我们使用selectComponent函数获取到canvas元素，并调用init方法初始化ECharts，然后通过setChart方法将ECharts与canvas关联起来。最后，我们使用ECharts提供的API来设置柱状图的配置项和数据。通过引入第三方图表库，并使用其提供的API，我们可以在微信小程序中快速创建各种类型的图表，并且通过配置项来实现个性化定制。一种常用的图表库是ECharts，它是一款由百度开发的优秀的数据可视化图表库，提供了丰富的图表类型和交互功能。
微信小程序如何引入echarts组件(手把手教学，细致清晰，简单易懂)
huss136的博客
04-08 7455
微信小程序如何引入echars组件 本次案例以引入温度仪表盘为例 废话不多说，直接上效果图 ehcats组件库可自行到echats官网下载，下载好之后放到你的项目包里面。 demo.json部分 { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" //这里使用了相对路径 } } 首先需要你在json文件里引入echarts组件 demo.wxml写法 <view class="my-ech.
小程序中使用echarts(硬货，全网最详细教程！)
热门推荐
weixin_59306092的博客
07-14 2万+
如何在小程序引入echarts图表，全网最详细教程！
微信小程序使用echarts动态加载数据
qq_46043270的博客
02-02 1281
微信小程序 使用 echarts 时遇到的问题
微信小程序引入echarts图表（保姆式）
m0_64409387的博客
05-30 9230
微信小程序引入echarts图表（保姆式）
微信小程序中使用echarts
ColdCoder的博客
09-16 2万+
体验示例小程序 在微信中扫描下面的二维码即可体验 ECharts Demo： 下载 为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。 首先，下载gitHub项目。 其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。 ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版
微信小程序中使用echarts方法
一片天空
07-25 3652
微信小程序中使用echarts方法。
微信小程序图表制作利器：ECharts组件的使用与技巧
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
08-02 1910
为了兼容小程序 Canvas，Apache ECharts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。
微信小程序中使用Echarts（折线图）
前端-尔嵘
12-03 7836
一、微信中使用 Echars 直接在官网小程序使用Echarts中（文档-教程-在微信中使用Echarts），找到GitHub上的DEMO下载链接，官网有详细的使用步骤 官网：http://echarts.baidu.com/ github：https://github.com/ecomfe/echarts-for-weixin 首先，在pages/index目录下新建以下几个文件：inde......
小程序中使用echarts，案例一：实现仪表盘
qq_45290368的博客
12-26 953
小程序中使用echarts，案例一：实现仪表盘
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
微信小程序中使用ECharts 异步加载数据的方法
08-27
微信小程序中使用ECharts 异步加载数据的方法是指在微信小程序中使用ECharts 库异步加载数据的方法，该方法可以实现在小程序中加载数据并渲染图表。这种方法主要用于解决小程序中加载数据速度慢的问题。 ECharts 是...
微信小程序使用echarts实现统计图功能
04-24
本资源主要分享如何使用echarts实现数据的统计功能。 分享的本示例中，是使用echarts完成条形图的功能，主要因为示例中存在echarts的组件代码，该代码为echarts的源码，行数较多，为方便使用，便直接放在本资源中，...
微信小程序中使用echarts的实现方法
10-17
主要介绍了微信小程序中使用echarts的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在微信小程序中使用echarts
11-18
基于uniapp开发，如果需要在开发者工具中使用，需要自己修改语法
小程序基本命令
aiven1637的博客
10-30 3264
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序中使用Echarts
Clay_Guo的博客
04-17 647
前言 因为工作中需要，需要在微信小程序端中复刻web端的一些功能，在图表这一块，web端使用的是Echarts组件，经过调研发现，Echarts同样是支持微信小程序的，这里进行一个简单的记录。 准备 微信开发者工具 微信开发者平台自行下载 Echarts微信版 下载地址：https://github.com/ecomfe/echarts-for-weixin 我们主要用的就是其中的ec-canvas文件夹 Ps：官方的README文档其实已经写的非常详细了，但是很有可能大家会发现自己的这里没有任何图.
微信小程序使用Echarts图表
weixin_50874065的博客
06-22 3977
微信小程序是一种不需要下载安装即开即用的应用，可实现现用app应用70%的功能，用户扫一扫或者搜索即可使用，快捷方便使得微信小程序在我们生活中已经广泛使用。为了满足微信小程序开发者的需求，Echarts官方和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。这篇博客记录一下微信小程序中使用Echarts图表库
如何在uni-app微信小程序中使用echarts
04-27
在 uni-app 微信小程序中使用 ECharts，可以按照以下步骤进行： 1. 在项目根目录下的 `pages.json` 中添加 ECharts 的引入： ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } } ], "usingComponents": { "ec-canvas": "/static/ec-canvas/ec-canvas" } } ``` 2. 在 `index.vue` 中引入 ECharts： ```html <template> <view class="container"> <ec-canvas id="mychart-dom"></ec-canvas> </view> </template> <script> import * as echarts from 'echarts/core'; import { BarChart } from 'echarts/charts'; import { CanvasRenderer } from 'echarts/renderers'; echarts.use([BarChart, CanvasRenderer]); export default { data() { return { ec: { onInit: initChart } } } } function initChart(canvas, width, height, dpr) { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // 像素比 }); chart.setOption({ xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }); return chart; } </script> ``` 3. 在 `index.vue` 中设置 canvas 的宽高： ```css .container { width: 100%; height: 500rpx; } ``` 以上是在 uni-app 微信小程序中使用 ECharts 的基本流程，具体使用可以根据 ECharts 文档进行配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值