小程序echart动态赋值

首先，当你到达这一步时，你已经吧echart引入小程序。所以直接进入主题（如小程序里还未引入echart,可参考https://blog.csdn.net/weixin_41760500/article/details/100540583）

可以先看整体效果，还附带了tab切换，可自行删改：

1、wxml

<view class="slid-wrap">
  <!-- 选项栏 -->
  <view class="title">
    <view wx:for="{
    
    {list}}" wx:key="index" data-index="{
    
    {index}}" class="list_item {
    
    {activeIndex == index ? 'on' : ''}}" bindtap="tabClick">{
    
    {
    
    item}}
    </view>
  </view>
  <!-- 内容 -->
  <view class="content">
    <view style="display:{
    
    {activeIndex !== 0 ? 'none' : 'block'}}">
      <view class="container">
        <ec-canvas id="mychart-one" canvas-id="mychart-multi-one" ec="{
    
    { ec }}"></ec-canvas>
      </view>
    </view>
    <view style="display:{
    
    {activeIndex !== 1 ? 'none' : 'block'}}">1</view>
    <view style="display:{
    
    {activeIndex !== 2 ? 'none' : 'block'}}">3</view>
    <view style="display:{
    
    {activeIndex !== 3 ? 'none' : 'block'}}">4</view>
  </view>
</view>

2、wxss

.container{
    
    
  padding: 0;
}
ec-canvas{
    
    
  width:700rpx;    
  height: 700rpx;
  margin: 0 auto;
}
  .slid-wrap .title {
    
    
    display: flex;
    flex-direction: row;
  }
  .slid-wrap .title .list_item {
    
    
    flex-grow: 1;
    box-sizing: border-box;
    height: 85rpx;
    font-size: 32rpx;
    text-align: center;
    line-height: 85rpx;
    border-bottom: 4rpx solid #eee;
  }
  .slid-wrap .title .on {
    
    
    border-bottom: 4rpx solid #0770EB;
    color: #0770EB;
  }

3、js

	import * as echarts from '../../../ec-canvas/echarts.min';
function setOption(chart, xlist, ylist1, ylist2) {
    
    
  var option = {
    
    
    legend: {
    
    
      data: ['邮件营销', '联盟广告']
    },

    xAxis: {
    
    
      type: 'category',
      boundaryGap: false,
      data: xlist
    },
    yAxis: {
    
    
      type: 'value'
    },
    series: [
      {
    
    
        name: '邮件营销',
        type: 'line',
        data: ylist1
      },
      {
    
    
        name: '联盟广告',
        type: 'line',
        data: ylist2 
      }
    ]
  };
  chart.setOption(option);
}
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    ec: {
    
    
      lazyLoad: true
    },
    xlist: [],
    ylist:[],
    ylist2:[],
    list: ['全款', '待收货', '待发货', '已收货'],
    activeIndex: 0
    
  },
  // tab切换
  tabClick(val) {
    
    
    this.setData({
    
    
      activeIndex: val.currentTarget.dataset.index
    })
  },
  
  getOneOption:function(){
    
    
    this.setData({
    
    
      xlist: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      ylist: [120, 132, 101, 134, 90, 230, 210],
      ylist2:[220, 182, 191, 234, 290, 330, 310]
    })
    this.init_one(this.data.xlist, this.data.ylist, this.data.ylist2)
  },
  init_one: function (xdata, ylist1, ylist2) {
    
               //初始化第一个图表
    console.log(this.oneComponent)
    this.oneComponent.init((canvas, width, height) => {
    
    
      const chart = echarts.init(canvas, null, {
    
    
        width: width,
        height: height
      });
      setOption(chart, xdata, ylist1, ylist2)  //赋值给echart图表
      this.chart = chart;
      return chart;
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
    this.oneComponent = this.selectComponent('#mychart-one');
    this.getOneOption();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
    
  
    
  },

})

请放心复制，绝逼能出来，注意import的引入echart路径需和你自己的保持一致
分析：
1、页面刚进来就调用oneComponent、getOneOption，其中getOneOption可以看成调接口拿数据的方法。
2、拿到数据后初始化我们的表格init_one，并把值传给setOption。
3、setOption拿到值后，赋值给对应的X轴，y轴