微信小程序--echarts实现双y轴

最新推荐文章于 2023-06-22 00:00:00 发布
最新推荐文章于 2023-06-22 00:00:00 发布
阅读量1.6k 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44531304/article/details/89022820
版权 
const App = getApp();
import * as echarts from '../../ec-canvas/echarts'; //引入echarts.js
var barec = null

Page({
   
  onShareAppMessage: function (res) {
   
    return {
   
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () {
    },
      fail: function () {
    }
    }
  },
  data: {
   
    ec: {
   
      onInit: function (canvas, width, height) {
   
        barec = echarts.init(canvas, null, {
   
          width: width,
          height: height
        });

        canvas.setChart(barec);
        return barec;
      }
    },
  },

  onReady() {
   
  },

  onLoad:
最低0.47元/天 解锁文章
吴小傻0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序遍历Echarts图表实现多个饼图
01-03
如何在微信小程序中使用Echarts可以看我的另一个教程：点击查看 首先看一个简单的例子 1.wxml文件 2.js文件 import * as echarts from '../../common/ec-canvas/echarts'; function initChart(canvas, width, height) { c
用echarts在微信小程序同一个界面显示出多个图
qq_44497296的博客
07-16 2810
用echarts在微信小程序同一个界面显示出多个图 经过上一个博客创建完并且成功运行起一个图后，想要在同一个界面显示更多的图怎么设置？ 直接上代码 <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> <ec-canvas id="mychart-dom-bar" canvas-id="mychar
小程序使用echarts，实现左右双Y轴，动态获取数据，生成折线图
牛哞哞杂记
10-02 4301
微信小程序使用echarts，实现左右双Y轴，动态获取数据，生成折线图 本来使用的是wxcharts，但发现实现不了左右双y轴的效果，就换成echarts 要实现的效果如下： 效果图。。。 要实现这样的效果，需要以下几步： （1）去github下载插件，放进自己的项目里 呐，链接 ===>点击这里 只需要将名称是ec-canvas的文件夹放进自己项目里。 像这样： 小图片。。。 （2）分别写...
小程序多个echars_微信小程序中使用echarts以及踩坑总结
weixin_39636696的博客
12-22 1104
人在家中坐，锅从天上来。半个月前本来在家写着一个项目，还没来得及提测，领导突然一个电话，需要立刻去支援另一个项目，一打听，一个烂尾半年的项目，纵使内心不愿意，还是要去啊。因为鲁迅说过，生活就像强*，既然不能反抗，那就好好享受吧。这个项目分为PC端、用户端小程序和商家端小程序，这里主要讲讲在商家端中的某个模块，需要用到数据统计图表，当时觉得有两个插件不错：因为之前在项目中使用echarts比较多，所...
微信小程序遍历Echarts图表，实现多个饼图
weixin_34409822的博客
01-03 1619
如何在微信小程序中使用Echarts可以看我的另一个教程：点击查看 首先看一个简单的例子 1.wxml文件 <view style='width:100%;height:200rpx'> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canva...
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
微信小程序-图表charts组件
06-12
在微信小程序中，charts组件通常由第三方库提供，例如ECharts-for-WeChat或wx-charts，它们提供了丰富的图表类型和自定义选项，帮助开发者实现数据可视化。 要使用charts组件，首先需要引入相关的库。这通常涉及到...
微信小程序使用echarts获取数据并生成折线图
10-16
在微信小程序中，我们可以借助ECharts的微信小程序适配版本来实现数据的可视化。 首先，要使用ECharts，你需要从GitHub上下载微信小程序版的ECharts插件，并将其放入项目的相应目录。通常，你只需要将名为`ec-...
微信小程序开发-股票分时图K线图案例源码.zip
11-21
本案例源码提供了实现这一功能的具体步骤和代码，是学习微信小程序图表展示的一个很好的实践素材。 首先，我们要理解"分时图"和"K线图"在股票交易中的意义。分时图是以时间为横轴，价格为纵轴，显示股票一天内价格...
vue使用el-table根据服务端json数据动态合并列
zhy的博客
10-16 1148
效果图 服务端数据json 模拟数据，代替业务敏感数据，如果服务端没有排序，需要先排序处理 [ {"name":"test","number":0,"type":0}, {"name":"test2","number":0,"test":0}, {"name":"test2","number":0,"test":1} ] 前端数据封装处理 table <el-table max-height="400" size="small" :data="list" :span-method.
小程序多个echars_微信小程序教程之-小程序中使用echarts
weixin_39717026的博客
12-22 354
微信小程序使用echarts教程平时经常在web系统中使用折线图、柱状图、仪表盘等等等图表展示数据，在浏览器页面中我们为了方便经常使用echarts，官网教程也写的很清楚。但是在微信小程序中我们同样有这种需求，那么如果直接用canvas，那么久太麻烦了，说不定一个折线图画一上午！，所有瞬间就会想到echarts等框架，但是echarts官网没有小程序版，不过！！！已经有人在github发布echa...
【uniapp】mpvue中循环生成多个相同的echarts水球图表，并且数据动态
一位前行者的博客
10-24 2114
由于是一个页面显示多个图表，所以还需要参考：(https://github.com/F-loat/mpvue-echarts/blob/master/examples/src/pages/demos/multiCharts.vue)既然是动态生成，option也可以不一样，正常情况下参数从function onInit(canvas, width, height)中传过来，但是参数是固定的，不能随便增加。，而且必须唯一，不唯一的话只能显示一个，其他的不会显示。以上例子写得很清楚，例子也是可行的。
【微信小程序】使用echarts实现一个界面动态刷新多个柱状图
WCQ的博客
04-05 3480
最近在写微信小程序遇到了图表相关的问题，项目要求是要用柱状图，同时由于数据较多，需要将一组数据用多个图表表示，而且还要实现动态刷新数据。 关于echarts的下载和引入不多加介绍。 效果图 这里只取一部分数据做展示 JS部分 定义全局变量 import * as echarts from '../../utils/ec-canvas/echarts'; //引入echarts.js var da...
微信小程序循环显示多个Echarts图表，动态渲染数据
weixin_52046784的博客
09-08 2354
需求：需要在微信小程序中循环显示多个Echarts图表，动态渲染Echarts数据。 经查询，选择使用echarts插件。 在echarts官网中获取ec-canvas组件，放入至微信小程序中 1、wxml：在标签中把数据通过父传子的方式传过去，子组件接收 <view wx:for="{{tabContent}}" wx:key="studentId"> <!-- 上线用 --> <ec-canvas id="mychart-dom-line"
小程序如何一个页面生成多个cavas(这个是根据后台返回的二维码网址的数量决定的)并将多张cavas保存在本地
weixin_43831302的博客
02-29 976
这个只要是利用循环把数据进行渲染，包括保存图片在本地也是利用循环 具体代码如下 wxml <canvas canvas-id="canvas{{index}}" wx:for='{{ cavasList }}' wx:key='index' class='to-absolute' style='z-index:{{ cavasList.length-index }}'&gt...
微信小程序中使用echarts(多个多环状图示列)
zhoulib__的博客
10-23 1638
主要用到的插件ec-canvas 所有的参数基本都和百度那边的echarts相同，部分功能可能小程序上面是没有滴 GitHup地址：一个完整的小程序下载下来可以直接运行 注意在使用时，因为ec-canvas的性能问题有可能会渲染失败，在确保获取到数据之后也要使用setTimeOut去延迟渲染，确保可以渲染成功 为了防止渲染失败或者卡死 ：建议在要渲染的时候先把 数据处理完之后一次性渲染，防止重复渲染，就目前而已性能真的不高，也有点点不稳定，当时是这是一个很不错的图表解决方案 这是我处理完接口之后的数据
小程序使用echarts和echarts配置项总结（全网最简单详细）
最新发布
林靖焙的博客
06-22 5984
全网最简单详细的小程序使用echarts教程，干货满满！
微信小程序+canvas+echarts循环数据生成折线图
Upward Force的博客
06-29 1435
1、下载GitHub上的 ecomfe/echarts-for-weixin 项目 2、拷贝 ec-canvas 目录到自己的项目下 3、效果预览 4、在需要的页面创建折线图 test.json { "usingComponents": { "ec-canvas": "../../lib/ec-canvas/ec-canvas" } } test.wxml <view class="box" wx:for="{{ecLine}}" wx:key="index"> &
微信小程序使用echarts（解决echarts双轴刻度显示问题）
m0_55546349的博客
12-22 1095
首先，下载echarts微信版 地址：传送门：github地址 下载后打开，如图所示： 将下载好的文件中 ec-canvas目录 放在小程序项目目录中即可。如下图所示： 然后在需要的地方引入即可。 下面来运用一下，示例： 解决echarts双轴刻度显示问题 var dataList1=[223,533,24,43,56,23,36]; var dataList2=[343,45,353,243,554,443,22]; var maxa = Math.max.apply(null, dataList
微信小程序开发如何使用ECharts柱状图，请给出详细的使用步骤，并写一个demo给详细的注释
06-03
好的，以下是使用ECharts柱状图的详细步骤： 1. 首先，在微信小程序项目中引入ECharts库。可以通过npm进行安装，也可以手动下载并放置在项目目录中。同时，需要在wxml文件中引入ECharts的canvas组件： ```html <!-- index.wxml --> <view class="container"> <ec-canvas id="mychart"></ec-canvas> </view> ``` 2. 在js文件中引入ECharts并获取canvas对象： ```javascript // index.js import * as echarts from '../../ec-canvas/echarts'; Page({ onReady: function () { // 获取组件 this.ecComponent = this.selectComponent('#mychart'); // 初始化图表 this.initChart(); }, // 初始化图表 initChart: function () { this.ecComponent.init((canvas, width, height) => { // 初始化echarts const chart = echarts.init(canvas, null, { width: width, height: height }); // 设置图表配置项 const option = { // ... }; // 使用刚指定的配置项和数据显示图表 chart.setOption(option); // 将图表实例绑定到this上，方便其他方法调用 this.chart = chart; return chart; }); } }) ``` 3. 在option中设置柱状图的相关属性： ```javascript // ... const option = { // 柱状图的标题 title: { text: '柱状图示例' }, // 柱状图的x轴 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 柱状图的y轴 yAxis: { type: 'value' }, // 柱状图的数据 series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }; // ... ``` 4. 最后，通过调用chart.setOption方法将图表渲染到canvas中： ```javascript // ... // 使用刚指定的配置项和数据显示图表 chart.setOption(option); // ... ``` 这样，我们就成功地在微信小程序中使用了ECharts柱状图。 以下是一个完整的demo，其中包含了详细的注释： ```html <!-- index.wxml --> <view class="container"> <ec-canvas id="mychart"></ec-canvas> </view> ``` ```javascript // index.js // 引入ECharts库 import * as echarts from '../../ec-canvas/echarts'; Page({ onReady: function () { // 获取组件 this.ecComponent = this.selectComponent('#mychart'); // 初始化图表 this.initChart(); }, // 初始化图表 initChart: function () { this.ecComponent.init((canvas, width, height) => { // 初始化echarts const chart = echarts.init(canvas, null, { width: width, height: height }); // 设置图表配置项 const option = { // 柱状图的标题 title: { text: '柱状图示例' }, // 柱状图的x轴 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 柱状图的y轴 yAxis: { type: 'value' }, // 柱状图的数据 series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }; // 使用刚指定的配置项和数据显示图表 chart.setOption(option); // 将图表实例绑定到this上，方便其他方法调用 this.chart = chart; return chart; }); } }) ``` 希望能对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值