小程式使用Echarts圖表記錄

目錄

使用echarts圖表

1. 下載下傳js檔案

2. 自定義元件ec-canvas

3. 建立圖表

使用柱狀圖時橫坐标名稱過長

1. 橫坐标名稱換行顯示

2. 橫坐标名稱豎着顯示或者傾斜顯示

• 使用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',//标簽文字顔色
        }
     }