小程序使用 echarts 图表 初始化数据 动态加载数据

加粗样式

1. 先去echarts官网找小程序echarts组件 （echarts官网）并下载；或者直接github下载； 推荐直接下载zip，不要克隆，防止出现 bia个；

1. 将echarts-for-weixin-master下的ec-canvas放在你的项目目录中
   

4.开始引用echarts组件

我这里是单独做个个包
（1）首先在你的 page文件夹 的 js文件中 在page外引入echarts组件的js文件

import * as echarts from "../ec-canvas/echarts";

（2）在page文件夹 的json文件中 引入echarts组件的wxml文件

{
  "usingComponents": {
    "ec-canvas": "../ec-canvas/ec-canvas"
  }
}

（3）在page文件夹 的wxml文件中 使用ecahrts组件;注意你给的容器一定得有宽高

<view class="container—ec">
      <ec-canvas
        id="mychart-radar" //如果一个页面有多个echarts图标 那这些id必须区分开 因为js文件中就是用id区分每个图表区域的
        canvas-id="mychart-radar"
        ec="{{ ec }}" //这些名字都是随意起的 对应js你给他定义的名称就行
        class="radarmap"
      >
      </ec-canvas>
</view>

（4）回到page文件夹 的js文件中

//在page外定义一个函数用来获取数据并渲染到页面上
function data_bpbar(chart, ydata) {
  let option = {
  //这里写你的options配置项
  };
  chart.setOption(option);

  return chart;
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {},
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  initBprandar() {
    let chart;
    this.randarComponent.init((canvas, width, height, dpr) => {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr,
      });
      data_init(chart, 0);
      // **这里就是你要传输的数据 我就不写了 无非就是请求接口获取数据 这都懂的（比如上面我传了个 0
      //你也可以传递数组对象啥的）**
      this.chart = chart;
      return chart;
    });
  }},

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

  /**
   * 生命周期函数--监听页面显示
   */
   
  onShow: function () {
    this.randarComponent = this.selectComponent("#mychart-radar");
    //这个id要对应你在wxml里边图表的容器id
    this.initBprandar();
  },
**至此就结束了**

一、 主要就是在你要用echarts页面的四个文件夹中引用echarts 组件千万别出错

二、如果你遇到了 init is not a function 可能是你引入的有错误 或者是 在你要渲染图表的时候忘了再初始化了 需要再调一次 onShow 里边的这两个方法，切记切记（比如切换tab 条件筛选啥的）

这篇好文章是转载于：学新通技术网