zoukankan      html  css  js  c++  java
  • 小程序接入Echarts组件库

    十年河东,十年河西,莫欺少年穷

    学无止境,精益求精

    1、引入Echarts组件库,可参考:https://echarts.apache.org/handbook/zh/how-to/cross-platform/wechat-app/#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts

    2、根据1的描述,下载GitHub文件包,鄙人已下载好,并放入了博客园主页中,下载地址:https://files.cnblogs.com/files/chenwolong/echarts-for-weixin-master.zip

    示例代码,我随便放的目录如下:

     3、新建小程序页面,Echars,并引入组件库,组件库大概500KB,因此,建议使用分包技术

    Echars.json 中引入组件

    {
      "usingComponents": {
        "ec-canvas": "/utils/Echarts/ec-canvas/ec-canvas"
      }
    }

    4、Echars.js 中引入主类库 ec-canvas/echarts.js

    import * as echarts from '../../utils/Echarts/ec-canvas/echarts';// 数据

    Echars.js 整体代码如下:

    // pages/echarts/echarts.js
    import * as echarts from '../../utils/Echarts/ec-canvas/echarts';// 数据
    var data = [{
      X: "12日",
      Y: 100
    }, {
      X: "13日",
      Y: 100
    }, {
      X: "14日",
      Y: 100
    }, {
      X: "15日",
      Y: 100
    }, {
      X: "16日",
      Y: 100
    }, {
      X: "17日",
      Y: 100
    }, {
      X: "18日",
      Y: 100
    }]
    // 存储住首次调用函数的参数  方便后续调用时传参取值
    var unit = '%'
    var canvas1 = ''
    var width1 = ''
    var height1 = ''
    var dpr1 = ''
    
    function initChart(canvas, width, height, dpr) {
    
      canvas1 = canvas
      width1 = width
      height1 = height
      dpr1 = dpr
      const chart = echarts.init(canvas, null, {
         375,
        height: height,
        devicePixelRatio: dpr
      });
      canvas.setChart(chart);
    
    
      var option = {
        color: "#6c5ce7",
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: "8%",
    
        },
        xAxis: [{
          type: 'category',
          data: data.map(A => A.X),
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: data.map(A => A.Y),
        }]
      };
      chart.setOption(option);
      return chart;
    
      //柱状图
    
    }
    
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        title: {
          type: String,
          value: ""
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        ec: {
          onInit: initChart
        },
      },
      lifetimes: {
        attached: function () {
          // 在组件实例进入页面节点树时执行
          this.GetData();
        }
      },
      /**
       * 组件的方法列表
       */
      methods: {
        GetData() {
          let that = this;
          let p = new Promise((resolve, reject) => {
            var result = [{
              X: "12日",
              Y: 96
            }, {
              X: "13日",
              Y: 92
            }, {
              X: "14日",
              Y: 100
            }, {
              X: "15日",
              Y: 90
            }, {
              X: "16日",
              Y: 98
            }, {
              X: "17日",
              Y: 99
            }, {
              X: "18日",
              Y: 97
            }];
            resolve(result);
             
             
            })
            .then((result) => {
              data = result;
            })
        }
      }
    })
    View Code

    这里需要说明的是:

    1、Grid 参数

        grid: {
          top: "8%",
        },

    可用于页面的布局。设置Ecahts 图表内部距离上右下左的距离。

    例如我们修改距离Ecahts 图表顶部线的距离为38%,

     则效果为:

    2、ec-canvas.wxml 组件

     可通过修改ec-canvas.wxml 组件的样式或其他内容,来影响项目的Etcahts 图标对外布局。

    例如我加了一个margin属性

     那么,整体布局被改变

     其他参数说明,详见Ecaharts官网:https://echarts.apache.org/zh/option.html#title

     最后贴出相关代码

    Echarts.wxml 代码如下:

    <view class="dxBox">
      <view>{{title}}</view>
      <view style="color:#727273">今日:2358次</view>
    </view>
    <view class="table">
      <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ec}}"></ec-canvas>
    </view>

    样式如下:

    /* packageA/component/successlv.wxss */
    
    .table{
      width: 100%;
      /*  calc(100% - 52rpx); */
      /* height: calc(100vh - 450rpx); */
      height: 540rpx;
      box-sizing: border-box;
      /* padding: 0 26rpx; */
      /* margin-left: 26rpx; */
      background-color: #fff;
    }
    
    
    .dxBox{
      height: 128rpx;
      width: 100%;
      margin-top: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      font-size: 28rpx;
      color: #303133;
      font-weight: 600;
      font-family: PingFangSC;
      padding: 0 40rpx 0 40rpx;
      box-sizing: border-box;
    }

    效果图如下:

    修改Ecahts图表,例如将柱状图修改为饼状图,请参考官网示例,一般情况下,设置Opeions即可 

    @天才卧龙的博客

  • 相关阅读:
    POJ 3458 Colour Sequence(简单题)
    Cygwin下vim按方向键出现ABCD;
    算法之旅——归并排序
    poj 2769 Reduced ID Numbers(memset使用技巧)
    Restlet+Fastjson 高速构建轻量级 Java RESTful Webservice
    poj 1659 Frogs&#39; Neighborhood (度序列)
    PHP监測memcache服务端的执行状况
    机器学习之倚门回首嗅青梅
    Threejs 官网
    sqlserver安全加固
  • 原文地址:https://www.cnblogs.com/chenwolong/p/15582047.html
Copyright © 2011-2022 走看看