微信小程序中使用echarts的实现方法
刚开始学微信小程序,有说的不对的地方大家可以提出!
首先体验示例小程序
在微信中扫描下面的二维码即可体验 ECharts Demo:
下载
为了兼容小程序 Canvas,我们提供了一个小程序的组件,用这种方式可以方便地使用 ECharts。
首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
其中,ec-canvas 是我们提供的组件,其他文件是如何使用该组件的示例。
ec-canvas 目录下有一个 echarts.js,默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要,可以自行从 ECharts 项目中下载最新发布版,或者从官网自定义构建以减小文件大小。
引入组件
微信小程序的项目创建可以参见微信公众平台官方文档。
在创建项目之后,可以将下载的 ecomfe/echarts-for-weixin 项目完全替换新建的项目,然后将修改代码;或者仅拷贝 ec-canvas 目录到新建的项目下,然后做相应的调整。
如果采用完全替换的方式,需要将 project.config.json 中的 appid 替换成在公众平台申请的项目 id。pages 目录下的每个文件夹是一个页面,可以根据情况删除不需要的页面,并且在 app.json 中删除对应页面。
创建图表
首先,在 pages/bar 目录下新建以下几个文件:index.js、 index.json、 index.wxml、 index.wxss。并且在 app.json 的 pages 中增加 ‘pages/bar/index'。
index.json 配置如下:
{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }
这一配置的作用是,允许ECharts在 pages/bar/index.wxml 中使用 组件。注意路径的相对位置要写对,如果目录结构和本例相同,就应该像上面这样配置。
index.wxml 中,ECharts创建了一个 组件,内容如下:
<view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view>
其中 ec 是一个ECharts在 index.js 中定义的对象,它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下:
function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { ... }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initChart } } });
这对于所有 ECharts 图表都是通用的,用户只需要修改上面 option 的内容,即可改变图表。option 的使用方法参见ECharts 配置项文档。对于不熟悉 ECharts 的用户,可以参见 5 分钟上手 ECharts 教程。
下面是小程序的折线图demo:
1、首先是在pages文件夹下面新建line文件夹,里面对应的line.js、line.json、line.wxml、line.wxss
2、line.xml文件下面的代码:
3.line.wxss代码如下:
4、line.json代码:(注意该路径是我项目的路径,大家改成自己项目路径即可)
5、line.js代码:
最终完成效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 微信小程序中使用ECharts 异步加载数据实现图表功能
- 微信小程序中使用ECharts 异步加载数据的方法
- 在微信小程序中使用Proxy方法实现setData
- 微信小程序上拉刷新和下拉加载2种方法实现,onPullDownRefresh,scroll-view使用
- 走进C++程序世界-------类的定义和使用(数据成员和方法成员,析构函数,构造函数,内联实现)
- 编写的vs2005水晶报表程序在vs2008下正常使用的一些实现方法
- 微信小程序之选项卡的实现方法
- ASP.NET 计划任务实现方法(不使用外接程序,.net内部机制实现)
- 微信小程序例子——使用picker实现时间和日期选择框
- 微信小程序 配置顶部导航条标题颜色的实现方法
- 微信小程序使用picker实现时间和日期选择框功能【附源码下载】
- VC中使用ADO访问数据库技术程序实现方法
- 使用fragment实现微信界面的方法
- iOS - 自主实现类似微信语音视频信息聊天 (idoubs详细使用方法)1.0
- 微信小程序实现页面跳转传值的方法
- 关于微信小程序使用不了push()方法的解决办法
- 微信小程序--使用swiper实现滚动广告
- 使用微信+京东实现自动化赚钱的技术方法
- 【转】五步教你实现使用Nginx+uWSGI+Django方法部署Django程序(上)
- 4.第三单元任务三实训:编写一个类ExceptionTest,在main方法中使用try-catch-finally语句结构实现:在try语句块中,编写两个数相除操作,相除的两个操作数要求程序运行时用