小程序使用echarts , 数据动态赋值

    <view class="container" style="padding: 0;">
        <ec-canvas class="mt10" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" style="width: 100%;height: 600rpx;"></ec-canvas>
      </view>
{
  "usingComponents": {
    "ec-canvas": "../../../components/ec-canvas/ec-canvas"
  },
  "navigationBarTitleText": "店铺数据中心"
}

// pages/static/charts/index.js
import * as echarts from '../../../components/ec-canvas/echarts';
const APP = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let that = this;
    this.get_e_data();
  },
  get_e_data(){
    let that = this;
    setTimeout(function(){
      that.data.xData =['1', '2', '3', '4', '5', '6', '7']; 
      that.data.seriesData =[{
        name:'收益金额',
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line',
      },
      {
        name:'消费金额',
        data: [220, 220, 150, 80, 70, 130, 110],
        type: 'line'
      },]
      that.initChart(that.data.xData, that.data.seriesData)  //渲染月度数据
    },100)
  },
  initChart: function (xData, seriesData) {
    let that = this;
    let legend = [];
    seriesData.forEach(item=>{
      legend.push(item.name)
    })
    this.echartsComponnet = this.selectComponent('#mychart-dom-bar');  //查找页面的echart组件位置
    this.echartsComponnet.init((canvas, width, height) => {
     const chart = echarts.init(canvas, null, {
      width: width,
      height: height
     });
     var option = {
      title: {
        text: ''
      },
      legend: {
        data:legend, // ['收益金额','消费金额'],
        left: 'right'
      },
      xAxis: {
        type: 'category',
        data: xData,
      },
      yAxis: {
        type: 'value',
        // interval: interval,  // y轴间隔数
      },
      series: seriesData
    };
    chart.setOption(option);
    });
   },

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值