小程序笔记(四)(Echarts图表)_weixin_42735261的博客-程序员宝宝

技术标签: 小程序图表数据  【微信小程序笔记】  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',//标签文字颜色
        }
     }

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42735261/article/details/102917910

智能推荐

solrconfig.xml基本配置_rentuo53的博客-程序员宝宝

solrconfig.xml配置文件主要定义了SOLR的一些处理规则,包括索引数据的存放位置,更新,删除,查询的一些规则配置。  1、luceneMatchVersion:表示solr底层使用的是lucene5.5.5&amp;lt;luceneMatchVersion&amp;gt;5.5.5&amp;lt;/luceneMatchVersion&amp;gt; 2、lib:表示solr引用包(插件或依赖...

Android开发——RecyclerView的使用_qinxuexiang_blog的博客-程序员宝宝

使用RecyclerView 加载大量数据集已经有一端时间了,但是一直没有对RecyclerView 总结过。今天再一次使用到RecyclerView ,就在这里做一次详细的总结。引入库使用RecyclerView 首先需要引入类。在build.gradle文件中引入该类。implementation 'com.android.support:recyclerview-v7:26.1...

Convert string to hex « Python recipes « ActiveState Code_a13393665983的博客-程序员宝宝

Convert string to hex « Python recipes « ActiveState Code Convert string to hex « Python recipes « ActiveState Code Convert string...

自抗扰控制(ADRC)仿真系统(matlab/simulink)的搭建_乄微风绕指柔乄的博客-程序员宝宝_自抗扰控制

一、现在关于自抗扰控制技术方面的研究已经比较成熟了,基本上了解结构以后都可以找到历程实现,今天简单总结一采用自抗扰控制的仿真系统搭建,不必畏惧,熟悉皆可达。1.首先自抗扰控制分为TD(跟踪微分器),非线性组合,ESO扩张状态观测器。而每部分的公式推导均可在《自抗扰控制技术-估计补偿不确定因素的控制技术》这本书中找到,很推荐,如果有些不了解的也可以搜索韩老师的论文看看。2.按照一般论文流程,先介绍整体结构,框图如下:其实结构也挺少,使用习惯以后,其实很好理解。3.接下来按照每个部分简单做一个介绍。

poco 库streamsocket 发送数据失败错误码获取_ybn187的博客-程序员宝宝

使用sendBytes发送数据,函数实现如下:int StreamSocket::sendBytes(const void* buffer, int length, int flags){ return impl()-&amp;gt;sendBytes(buffer, length, flags);}int StreamSocket::sendBytes(FIFOBuffer&amp;am..._1671465600

Java day02_jeffery11586的博客-程序员宝宝

1、什么是常量?常量的分类?字面值常量表现形式有哪些?(1)在程序执行的过程中,其值不发生改变的量(2)分类:     A:字面值常量     B:自定义常量(后面讲)(3)字面值常量     A:字符串常量 &quot;hello&quot;     B:整数常量     12,23     C:小数常量     12.345     D:字符常量     'a','A','0'...

随便推点

【JS】- 位运算符在 JS 中的妙用_code_kd的博客-程序员宝宝_js位运算符的用法

按位与(AND)&amp;将数字转换成二进制,然后进行与操作,再转换回十进制//1的二进制表示为00000000000000000000000000000001//3的二进制表示为00000000000000000000000000000011//--------------------------------------------------//1的二进制表示为00000000000000000000000000000001console.log(...

docker安装mysql并配置文件_docker 安装mysql5.7 加my.cnf_梦醒马亡的博客-程序员宝宝

重点,复制之前的my.cnf 要能用,touch一个是不行的;1、先新建文件夹: mkdir -p /docker/mysql/{logs,conf,data}2、获取镜像:docker pull mysql:5.73、启动:docker run -p 3306:3306 --privileged=true -v /docker/mysql/logs:/logs -v /docker/mysql...

关于解决Windows Server 2003服务器共享服务自动关闭的问题_枫不止的博客-程序员宝宝

问题描述:服务器系统为Windows Server 2003 Enterprise Edition sp2,对文件夹开启共享,可过不了几分钟,别人就访问不了我的共享,我的共享也自动消失了,点右键也没了共享的选项。打开服务列表,看到server、computer brows

复杂性应对之道 - 领域建模_txxs的博客-程序员宝宝

原文地址:http://www.uml.org.cn/sjms/201812133.asp都是大佬写的文章,建议看原文 为什么要领域建模 维护过企业级业务系统的同学,基本上没有一个不抱怨业务代码烂的,过程式的面条代码充斥着屏幕,程序员的心力和体力都经受着极大的考验,怎么破? DDD革命 DDD革命性在于,领域模型准确反映了业务语言,而传统J2EE或Spring+Hibernate等事务性编程模型只关心数据,这些数据对象除了简单setter/getter方法外,没有任何业

android glide本地图片,Glide下载图片并保存到本地_清草子的博客-程序员宝宝

活不多说 上代码:Observable.create(new ObservableOnSubscribe() {@Overridepublic void subscribe(ObservableEmitter e) throws Exception {//通过gilde下载得到file文件,这里需要注意android.permission.INTERNET权限e.onNext(Glide.with...

nodejs(express)链接操作mongodb_JXNUleo的博客-程序员宝宝

1.安装mongodb数据库,官网下载地址:https://www.mongodb.com/download-center#community2.官方推荐node-mongodb-native来操作mongodb,实际开发中估计更多会选用类似mongoose的模块来操作来提升开发效率,mongoose安装:npm install -g mongoose –save(-g表示全局,–save存储到本地

推荐文章

热门文章

相关标签