|
|
@@ -1,6 +1,8 @@
|
|
|
//index.js
|
|
|
//获取应用实例
|
|
|
+import * as echarts from '../../ec-canvas/echarts';
|
|
|
var imageUtil = require('../../utils/window.js');
|
|
|
+var Chart=null;
|
|
|
const app = getApp()
|
|
|
|
|
|
Page({
|
|
|
@@ -13,6 +15,17 @@ Page({
|
|
|
canIUse: wx.canIUse('button.open-type.getUserInfo'),
|
|
|
imagewidth: 0,//缩放后的宽
|
|
|
imageheight: 0,//缩放后的高
|
|
|
+ ec: {
|
|
|
+ onInit: function (canvas, width, height) {
|
|
|
+ chart = echarts.init(canvas, null, {
|
|
|
+ width: width,
|
|
|
+ height: height
|
|
|
+ });
|
|
|
+ canvas.setChart(chart);
|
|
|
+ return chart;
|
|
|
+ },
|
|
|
+ lazyLoad: true // 延迟加载
|
|
|
+ },
|
|
|
aa:[
|
|
|
{
|
|
|
id:'0',
|
|
|
@@ -129,7 +142,7 @@ Page({
|
|
|
})
|
|
|
},
|
|
|
onReady: function (e) {
|
|
|
- // this.computeScrollViewHeight();
|
|
|
+ this.computeScrollViewHeight();
|
|
|
// var query = wx.createSelectorQuery()
|
|
|
// query.select('#test').boundingClientRect(function (res) {
|
|
|
// console.log(res.top);
|
|
|
@@ -137,6 +150,14 @@ Page({
|
|
|
},
|
|
|
|
|
|
onLoad: function () {
|
|
|
+ this.echartsComponnet = this.selectComponent('#mychart');
|
|
|
+ console.log(this.echartsComponnet);
|
|
|
+ //如果是第一次绘制
|
|
|
+ if (!Chart) {
|
|
|
+ this.init_echarts(); //初始化图表
|
|
|
+ } else {
|
|
|
+ this.setOption(Chart); //更新数据
|
|
|
+ }
|
|
|
// this.computeScrollViewHeight();
|
|
|
// if (app.globalData.userInfo) {
|
|
|
// this.setData({
|
|
|
@@ -168,16 +189,16 @@ Page({
|
|
|
computeScrollViewHeight() {
|
|
|
var that = this
|
|
|
let query = wx.createSelectorQuery().in(that)
|
|
|
- // query.select('.userinfo').boundingClientRect()
|
|
|
- // query.select('.search').boundingClientRect()
|
|
|
+ query.select('.swiper-tab').boundingClientRect()
|
|
|
+ query.select('.chart').boundingClientRect()
|
|
|
query.select('.news').boundingClientRect()
|
|
|
query.exec(res => {
|
|
|
- // let topHeight = res[0].height
|
|
|
- // let searchHeight = res[1].height
|
|
|
- let titleHeight = res[0].height
|
|
|
+ let topHeight = res[0].height
|
|
|
+ let searchHeight = res[1].height
|
|
|
+ let titleHeight = res[2].height
|
|
|
let windowHeight = wx.getSystemInfoSync().windowHeight
|
|
|
let windowWidth = wx.getSystemInfoSync().windowWidth
|
|
|
- let height = windowHeight - titleHeight
|
|
|
+ let height = windowHeight - topHeight - searchHeight - titleHeight
|
|
|
let ratio = 750 / windowWidth
|
|
|
let scrollHeight = height * ratio + 20
|
|
|
that.setData({ scrollHeight: scrollHeight})
|
|
|
@@ -197,6 +218,11 @@ Page({
|
|
|
url:"../news/news"
|
|
|
});
|
|
|
},
|
|
|
+ choose:function(e){
|
|
|
+ wx.navigateTo({
|
|
|
+ url:"../news/news"
|
|
|
+ })
|
|
|
+ },
|
|
|
swichNav: function(e) {
|
|
|
var that = this;
|
|
|
if (this.data.currentTab === e.target.dataset.current) {
|
|
|
@@ -206,9 +232,161 @@ Page({
|
|
|
currentTab: e.target.dataset.current
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
},
|
|
|
+ //初始化图表
|
|
|
+ init_echarts: function () {
|
|
|
+ this.echartsComponnet.init((canvas, width, height) => {
|
|
|
+ // 初始化图表
|
|
|
+ const Chart = echarts.init(canvas, null, {
|
|
|
+ width: width,
|
|
|
+ height: height
|
|
|
+ });
|
|
|
+ this.setOption(Chart)
|
|
|
+ // 注意这里一定要返回 chart 实例，否则会影响事件处理等
|
|
|
+ return Chart
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ setOption: function (Chart) {
|
|
|
+ Chart.clear(); // 清除
|
|
|
+ Chart.setOption(this.getOption()); //获取新数据
|
|
|
+ },
|
|
|
+
|
|
|
+ // 图表配置项
|
|
|
+ getOption() {
|
|
|
+ var self = this;
|
|
|
+ var option = {
|
|
|
+ title: {//标题
|
|
|
+ text: '',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ renderAsImage: true, //支持渲染为图片模式
|
|
|
+ color: ["#DF3E3E", "#1AFA29"],//图例图标颜色
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ itemGap: 25,//每个图例间的间隔
|
|
|
+ top: 30,
|
|
|
+ x: 30,//水平安放位置,离容器左侧的距离 'left'
|
|
|
+ z: 100,
|
|
|
+ textStyle: {
|
|
|
+ color: '#383838'
|
|
|
+ },
|
|
|
+ data: [//图例具体内容
|
|
|
+ {
|
|
|
+ name: '实际',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 13,
|
|
|
+ color: 'white'
|
|
|
+ },
|
|
|
+ icon: 'roundRect'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '预测',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 13,
|
|
|
+ color: 'white'
|
|
|
+ },
|
|
|
+ icon: 'roundRect'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ grid: {//网格
|
|
|
+ left: 30,
|
|
|
+ top:100,
|
|
|
+ containLabel: true,//grid 区域是否包含坐标轴的刻度标签
|
|
|
+ },
|
|
|
+ xAxis: {//横坐标
|
|
|
+ type: 'category',
|
|
|
+ name: '区间',//横坐标名称
|
|
|
+ nameTextStyle: {//在name值存在下，设置name的样式
|
|
|
+ color: 'white',
|
|
|
+ fontStyle: 'normal'
|
|
|
+ },
|
|
|
+ nameLocation:'end',
|
|
|
+ splitLine: {//坐标轴在 grid 区域中的分隔线。
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ boundaryGap: false,//1.true 数据点在2个刻度直接 2.fals 数据点在分割线上，即刻度值上
|
|
|
+ data: ['10', '11', '12', '13', '14', '15', '16'],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 13,
|
|
|
+ color: '#5D5D5D'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {//纵坐标
|
|
|
+ type: 'value',
|
|
|
+ position:'right',
|
|
|
+ name: '股票值',//纵坐标名称
|
|
|
+ nameTextStyle:{//在name值存在下，设置name的样式
|
|
|
+ color:'red',
|
|
|
+ fontStyle:'normal'
|
|
|
+ },
|
|
|
+ splitNumber: 5,//坐标轴的分割段数
|
|
|
+ splitLine: {//坐标轴在 grid 区域中的分隔线。
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {//坐标轴刻度标签
|
|
|
+ formatter: function (value) {
|
|
|
+ var xLable = [];
|
|
|
+ if (value == 20) {
|
|
|
+ xLable.push('25,883');
|
|
|
+ }
|
|
|
+ if (value == 40) {
|
|
|
+ xLable.push('26,035');
|
|
|
+ }
|
|
|
+ if (value == 60) {
|
|
|
+ xLable.push('26,187');
|
|
|
+ }
|
|
|
+ if (value == 80) {
|
|
|
+ xLable.push('26,339');
|
|
|
+ }
|
|
|
+ return xLable
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 13,
|
|
|
+ color: '#5D5D5D',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '实际',
|
|
|
+ type: 'line',
|
|
|
+ smooth:true,
|
|
|
+ data: [18, 36, 65, 30, 78, 40, 33],
|
|
|
+ symbol: 'none',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#DF3E3E'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ name: '预测',
|
|
|
+ type: 'line',
|
|
|
+ data: [10, 30, 31, 50, 40, 20, 10],
|
|
|
+ symbol: 'none',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#1AFA29'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ }
|
|
|
+ return option;
|
|
|
+ },
|
|
|
getUserInfo: function(e) {
|
|
|
console.log(e)
|
|
|
app.globalData.userInfo = e.detail.userInfo
|
lx
