您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 小程序

微信小程序,实现Echarts,并获取数据渲染

时间:2023-04-04 16:22:58  来源:今日头条  作者:前端小学生

1、ehcats组件库可自行到echats官网下载,下载好之后放到你的项目包里面。

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

2、echarts.json 部分

首先在json文件里引入echarts组件

{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" //这里使用了相对路径 } }

2、echarts.html 部分

<view class="contAIner">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
<!-- 在这引入echarts组件标签 -->
</view>

这里ec-canvas绑定id就可以使用echarts组件

3、echarts.css 部分

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

组件ec-canvas默认宽高100%,它的宽高大小取决于它的父元素view标签

4、echarts.js 部分

import * as echarts from '../../ec-canvas/echarts';
// chart为图表实例,记得要声明为全局的
var chart = null
function initChart(canvas, width, height, dpr) {
      chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr
		});
      chart.showLoading() //显示Loading
      canvas.setChart(chart);
      var option = {
      title: {
      text: '获取数据中',
      left: 'center'
      },
      };
      chart.setOption(option);
      return chart;
}
Page({
      data: {
      ec: {
      onInit: initChart
      }
      },
      onLoad() {},
      getData() {
          //这里是模拟的数据请求,项目中请使用wx.request替换掉setTimeouot
          setTimeout(() => {
          chart.hideLoading() //隐藏Loading
          chart.setOption({
          title: {
          text: '获取数据完成',
          },
          legend: {
          data: ['A', 'B', 'C'],
          top: 50,
          left: 'center',
          backgroundColor: 'red',
          z: 100
          },
          grid: {
          containLabel: true
          },
          tooltip: {
          show: true,
          trigger: 'axis'
          },
          xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          // show: false
          },
          yAxis: {
          x: 'center',
          type: 'value',
          splitLine: {
          lineStyle: {
          type: 'dashed'
          }
          }
          // show: false
          },
          series: [{
          name: 'A',
          type: 'line',
          smooth: true,
          data: [18, 36, 65, 30, 78, 40, 33]
          }, {
          name: 'B',
          type: 'line',
          smooth: true,
          data: [12, 50, 51, 35, 70, 30, 20]
          }, {
          name: 'C',
          type: 'line',
          smooth: true,
          data: [10, 30, 31, 50, 40, 20, 10]
          }]
          })
      }, 1000);
},
   /**
   * 生命周期函数--监听页面初次渲染完成  根据项目需求在不同周期调用
   */
  onReady() {
    //获取数据
    this.getData()
    },
});

5、最终的效果图如下:

 

6、最后总结一下JS思路,首先import引入echats组件库,在data中定义好key,然后进行echats的初始化,在初始化中需要echats组件的配置信息(在echats官网示例里找),最后在生命周期函数中进行初始化函数的调用,把必要的参数传进去就可以出效果了。



