微信小程序中使用echarts并且动态获取数据

25 篇文章 1 订阅
1 篇文章 0 订阅

初步的引入在这里 小程序中使用echarts


在页面或者自定义的组件中都可以,下边的例子:用的是自定义组件

在js文件中

import * as echarts from "../ec-canvas/echarts"
var Chart = null;
Component({
 properties: {

 },
 data: {
    ec: {
      // onInit: initChart,
      lazyLoad: true, // 延迟加载
    },
    echartsData:{},//图表的数据,
  },
  lifetimes: {
    ready() {
      this.echartsComponnet = this.selectComponent('#mychart-dom-bar');//一定要初始化
      this.init_echarts(); //初始化图表
    }
  },
  methods:{
  	 init_echarts() {
      this.echartsComponnet.init((canvas, width, height) => {
        // 初始化图表
        Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        Chart.setOption(this.getOption());
        // 注意这里一定要返回 chart 实例,否则会影响事件处理等
        return Chart;
      });
    },
    getOption(){
    	var option={
    		//这里是你的echarts配置项,从后端接口拿到的数据就可以使用
    	}
    	return option;
    }
  }
})
  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值