小程序猎鹰策略组件

wxml

<view class="mainstyle">
  <view class="uplodetime">
    更新时间 : {{tacticsDatas[0].createTime}}
  </view>
  <view class="lieyingimg">
    <image style="width: 750rpx;height: 270rpx;" src="{{imgurl}}/images/nh_tactices_banner.jpg" mode="" />
  </view>
  <view class="celuepd">
    <view class="tabletitles">
      <view class="titlidt titcoh">
        合约
      </view>
      <view class="titlidt titkaic">
        推荐日期
      </view>
      <view class="titlidt titlastss">
        头寸方向
      </view>
      <view class="titlidt titlast">
        上周推荐等级
      </view>
      <view class="titlidt titlast">
        本周推荐等级
      </view>
      <!-- <view class="titlidt titlastss">
        推荐等级
      </view> -->
    </view>
    <view class="celuebg" style="background-image: url({{imgurl}}/images/water_mark.png);">
      <view class="itemcon">
        <view class="tabletitles tall childs" wx:for="{{tacticsDatas}}" wx:key="index" wx:for-item="items">
          <view class="titlidt contion conhey">
            {{items.field1}}
          </view>
          <view class="titlidt contion contiontim">
            {{items.field2}}
          </view>
          <view class="titlidt contion comnssd">
            {{items.field3}}
          </view>
          <view class="titlidt contion conti">
            {{items.field4}}
          </view>
          <view class="titlidt contion numcontiasd">
            {{items.field5}}
          </view>
          <!-- <view class="titlidt contion lastcontion">
            {{items.level}}
          </view> -->
        </view>
      </view>

    </view>
  </view>
  <view class="celue">
    <view class="celueshuo">
      本周策略推荐说明：
    </view>
    <view class="jijiang">
      <text wx:if="{{tacticsDatas.length!=0&&tacticsDatas[0].remark!=null}}">{{tacticsDatas[0].remark}}</text>
    </view>
    <view class="celueshuo">
      推荐等级说明：
    </view>
    <view class="yixing">
      1星 推荐度低，适当平仓减仓
    </view>
    <view class="yixing">
      2星 推荐度一般，持续关注可能出现的介入机会
    </view>
    <view class="yixing">
      3星 推荐度好，策略适合持有
    </view>
    <view class="yixing">
      4星 强烈推荐，机会较好
    </view>
  </view>
  <view class="qvxiantuwan">
    <view class="qvxiantu">
      <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
    </view>
  </view>
  <view>
    <view class="genzongs">
      <view class="genzongtitl">
        账户持仓收益跟踪原则：
      </view>
      <view class="genzcon">  
		    每个板块账户的初始资金为1000万模拟资金，净值和杠杆均是以1000万作为参照，板块净值为该板块所有品种的盈亏综合所得。
      </view>
    </view>
    <view class="kind">
      <!-- 吸顶 mp-sticky-->
      <!-- <mp-sticky> -->
      <view class="kindtop" bindtap="showPopup">
        <image style="height: 70rpx;width: 70rpx;" src="{{imgurl}}/images/sel_icon.png" mode="" />
        <view>
          品种类别选择
        </view>
      </view>
      <!-- </mp-sticky> -->
        <van-popup show="{{ show }}" position="bottom" custom-style="height: 40%;" bind:close="onClose">
          <view class="kindtan">
            <view class="pinzhong">
              <view class="kindtitl"></view>
              <view>品种类别选择</view>
              <view class="kindtitl"></view>
            </view>
            <view class="kindlists">
              <view class="kindlist" wx:for="{{kindDatas}}" wx:key="index" bindtap="scrollTo" data-index="{{index}}">
                {{item.name}}
              </view>
            </view>
          </view>
        </van-popup>

      <view class="kindbg" style="background-image: url({{imgurl}}/images/water_mark.png);">
        <view wx:for="{{kindDatas}}" wx:key="index" class="witebg" id="toView{{index}}">
          <view class="kindtit">
            {{item.name}}
          </view>
          <view class="kindContent" wx:for="{{item.dataList}}" wx:for-item="items" wx:key="index">
            <view class="kindlei">
              {{items.name}}
            </view>
            <view class="kindcon">
              {{items.value}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="riskmine">
    <view class="risk">
      <view class="risktit">
        风险提示
      </view>
      <view class="riskcon">
        本公司策略为动态持续跟踪模式，过程或出现因素改变需投资者关注并控制风险，策略仅供参考，不作为投资建议，投资有风险，入市需谨慎！
      </view>
    </view>
    <view class="risk">
      <view class="risktit">
        免责申明
      </view>
      <view class="riskcon">
        本报告中的信息均来源于已公开的资料，尽管我们相信报告中资料来源的可靠性，但我公司对这些信息的准确性及完整性不作任何保证。也不保证我公司所做出的意见和建议不会发生任何的变更，在任何情况下，我公司报告中的信息和所表达的意见和建议以及所载的数据、工具及材料均不能作为您所进行期货买卖的绝对依据。由于报告在编写时融入了该分析师个人的观点和见解以及分析方法，如与南华期货股份有限公司发布的其他信息有不一致及有不同的结论，未免发生疑问，本报告所载的观点并不代表了南华期货股份有限公司的立场，所以请谨慎参考。我公司不承担因根据本报告所进行期货买卖操作而导致的任何形式的损失。
      </view>
      <view class="riskcon">
        另外，本报告所载资料、意见及推测只是反映南华期货股份有限公司在本报告所载明的日期的判断，可随时修改，毋需提前通知。未经南华期货股份有限公司允许批准，本报告内容不得以任何范式传送、复印或派发此报告的材料、内容或复印本予以任何其他人，或投入商业使用。如遵循原文本意的引用、刊发，需注明出处“南华期货股份有限公司”，并保留我公司的一切权利。
      </view>
    </view>
  </view>
  <view class="erweim">
    <image style="width:380rpx;height: 380rpx;" 	show-menu-by-longpress="true" src="{{imgurl}}/images/nh_qr_new.png" mode="" />
    <view class="ersao">
      扫码立即下载「南华期货APP」
    </view>
    <view class="ersao phone">
      客服热线：<text bindtap="getphone">4008888910</text>
    </view>
  </view>
</view>

wxss

.mainstyle{
  background-color: #fff;
}
.uplodetime{
  background: #fff;
    font-size: 28rpx;
    padding: 20rpx 20rpx;
    color: #666;
    width: 750rpx;
}
.lieyingimg{
  width: 750rpx;
}
.celuepd{
  width: 730rpx;
  padding: 0 10rpx;
}
.tabletitles{
  width: 100%;
  display: flex;
}
.titlidt{
  width: 116rpx;
  font-size: 26rpx;
  font-weight: 600;
  line-height: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4rpx;
}
.titlast{
  font-size: 24rpx;
  width: 170rpx;
}
.titlastss{
  font-size: 24rpx;
  width:110rpx;
}
.tabtit{
  width: 100%;
  height: 45rpx;
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  font-weight: 200;
  color: #fff;
}

.titcoh{
  width: 150rpx;
}
.titkaic{
  width: 150rpx;
}
.contion{
  font-size: 22rpx;
  font-weight: 400;
}
.conhey{
  width: 140rpx;
  text-align: center;
}
.contiontim{
  width: 150rpx;
}
.conti{
  width: 200rpx;
}
.numcontiasd{
  width: 100rpx;
}
.lastcontion{
  width: 100rpx;
  justify-content: center;
}
.tall{
  padding: 16rpx 0;
}

.celuebg{
  background-size: 375rpx 120rpx;
  background-repeat:repeat;
}
.celue{
  width: cala(100%-20rpx);
  padding: 10rpx 20rpx;
}
.celueshuo{
  font-size: 24rpx;
  font-weight: bold;
  color: #666;
}
.jijiang{
  font-size: 24rpx;
  color: #ff0000;
  text-indent: 1em;
  margin-bottom: 10rpx;
}
.yixing{
  line-height: 30rpx ;
    font-size: 22rpx;
    color: #999;
}
.qvxiantuwan{
  width: 100%;
  display: flex;
  justify-content: center;
}
.qvxiantu{
  width: 730rpx;
  height: 780rpx;
}
.genzongs{
  padding: 40rpx 20rpx;
}
.genzongtitl{
  color: #666;
  font-size: 26rpx;
  font-weight: bold;
}
.genzcon{
  color: #999;
  font-size: 26rpx;
  text-indent: 1em;
}
.itemcon{
  background-color: rgba(255,255, 255, 0.4);
}
.celuebg .itemcon  :nth-child(2n).childs{
  background-color: #DCEAFC;
}
.kind{
  width: cala(100% - 20rpx);
  padding: 0 10rpx;
}
.kindtop{
  width: 730rpx;
  margin-left: 10rpx;
  background-color: #fff;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.kindtit{
  width: 100%;
  padding: 10rpx 0;
  font-size: 26rpx;
  font-weight: 200;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #537dc7;
}
.kindbg{
  background-size: 405rpx 130rpx;
  background-repeat:repeat;
}
.witebg{
  background-color: rgba(255,255,255,0.4);
}
.kindContent{
  display: flex;
}
.kindlei{
  font-size: 24rpx;
  width: 33%;
}
.kindcon{
  width: 67%;
  font-size: 24rpx;
}
.witebg :nth-child(2n+1).kindContent{
  background-color: rgba(83, 125, 199, 0.2);
}
.riskmine{
  width: 100%;
  margin-top: 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.risk{
  width: 670rpx;
  background: #fff;
    border-radius: 5px;
    padding: 20rpx;
    font-size: 24rpx;
    line-height: 34rpx;
    color: #aaa;
    border: 2rpx solid #eee;
    box-shadow: 0 0 10rpx #eee;
    margin-bottom: 50rpx;
}
.risktit{
  width: 100%;
  padding: 10rpx 0;
  text-align: center;
  font-size: 30rpx;
}
.riskcon{
  text-indent:2em 
}
.erweim{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50rpx;
}
.ersao{
  margin-top: 30rpx;
  font-size: 30rpx;
  color: #537dc7;
}
.phone{
  margin: 0;
}
.kindtan{
  padding: 40rpx;
  width: cala(100% - 80rpx);
}
.pinzhong{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  margin-bottom: 30rpx;
}
.kindtitl{
  width: 200rpx;
  height: 4rpx;
  background-color: #ccc;
}
.kindlists{
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}
.kindlist{
  width: 210rpx;
  height: 60rpx;
  margin-left: 10rpx;
  background: #eee;
  border-radius: 5rpx;
  line-height: 60rpx;
    text-align: center;
    font-size: 26rpx;
  margin-bottom: 20rpx;
  color: #666;
}
.comnssd{
  width: 100rpx;
}

js

import {
  getSummaryListApi,
  getCategoryListApi,
  getValueListApi
} from '../../mall_nh_js/api/home.js';
import * as echarts from '../../ec-canvas/echarts';
var app = getApp()
Component({
  options: {
    addGlobalClass: true,
    // 指定所有 _ 开头的数据字段为纯数据字段
    pureDataPattern: /^_/,
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    imgurl: app.globalData.imgurl,
    ec: {
      onInit: null
    },
    tacticsDatas: [],
    kindDatas: [],
    show: false,
  },
  observers: {},
  /**
   * 组件的方法列表
   */
  methods: {
    showPopup() {
      this.setData({
        show: true
      });
    },
    onClose() {
      this.setData({
        show: false
      });
    },
    scrollTo(e) {
      // console.log(e.currentTarget.dataset.index)
      let vieIndex = e.currentTarget.dataset.index
      wx.pageScrollTo({
        selector: '.lieying >>> #toView' + vieIndex, // 写法同css选择器
        offsetTop: -170,
        success: data => {
          // console.log('scroll success', data);
          this.onClose()
        },
        fail: data => {
          // console.log('scroll fail', data)
        }
      });
    },
    getphone() {
      wx.makePhoneCall({
        phoneNumber: '4008888910' //电话号码
      })
    },
    getSummaryList() {
      getSummaryListApi({
        publishDate: null
      }).then((res) => {
        let datas = res.data.data
        this.setData({
          tacticsDatas: datas
        })
        // console.info("猎鹰策略1",res,datas)
      }).catch((err) => {
        console.log('猎鹰策略1', err)
      });
    },
    getCategoryList() {
      getCategoryListApi({}).then((res) => {
        let datas = res.data.data
        this.setData({
          kindDatas: datas
        })
        // console.info("猎鹰策略2",res,datas)
      }).catch((err) => {
        console.log('猎鹰策略2', err)
      });
    },
    getValueList() {
      let _this = this
      getValueListApi({}).then((res) => {
        let Xdatas = []
        let Ydatas = {
          unitValue: [],
          unitValue2: [],
          unitValue3: [],
          unitValue4: []
        }
        let datas = res.data.data
        datas.forEach((item) => {
          Xdatas.push(item.valueDate)
          Ydatas.unitValue.push(item.unitValue1)
          Ydatas.unitValue2.push(item.unitValue2)
          Ydatas.unitValue3.push(item.unitValue3)
          Ydatas.unitValue4.push(item.unitValue4)
        })
        // console.info("猎鹰策略3",res,datas,Xdatas,Ydatas)
        this.ecComponent = this.selectComponent('#mychart-dom-bar');
        _this.init(Xdatas, Ydatas)
      }).catch((err) => {
        console.log('猎鹰策略3', err)
      });
    },
    // 点击按钮后初始化图表
    init: function (x, y) {
      this.ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        this.setOption(chart, x, y);
        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart = chart;
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    },
    setOption(chart, x, y) {
      const option = {
        title: {
          text: "猎鹰净值曲线",
          textStyle: {
            fontWeight: "normal",
            fontSize: "15"
          },
          left: "center",
          top: "1%",
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          backgroundColor: "rgba(0,0,0,0.4)",
          textStyle: {
            color: "#fff",
            fontSize: "12",
          },
        },
        grid: {
          //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
          top: "17%",
          left: "17%",
          right: "10%",
          bottom: "30%"
        },
        legend: {
          left: "7%",
          top: "8%",
          data: ["能化净值", "黑色净值", "有色净值", "农产品净值"],
          textStyle: {
            fontSize: "10",
          },
          itemHeight: "5",
          itemWidth: 10,
          itemGap: 5,
        },
        xAxis: {
          show: true,
          type: 'category',
          // data: [18, 36, 65, 30, 78, 40, 33, 36, 65, 30, 78, 40, 33, 36, 65, 30, 78, 40, 33, 36, 65, 30, 78, 40, 33],
          data: x,
          axisLabel: {
            // interval:4,//X轴分割间隔
            rotate: 40
          }
        },
        yAxis: [{
          show: true,
          axisLine: {
            show: true
          },
          axisTick: {
            show: true
          },
          type: 'value',
          name: '',
          axisLabel: {
            formatter: function (value, index) {
                return value.toFixed(3);
            }
          },
          min: function (value) {
            return value.min * 0.999;
          },
          max: function (value) {
            return value.max * 1.002;
          }
        }],
        dataZoom: [{
            type: 'slider',
            show: true,
            xAxisIndex: [0],
          },
          {
            type: 'slider',
            show: false,
            yAxisIndex: [0],
            left: '90%',
          },
          {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 35
          },
          {
            type: 'inside',
            yAxisIndex: [0],
            start: 29,
            end: 36
          }
        ],
        series: [{
          name: "能化净值",
          type: 'line',
          smooth: false,
          colorBy: "series",
          // data: [18, 36, 65, 30, 78, 40, 33, 36, 65, 30, 78, 40, 33, 36, 65, 30, 78, 40, 33, 36, 65, 30, 78, 40, 33]
          data: y.unitValue
        }, {
          name: "黑色净值",
          type: 'line',
          smooth: false,
          colorBy: "series",
          data: y.unitValue2
        }, {
          name: "有色净值",
          type: 'line',
          smooth: false,
          colorBy: "series",
          data: y.unitValue3
        }, {
          name: "农产品净值",
          type: 'line',
          smooth: false,
          colorBy: "series",
          data: y.unitValue4
        }]
      };
      chart.setOption(option);
    },
  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      this.getSummaryList()
      this.getCategoryList()
      this.getValueList()
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
})

json

{
  "component": true,
  "usingComponents": {
    "ec-canvas": "../../../ec-canvas/ec-canvas",
    "van-popup": "@vant/weapp/popup/index"
  }
}

微信小程序使用ECharts

Documentation - Apache ECharts