import * as echarts from '../../ec-canvas/echarts';
var url = "http://xxxx?page=10&pageSize=15";
var page = 0;
var page_size = 15;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
// 请求数据
var loadMore = function (that) {
that.setData({
hidden: false
});
wx.request({
url: url,
data: {
page: page,
page_size: page_size,
sort: sort,
is_easy: is_easy,
lange_id: lange_id,
pos_id: pos_id,
unlearn: unlearn
},
success: function (res) {
console.log(res.data.op_info.rows)
var list = that.data.list;
console.info("list数据长度:" + list.length);
for (var i = 0; i < res.data.op_info.rows.length; i++) {
list.push(res.data.op_info.rows[i]);
}
console.log(list)
that.setData({
list: list
});
console.info("之前page==:" + page);
page++;
console.info("目前page==:" + page);
that.setData({
hidden: true
});
}
});
}
let chart = null;
function initChart(canvas, width, height, dpr) {
wx.request({
url: url,
success: function (res) {
console.log(res.data.op_info.rows)
let o1= res.data.op_info.rows[0]
let o2=res.data.op_info.rows[1]
let o3= res.data.op_info.rows[2]
console.log( o1)
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = {
color: ['#37a2da', '#67e0e3'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'cross' // 默认为直线,可选为:'line' | 'shadow'
},
// confine: true
},
legend: {
data: ['户数降幅', '近x日涨跌幅']
},
grid: {
left: 10,
right: 10,
bottom: 15,
top: 25,
containLabel: true
},
xAxis: [{
type: 'category',
data:[o1.secuabbr, o2.secuabbr ,o2.secuabbr],
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
},
splitLine: {
show: true,
interval: 0,
lineStyle: {
color: "#666",
type: "dashed"
}
}
}],
yAxis: [{
type: 'value',
axisLine: {
show: false,
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
}],
series: [{
name: '户数降幅',
type: 'bar',
label: {
normal: {
show: true,
position: 'outside'
}
},
data:[o1.p,o2.p,o3.p],
itemStyle: {
emphasis: {
color: '#ffb900'
}
}
},
{
name: '近x日涨跌幅',
type: 'bar',
label: {
normal: {
show: true,
position: 'top'
}
},
data:[o1.turnoverraterw,o2.turnoverraterw,o3.turnoverraterw],
itemStyle: {
emphasis: {
color: '#ff0000'
}
}
}
]
};
chart.setOption(option);
return chart;
}
});
}
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '/pages/index/index',
success: function () {},
fail: function () {}
}
},
/**
* 页面的初始数据
*/
data: {
isRuleTrue: false,
searchVal:'',
hidden: true,
list: [],
scrollTop: 0,
scrollHeight: 0,
ec: {
onInit: initChart
}
},
//input的搜索事件
searchContent:function(e){
let keyWord = e.detail.value ? e.detail.value : null ;
let that = this;
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
if(keyWord==null){
//这里表示 如果搜索框中没有数据的话,做的一些处理
}else{
//这里是搜索框中有值的情况,可以直接请求搜索接口即可
}
})
that.setData({
searchVal:keyWord,
timer:null
})
},
//请求搜索接口
requestSearchApi:function(data){
//例如:方法照例简单封装了一下
Utils.get('api/xxx',data).then(res=>{}).catch(err=>{})
},
showInput: function () {
this.setData({
inputShowed: true
});
},
hideInput: function () {
this.setData({
inputVal: "",
inputShowed: false
});
// getList(this);
},
clearInput: function () {
this.setData({
inputVal: ""
});
// getList(this);
},
inputTyping: function (e) {
//搜索数据
// getList(this, e.detail.value);
this.setData({
inputVal: e.detail.value
});
},
asdn: function () {
console.log("1234")
},
//打开规则提示
// showRule: function () {
// this.setData({
// isRuleTrue: true
// })
// },
//关闭规则提示
hideRule: function () {
this.setData({
isRuleTrue: false
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 这里要注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
scrollHeight: res.windowHeight
});
console.log("设备高度scrollHeight==" + res.windowHeight );
}
});
loadMore(that);
},
//页面滑动到底部
bindDownLoad: function () {
var that = this;
loadMore(that);
console.log("lower");
},
scroll: function (event) {
//该方法绑定了页面滚动时的事件,我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
this.setData({
scrollTop: event.detail.scrollTop
});
// console.log("滚动时触发scrollTop==" + event.detail.scrollTop);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
setTimeout(function () {
// 获取 chart 实例的方式
// console.log(chart)
}, 2000);
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.setData({
isRuleTrue: true
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
// 下拉刷新
// 显示导航栏loading
wx.showNavigationBarLoading();
// 调用接口加载数据
// this.loadData();
// 隐藏导航栏loading
wx.hideNavigationBarLoading();
// 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新
wx.stopPullDownRefresh();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
{
"navigationBarTitleText": "A股外资动向",
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
},
"enablePullDownRefresh": true
}
<!--搜索框 -->
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<!--点击之后,出现input框 -->
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
<!--输入款字数大于0,则显示清除按钮 -->
<view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
<icon type="clear" size="14"></icon>
</view>
</view>
<!--没点击之前,只是一些文字和图标 -->
<label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
<icon class="weui-icon-search" type="search" size="14"></icon>
<view class="weui-search-bar__text">搜索</view>
</label>
</view>
<!--动态出现的“取消”键 -->
<view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
</view>
<view class="container" style="padding-top:0rpx">
<view class="tr bg-w">
<view class="th" >名称</view>
<view class="th">股东户数</view>
<view class="th ">比上期</view>
<view class="th ">近十日换手率</view>
<view class="th ">近十日涨跌幅</view>
</view>
<!--垂直滚动,这里必须设置高度-->
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
<view class="item" wx:for="{{list}}">
<view class="tr bg-g" wx:if="{{index % 2 == 0}}">
<view class="td" bindtap="asdf">{{item.secuabbr}}
<text class="tradingcode">{{item.tradingcode}}</text></view>
<view class="td">{{item.totalsh}}</view>
<view class="td" wx:if="{{item.p > 0}}" style="color:#f00">{{item.p}}%</view>
<view class="td" wx:if="{{item.p == 0}}" style="color:#000">{{item.p}}%</view>
<view class="td" wx:if="{{item.p < 0}}" style="color:#008200">{{item.p}}%</view>
<view class="td" >{{item.turnoverraterw}}%</view>
<view class="td" wx:if="{{item.changeraterw > 0}}" style="color:#f00">{{item.changeraterw}}%</view>
<view class="td" wx:if="{{item.changeraterw == 0}}" style="color:#000">{{item.changeraterw}}%</view>
<view class="td" wx:if="{{item.changeraterw < 0}}" style="color:#008200">{{item.changeraterw}}%</view>
</view>
<view class="tr" wx:else>
<view class="td">{{item.secuabbr}}
<text class="tradingcode">{{item.tradingcode}}</text>
</view>
<view class="td">{{item.totalsh}}</view>
<view class="td" wx:if="{{item.p > 0}}" style="color:#f00">{{item.p}}%</view>
<view class="td" wx:if="{{item.p == 0}}" style="color:#000">{{item.p}}%</view>
<view class="td" wx:if="{{item.p < 0}}" style="color:#008200">{{item.p}}%</view>
<view class="td" >{{item.turnoverraterw}}%</view>
<view class="td" wx:if="{{item.changeraterw > 0}}" style="color:#f00">{{item.changeraterw}}%</view>
<view class="td" wx:if="{{item.changeraterw == 0}}" style="color:#000">{{item.changeraterw}}%</view>
<view class="td" wx:if="{{item.changeraterw < 0}}" style="color:#008200">{{item.changeraterw}}%</view>
</view>
</view>
</scroll-view>
<view class="body-view">
<loading hidden="{{hidden}}" bindchange="loadingChange">
加载中...
</loading>
</view>
</view>
<!--遮罩层-->
<view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
<view class='ruleZhezhaoContent'>
<text class="title">最新筹码动向</text>
<!--index.wxml-->
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" data-record="{{recordData}}"></ec-canvas>
<view class='ruleHide' bindtap='hideRule'>知道了</view>
</view>
</view>
.isRuleShow{
display: block;
}
.isRuleHide{
display: none;
}
.ruleZhezhao{
height: 100%;
width: 100%;
position: fixed;
background-color:rgba(0, 0, 0, .5);
top: 0;
left: 0;
z-index: 999;
}
.ruleZhezhaoContent{
padding: 15px 0;
width: 90%;
background: #fff;
margin: 15% auto;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: relative;
}
.ruleHide{
height: 20px!important;
width: 120px!important;
/* position: absolute; */
border-radius: 10px;
background-color: #ffb900;
color: #585858;
margin: 10px auto 10px auto;
text-align: center;
font-size: 15px;
/* line-height: 60rpx; */
/* top: 0rpx; */
/* right: 0rpx; */
/* z-index: 10000; */
}
.rule{
display: block;
border: 1px solid #fff;
width: 100rpx;
text-align: center;
line-height: 60rpx;
color: #fff;
height: 60rpx;
font-size: 30rpx;
border-radius: 30rpx;
position: absolute;
top: 10%;
right: 5%;
}
.title{
width: 520rpx;
height: 110rpx;
margin-top: 30rpx;
margin-bottom: 30rxp;
}
ec-canvas {
width: 88vw;
height: 40vh;
}
/* ----------- */
/* pages/page3/page3.wxss */.table {
border: 0px solid darkgray;
}
.list{
margin-top: 0em;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 3rem;
align-items: center;
}
.td {
font-size: 15px;
width:20%;
justify-content: center;
text-align: center;
}
.bg-w{
background: #eeeeee;
}
.bg-g{
background: #fffade;
}
.th {
font-size: 15px;
width: 20%;
text-align: center;
justify-content: center;
background: #ffd30e;
color: rgb(0, 0, 0);
display: flex;
height: 3rem;
align-items: center;
}
.tradingcode{
font-size: 13px;
color: #494949;
}
/* ------- */
.weui-search-bar {
position: relative;
padding: 8px 10px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
box-sizing: border-box;
background-color: #ffb900;
}
.weui-icon-search {
margin-right: 8px;
font-size: inherit;
}
.weui-icon-search_in-box {
position: absolute;
left: 10px;
top: 7px;
}
.weui-search-bar__text {
display: inline-block;
font-size:15px;
vertical-align: middle;
}
.weui-search-bar__form {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: auto;
flex: auto;
border-radius: 15px;
background: #FFFFFF;
}
.weui-search-bar__box {
position: relative;
padding-left: 30px;
padding-right: 30px;
width: 100%;
box-sizing: border-box;
z-index: 1;
}
.weui-search-bar__input {
height: 28px;
line-height: 28px;
font-size: 14px;
}
.weui-icon-clear {
position: absolute;
top: 0;
right: 0;
padding: 7px 8px;
font-size: 0;
}
.weui-search-bar__label {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
border-radius: 15px;
text-align: center;
color: #9B9B9B;
background: #FFFFFF;
line-height: 28px;
}
.weui-search-bar__cancel-btn {
margin-left: 10px;
line-height: 28px;
color: #4e4e4e;
white-space: nowrap;
font-size: 30rpx;
z-index: 10;
}