微信小程序更新操作失效解决和微信小程序引入echarts

微信小程序更新操作失效解决和微信小程序引入echarts

1. 微信小程序更新操作失效解决

我们在更新云开发数据库时。在执行更新操作后，返回更新操作完成但是更新的数据为0条。

解决办法：我们需要对自己操作的表的数据权限进行修改

{
  "read": true,
  "write": true
}

2. 微信小程序引入echarts

1. 下载echarts微信版 地址：echarts地址

2. 在小程序中引入

3. 在app.json中引入

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

4.在页面的js中使用

// 引入图表
import * as echarts from '../../ec-canvas/echarts';

html

<view style="display: flex;justify-content: space-around;font-size: 35rpx;margin-top: 40rpx;">
<view style="color:{{index==0?'blue':''}}" bindtap="bar">柱状图</view>
<view style="color:{{index==1?'blue':''}}" bindtap="line">折线图</view>
<view style="color:{{index==2?'blue':''}}" bindtap="pie">饼图</view>
</view>

<!-- 图表 容器 -->
<view   class="echarts">
<ec-canvas id="echarts2" canvas-id="echarts2" ec="{{ec2}}"></ec-canvas>
</view>

css

/* 图表 */
.echarts{
  width: 90%;
  margin-left: 5%;
  height: 700rpx;
}
ec-canvascanvas{
  width: 100%;
  height: 100%;
}

js

// pages/index/index.js
import * as echarts from '../../ec-canvas/echarts';// 引入图表
var option=[];//图表配置项 声明
// 初始化图表函数  开始
let chart2 = null; 
function initChart2(canvas, width, height, dpr) {
  chart2 = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  })
  canvas.setChart(chart2)
  return chart2;
}
// 初始化图表函数  结束
Page({
  /**
   * 页面的初始数据
   */
  data: {
    index:0,
    ec2: {
      onInit: initChart2
    },
    histogramData1:[],
    histogramData2:[],
    histogramData3:[],
  },
  // 饼状图 点击事件
  pie(){
        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '收益明细',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data:this.data.histogramData3,
            }
          ]
        };
          chart2.setOption(option,true);
      this.setData({
      index:2,
    }) 
  },
      // 柱状图 点击事件
  bar(){
    option = {
      xAxis: {
        type: 'category',
        data:this.data.histogramData1
      },
      yAxis: {
        type: 'value'
      },
      
      series: [{
        label: { //数据显示
          show: true,
          color:'inherit',
    position:'top',
          fontSize: 10,
        },
        data: this.data.histogramData2,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      },
    ]
    }
    chart2.setOption(option,true);
      this.setData({
  index:0,
})

  },
      // 折线图 点击事件
  line(){
     option = {
      xAxis: {
        type: 'category',
        data: this.data.histogramData1,
      },
      yAxis: {
        type: 'value'
      },
      series: [
       
        {
          label: { //数据显示
            show: true,
            color:'inherit',
      position:'top',
            fontSize: 10,
          },
          data: this.data.histogramData2,
          type: 'line'
        }
      ]
    }
    chart2.setOption(option,true);
        this.setData({
      index:1,
    })
      },
//日报 数据获取  函数
fun(){
  let that=this;
  wx.request({
    url: '填入自己的接口，把下面的假数据更改即可', //请求数据信息的接口地址
    data: {
   
    },
    header: {
      'content-type': 'application/json' // 默认值
    },
    success (res) {
    let arr2=[23, 24, 25, 26, 27, 28, 29];  //  X轴假数据
    let datas2=[773, 768, 865, 937, 148, 487, 410];  // Y轴假数据
    let  Pie=  [
      { value: 23, name: '773' },
      { value: 24, name: '768' },
      { value: 25, name: '865' },
      { value: 26, name: '937' },
      { value: 27, name: '148' },
      { value: 28, name: '487' },
      { value: 29, name: '410' }
    ];  //   饼图假数据
     
         // 显示Echarts图表类型信息，可以去Echarts官网复制粘贴
        //  默认输出柱状图的配置项
      option = {
    xAxis: {
      type: 'category',
      data: arr2
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      label: { //数据显示
        show: true,
        color:'inherit',
  position:'top',
        fontSize: 10,
      },
      data: datas2,
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
  ]
  }
  // 输出到页面
  chart2.setOption(option);
      // 数据获取 结束
        that.setData({
          histogramData1:arr2,
          histogramData2:datas2,
          histogramData3:Pie,
    }) 
    }
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})