当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 用echarts在微信小程序同一个界面显示出多个图

用echarts在微信小程序同一个界面显示出多个图

2020年07月17日  | 移动技术网IT编程  | 我要评论
用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在微信小程序同一个界面显示出多个图
经过上一个博客创建完并且成功运行起一个图后，想要在同一个界面显示更多的图怎么设置？
直接上代码

<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="mychart-bars" ec="{{ ec2 }}"></ec-canvas>
</view>

直接又复制了一行<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bars" ec="{{ ec2 }}"></ec-canvas>改一下上边的id和ec值，id是随便改了个名字，有没有什么要求目前还不知道。然后把js里的函数复制一下，ec复制成ec2然后里边的值也改个名字，改完后的名字也就是复制后函数的名字。

data: {
    ec: {
      onInit: initChart
    },
    ec2: {
      onInit: onitChart
    },
    
  },

所以复制的函数名也就变成onitChart

import * as echarts from '../../ec-canvas/echarts' 
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;
  
}

function onitChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
   。。。
    
  };
  
  chart.setOption(option);
  return chart;
  
}

在option里写图表的信息就可以了。

今天写的这两个图在option插入了许多找了半天才找出来的值，很是不容易，一会下边我附带上GitHub源码。
在这里插入图片描述

本文地址：https://blog.csdn.net/qq_44497296/article/details/107394681

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网