Tags:小程序   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
京东小程序数据中心架构设计与最佳实践
一、京东小程序是什么京东小程序平台能够提供开放、安全的产品,成为品牌开发者链接京东内部核心产品的桥梁,致力于服务每一个信任我们的外部开发者,为不同开发能力的品牌商家提...【详细内容】
2024-03-27  Search: 小程序  点击:(9)  评论:(0)  加入收藏
我们一起解锁小程序开发新姿势
如今,鸿蒙开发日益受到广大开发者的关注,而小程序开发也早已成为互联网领域的热门话题。那么,我们不禁要问:是否有可能将这两者融为一体,将小程序开发的便捷与高效带入鸿蒙生态中...【详细内容】
2024-03-20  Search: 小程序  点击:(13)  评论:(0)  加入收藏
2024年微信小程序分账全攻略:对接流程详解,轻松实现资金分配
在微信小程序运营中,分账功能对于实现多方收益分配、优化资金流转至关重要。那么,微信小程序如何分账?又有哪些对接流程呢?跟着小编去看看吧!一、微信小程序分账概述微信小程序分...【详细内容】
2024-03-15  Search: 小程序  点击:(13)  评论:(0)  加入收藏
微信宣布规范“公众号文章诱骗点击小程序,骗取广告收益”行为
IT之家 3 月 14 日消息,微信公众平台运营中心今日发文称,平台近期发现部分创作者在文章中使用不完全或擦边的标题、擦边的封面和无意义或不完整的内容,并插入诱导性小程序卡片...【详细内容】
2024-03-15  Search: 小程序  点击:(16)  评论:(0)  加入收藏
抖音加大对短剧小程序推荐力度
新腕儿联合鞭牛士报道,2月26日消息,短剧近期数据平稳且持续发展,抖音加强了对短剧抖音小程序的推荐力度。以碧海剧场小程序为例,抖音短剧小程序向用户申请更多「通知信息」权限...【详细内容】
2024-02-26  Search: 小程序  点击:(38)  评论:(0)  加入收藏
一段微信小程序前端与后端连接的代码,带注解
微信小程序的前端和后端连接通常涉及到使用微信小程序提供的网络请求API与后端服务器进行通信。以下是一个简单的示例,展示如何使用微信小程序的前端代码向后端发送请求并处...【详细内容】
2024-01-24  Search: 小程序  点击:(55)  评论:(0)  加入收藏
小程序必须要安装部署SSL证书吗?
自2017年9月21日,微信发布一则《关于公众平台接口不再支持HTTP方式调用的公告》。明确表示,为保证数据传输安全,提高业务安全性,公众平台不再支持HTTP方式调用。应避免影响正常...【详细内容】
2024-01-02  Search: 小程序  点击:(70)  评论:(0)  加入收藏
一文了解什么是微信小程序
如果您无需下载和管理即可获得像原生 iOS 或 Android APP 一样流畅的体验会怎样?腾讯通过微信小程序实现了这一替代方案。一、什么是微信小程序?它们与原生应用程序和 H5 迷你...【详细内容】
2023-12-26  Search: 小程序  点击:(89)  评论:(0)  加入收藏
微信商户号怎么开通?教你申请0.2%费率商户码对接小程序公众号
随着移动互联网的快速发展,电子支付方式已经深入到人们的生活中,而微信支付作为中国领先的移动支付平台,在无数的应用场景中发挥着重要作用。这里先免费分享一个0.2费率的商户...【详细内容】
2023-12-16  Search: 小程序  点击:(63)  评论:(0)  加入收藏
小程序开发需要多少钱?小程序开发的真实成本:报价案例、费用价格表与开发周期解析
分享一个上海客户的微信小程序定制开发的需求,销售课程与相关商品。项目分为后台管理系统和小程序前端,功能不是太复杂,周期大概1个月,费用3万。大家可能比较关心几个地方,比如一...【详细内容】
2023-12-11  Search: 小程序  点击:(111)  评论:(0)  加入收藏
▌简易百科推荐
京东小程序数据中心架构设计与最佳实践
一、京东小程序是什么京东小程序平台能够提供开放、安全的产品,成为品牌开发者链接京东内部核心产品的桥梁,致力于服务每一个信任我们的外部开发者,为不同开发能力的品牌商家提...【详细内容】
2024-03-27  dbaplus社群    Tags:小程序   点击:(9)  评论:(0)  加入收藏
我们一起解锁小程序开发新姿势
如今,鸿蒙开发日益受到广大开发者的关注,而小程序开发也早已成为互联网领域的热门话题。那么,我们不禁要问:是否有可能将这两者融为一体,将小程序开发的便捷与高效带入鸿蒙生态中...【详细内容】
2024-03-20  前端充电宝  微信公众号  Tags:小程序   点击:(13)  评论:(0)  加入收藏
一段微信小程序前端与后端连接的代码,带注解
微信小程序的前端和后端连接通常涉及到使用微信小程序提供的网络请求API与后端服务器进行通信。以下是一个简单的示例,展示如何使用微信小程序的前端代码向后端发送请求并处...【详细内容】
2024-01-24    简易百科  Tags:代码   点击:(55)  评论:(0)  加入收藏
小程序必须要安装部署SSL证书吗?
自2017年9月21日,微信发布一则《关于公众平台接口不再支持HTTP方式调用的公告》。明确表示,为保证数据传输安全,提高业务安全性,公众平台不再支持HTTP方式调用。应避免影响正常...【详细内容】
2024-01-02  云诏    Tags:小程序   点击:(70)  评论:(0)  加入收藏
一文了解什么是微信小程序
如果您无需下载和管理即可获得像原生 iOS 或 Android APP 一样流畅的体验会怎样?腾讯通过微信小程序实现了这一替代方案。一、什么是微信小程序?它们与原生应用程序和 H5 迷你...【详细内容】
2023-12-26  小文智能    Tags:微信小程序   点击:(89)  评论:(0)  加入收藏
小程序开发需要多少钱?小程序开发的真实成本:报价案例、费用价格表与开发周期解析
分享一个上海客户的微信小程序定制开发的需求,销售课程与相关商品。项目分为后台管理系统和小程序前端,功能不是太复杂,周期大概1个月,费用3万。大家可能比较关心几个地方,比如一...【详细内容】
2023-12-11  久码小程序开发  今日头条  Tags:小程序   点击:(111)  评论:(0)  加入收藏
小程序技术分享:安全机制与运行机制
小程序凭借其高曝光率、开发成本低、运行更流畅等优势和特点,一经推出就被广泛使用,面对小程序的火爆,自然而然地,就有很多开发者转战小程序领域,本文主要带大家了解下小程序运行...【详细内容】
2023-12-07  前端实习生Findan    Tags:小程序   点击:(138)  评论:(0)  加入收藏
微信小程序的编译原理
2021年来,随着科技的进步,人们的生活水平也在不断提高。现在,微信小程序已经成为了现代人生活中不可或缺的一部分,它可以帮助我们更方便地查找信息,购物,预订机票和酒店,进行社交等...【详细内容】
2023-12-06  前端实习生Findan    Tags:小程序   点击:(124)  评论:(0)  加入收藏
模板小程序和订制开发小程序的区别?
相比外卖APP,外卖小程序是不用下载到手机的,所以对于用户来说更方便一点。简单方便的程序用户才更愿意使用。现在不少商家越来越重视外卖小程序开发,想通过外卖小程序冲进这片...【详细内容】
2023-11-24  重庆洺宸传媒    Tags:小程序   点击:(230)  评论:(0)  加入收藏
一分钟学会用宝塔面板搭建小程序
宝塔面板搭建小程序怎样用?想要使用宝塔面板搭建小程序?这里是实用教程,帮助您快速上手。在本教程中,我们将扼要了解宝塔面板的基础知识,并一步步演示怎么搭建一个小程序。第一步...【详细内容】
2023-11-15    网络  Tags:小程序   点击:(190)  评论:(0)  加入收藏
站内最新
站内热门
站内头条