微信小程序更新操作失效解决和微信小程序引入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() {
}
})
