微信小程序中使用echarts並且動態獲取數據

初步的引入在這裏 小程序中使用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;
    }
  }
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章