小程序笔记（四）（Echarts图表）

张豆豆94

已于 2022-02-15 09:59:07 修改

阅读量856

点赞数

分类专栏：【微信小程序笔记】文章标签：小程序图表数据 echarts图表

于 2019-11-05 16:34:26 首次发布

本文链接：https://blog.csdn.net/weixin_42735261/article/details/102917910

版权

【微信小程序笔记】专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用echarts图表

1. 下载js文件

不要直接用echarts.js(文件太大，无法上传问题)，可自由选择所需图表、坐标系、组件进行打包下载

官网打包地址：https://www.echartsjs.com/zh/builder.html

2. 自定义组件ec-canvas

下载wx-canvas.js以及ec-canvas文件夹

3. 创建图表

在使用图表的页面json文件中引入组件

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

在使用图表的页面wxml文件中创建了ec-canvas 组件

<view class="container">
  <ec-canvas id="lineCanvas" canvas-id="lineChart" ec="{{ ec }}"></ec-canvas>
</view>

使用图表的页面js文件中，ec 的作用是使图表能够在页面加载后被初始化并设置

var app = getApp();
var util = require('../../../utils/util.js');
import * as echarts from '../../../utils/echarts'; //引入echarts.js
var Chart = null;
Page({

  /**
   * 页面的初始数据
   */
  data: {   
    ec: {
      onInit: true
    }
  },

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

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {    
    this.echartsComponnet = this.selectComponent('#lineCanvas');//注意这里的id要与wxml中写的id一致
    this.initChart();
    this.getStatistics();
  },
 //获取统计数据
  getStatistics: function() {
    var that = this;
    //显示加载动画
    wx.showLoading({
      title: '加载中',
      mask: true
    })
    //发起网络请求
    wx.request({
      url: url,
      method: "POST",
      header: {
        'content-type': 'application/json'
      },
      success: function(res) {
        wx.hideLoading();
        if (res.data.code == 0) {
          var data = res.data.data;
          var dateObj = []
          var cateObj = []
          for (var i in data) {
            dateObj.push(data[i].date)
            cateObj.push(data[i].count)
          }
          that.setData({
            dateList: dateObj,
            cateList: cateObj
          })
          //如果是第一次绘制
          if (!Chart) {
            that.initChart(); //初始化图表
          } else {
            that.setOption(Chart); //更新数据
          }
        } else {
          wx.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: 'none'
          })
        }
      },
      fail: function() {
        wx.hideLoading();
        wx.showToast({
          title: '连接超时',
          icon: 'none',
          duration: 1500
        })
      }
    })
  },
  //初始化图表
  initChart: function(xdata, ydata) {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      this.setOption(Chart);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  setOption: function(Chart) {
    Chart.clear(); // 清除
    Chart.setOption(this.getOption()); //获取新数据
  },
  // 设置表格展示样式
  getOption: function() {
    var that = this;
    // 指定图表的配置项和数据
    var option = {
      animation: false, //图表直接显示，动画显示
      xAxis: {
        type: 'category',
        data: that.data.dateList, //x轴上的数据是动态的
        disableGrid: true,//是否显示表格
      },
      yAxis: {
        type: 'value',
        name:'人数',
      },
      series: [{
        type: 'line',
        data: that.data.cateList, //y轴上的数据也是动态的
        symbol: 'none', //标记的图形
        smooth: true,//平滑的折线图
        itemStyle: {
          normal: {
            lineStyle: {
              color: '#3585fc',
              width:2
            }
          }
        }
      }],
      grid: { //组件离容器的距离
        y: '13%',//容器顶部距y轴上端
        y2: '10%',//容器底部距y轴原点
        x: '9%',//容器左侧距x轴原点
        x2: '5%',//容器右侧距x轴末端
      },

    }
    return option;
  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

使用柱状图时横坐标名称过长

1. 横坐标名称换行显示

      xAxis: {
        type: 'category',
        data: that.data.cateList, //x轴上的数据是动态的
        axisLabel: {//坐标轴刻度标签的相关设置
          interval: 0,//坐标轴刻度标签的显示间隔，在类目轴中有效。设置成 0 强制显示所有标签
          color: '#353535',
          formatter: function (value) {
            var valueDetal = value.split("-").join("");
            var ret = ""; //拼接加\n返回的类目项  
            var maxLength = 4; //每项显示文字个数  
            var valLength = valueDetal.length; //X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 
            if (rowN > 1) { //如果类目项的文字大于3,
              for (var i = 0; i < rowN; i++) {
                var temp = ""; //每次截取的字符串  
                var start = i * maxLength; //开始截取的位置  
                var end = start + maxLength; //结束截取的位置               
                temp = valueDetal.substring(start, end) + "\n";
                ret += temp; 
              }
              return ret;
            } else {
              return valueDetal;
            }
          }

        },
      },

2. 横坐标名称竖着显示或者倾斜显示

      xAxis: {
        type: 'category',
        data: that.data.cateList, //x轴上的数据是动态的
        axisLabel: {//坐标轴刻度标签的相关设置
          interval: 0,//坐标轴刻度标签的显示间隔，在类目轴中有效。设置成 0 强制显示所有标签
          rotate:20,//设置倾斜角度（当角度为90时为竖着显示）
          color: '#353535',//标签文字颜色
        }
     }