首页 > 编程语言 >小程序分包放置echarts组件

小程序分包放置echarts组件

时间:2022-12-02 18:35:31浏览次数:36  
标签:canvas .. chart ec commonPackage 分包 组件 echarts

app.json

  "subPackages": [
    {
      "root":"commonPackage",
      "pages":[]
    }
  ],

pages同级目录加commonPackage

分包中放入echarts组件信息

使用

xx.json

上面是分包组件,下面是加载前替换组件

  "usingComponents": {
    "ec-canvas": "../../../commonPackage/components/echarts/ec-canvas"
  },
  "componentPlaceholder": {
    "ec-canvas": "view"
  },

xx.js

// 引入
let echarts require('../../../commonPackage/components/echarts/echarts.js', utils => { echarts = utils }) let chart = null; // data: ec: {},
// func // 初始化图表 initChart(canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); chart.setOption(this.data.option); return chart; }, // 获取数据后渲染 this.setData({ ec: { onInit: this.initChart } })

 

标签:canvas,..,chart,ec,commonPackage,分包,组件,echarts
From: https://www.cnblogs.com/jqynr/p/16945314.html

相关文章

  • ReactHook父组件调用子组件的方法,且子组件用了connect
    ReactHook父组件调用子组件的方法,且子组件用了connect子组件1、引入useImperativeHandle,forwardRef2、子组件由function改成let,接收prop和ref,并从props中结构出refI......
  • echarts中国地图
    initEchartsFive(){   letthat=this;   varmyChart=this.$echarts.init(document.getElementById("map"));   //axios.get("map.json").the......
  • VUE组件之间的参数传递与方法调用
    父组件向子组件父组件向子组件传参:父组件中的子组件标签中增加:param="param"子组件中增加props接受参数(注意props需要与data同级)props:{param:{typ......
  • Flutter不常用组件(二)
    ColoredBox一般我们想要一个带有背景颜色的组件我们会使用哪个组件?当然第一个想到的就是Container。其实在Flutter中还要一个专门用来设置颜色的组件ColoredBox。该组......
  • vue3组件通信,网上一大堆,这里直说常用的两个,props,emit
    props(父传子,多用于子组件的数据渲染)【父】<div><comp-son:name="name":age="age"/>//向子组件传值</div>setup(){conststate=reactive({......
  • 使用echarts 报错[Vue warn]: Error in mounted hook: “TypeError: Cannot read prop
    出现以下问题是在mounted()中使用官方示例的时候报了以下错误:Errorinmountedhook:“TypeError:Cannotreadproperty‘init’ofundefined”或Cannotreadproper......
  • vue局部刷新 (组件重载)
     组件重载的运用是当组件的数据产生了变化之时,需要通过重载来实现组件页面的刷新,而不是重新刷新URL进行重新请求,也可以理解为是局部刷新 步骤:在父级页面通过......
  • Vue2适用的视频组件
    Vue2适用的视频组件官方文档路径西瓜视频官方文档:http://v2.h5player.bytedance.com/gettingStarted/随笔制作参考:https://juejin.cn/post/7023547598724136990#hea......
  • 组件
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"></script> <title></title> </head> ......
  • Flutter不常用组件(一)
    Flutter目前拥有400多个组件,其中常用的也就那么几个。大家学习Flutter一般都是看的其他人的教程,或者官网的文档教程,这些教程里用到的组件只有那些常用的,更多的组件需要......