// pages/item/item.js import * as echarts from '../../ec-canvas/echarts'; var timeData = [ '2020/6/1', '2009/6/2', '2009/6/3', '2009/6/4', '2009/6/5', '2009/6/6', '2009/6/7', '2009/6/8', '2009/6/9', '2009/6/10', ]; timeData = timeData.map(function (str) { return str.replace('2009/', ''); }); var app = getApp() function initChart(canvas, width, height, dpr, data) { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); var option = { title: {//标题 text: '', left: 'center' }, renderAsImage: true, //支持渲染为图片模式 color: ["#DF3E3E", "#80CDF8"],//图例图标颜色 legend: { show: true, itemGap: 25,//每个图例间的间隔 top: 30, x: 30,//水平安放位置,离容器左侧的距离 'left' z: 100, textStyle: { color: '#383838' }, }, grid: {//网格 // left: 30, // top:100, containLabel: true,//grid 区域是否包含坐标轴的刻度标签 }, xAxis: {//横坐标 type: 'category', // nameTextStyle: {//在name值存在下，设置name的样式 // color: 'white', // fontStyle: 'normal' // }, nameLocation:'end', splitLine: {//坐标轴在 grid 区域中的分隔线。 show: true, lineStyle: { type: 'dashed', color: ['#2B2B2B'] } }, boundaryGap: false,//1.true 数据点在2个刻度直接 2.fals 数据点在分割线上，即刻度值上 data: data.timeData, axisLine: {onZero: true}, axisLabel: { textStyle: { fontSize: 13, color: '#5D5D5D' } } }, dataZoom: [ { type: 'slider', xAxisIndex: 0, filterMode: 'empty' }, ], yAxis: {//纵坐标 type: 'value', position:'right', // nameTextStyle:{//在name值存在下，设置name的样式 // color:'red', // fontStyle:'normal' // }, splitNumber: 5,//坐标轴的分割段数 splitLine: {//坐标轴在 grid 区域中的分隔线。 show: true, lineStyle: { type: 'dashed', color: ['#2B2B2B'] } }, 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:data.actual, symbol: 'none', areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: data.color }, { offset: 1, color: '#1C1C1C' }]) }, itemStyle: { normal: { lineStyle: { color: data.color } } } }, { name: '预测', type: 'line', data: data.prediction, symbol: 'none', itemStyle: { normal: { lineStyle: { color: '#80CDF8' } } } }], }; chart.setOption(option); return chart; } Page({ /** * 页面的初始数据 */ data: { // 页面配置 winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, button:"关注", ec: { onInit: initChart }, chartData:{ actual:[552,586,3555,4454,552,556,4455], prediction:[552,546,3585,4424,542,546,35,44,524,56,355,444,2224,421], timeData : [ '2020/6/1', '2020/6/2', '2020/6/3', '2020/6/4', '2020/6/5', '2020/6/6', '2020/6/7', '2020/6/8', '2020/6/9', '2020/6/10','2020/6/11', '2020/6/12','2020/6/13','2020/6/14', ], color:"" }, chartDatas:{ actual:[572,556,3555,4744,552,576,3555], prediction:[352,246,385,2424,542,546,255], timeData : [ '2020/6/1', '2020/6/2', '2020/6/3', '2020/6/4', '2020/6/5', '2020/6/6', '2020/6/7' ], color:"" }, object:{ title:"appl", Withtitle:"appl inc", Volume:"545455", float:"-5555", color:'crimson', }, aa:[ { id:'0', from:"Investing.com 中文", nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手", reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....", time:"6天前" }, { id:'1', from:"chinese.aljazeera.net", nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来", reward: "波音公司当地时间27日宣布，将在美国裁减超1...", time:"6天前" }, { id:'2', from:"Investing.com 中文", nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%", reward: "Reuters.美股异动|波音(BA.US)737MAX客...", time:"5天前" }, { id:'3', from:"Investing.com 中文", nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手", reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....", time:"6天前" }, { id:'4', from:"chinese.aljazeera.net", nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来", reward: "波音公司当地时间27日宣布，将在美国裁减超1...", time:"6天前" }, { id:'5', from:"Investing.com 中文", nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%", reward: "Reuters.美股异动|波音(BA.US)737MAX客...", time:"5天前" }, { id:'6', from:"Investing.com 中文", nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手", reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....", time:"6天前" }, { id:'7', from:"chinese.aljazeera.net", nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来", reward: "波音公司当地时间27日宣布，将在美国裁减超1...", time:"6天前" }, { id:'8', from:"Investing.com 中文", nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%", reward: "Reuters.美股异动|波音(BA.US)737MAX客...", time:"5天前" }, { id:'9', from:"Investing.com 中文", nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手", reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....", time:"6天前" }, { id:'10', from:"chinese.aljazeera.net", nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来", reward: "波音公司当地时间27日宣布，将在美国裁减超1...", time:"6天前" }, { id:'11', from:"Investing.com 中文", nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%", reward: "Reuters.美股异动|波音(BA.US)737MAX客...", time:"5天前" }, { id:'12', from:"Investing.com 中文", nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手", reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....", time:"6天前" }, { id:'13', from:"chinese.aljazeera.net", nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来", reward: "波音公司当地时间27日宣布，将在美国裁减超1...", time:"6天前" }, { id:'14', from:"Investing.com 中文", nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%", reward: "Reuters.美股异动|波音(BA.US)737MAX客...", time:"5天前" }, ], }, catchTouchMove:function(res){ return false }, // 滑动切换tab bindChange: function(e) { var that = this; that.setData({ currentTab: e.detail.current }); }, //点击新闻 onFold:function(e){ console.log( e.currentTarget.dataset.id); wx.navigateTo({ url:"../news/news" }); }, // 点击tab切换 swichNav: function(e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(JSON.parse(options.row)) var title = "object.title" var Withtitle ="object.Withtitle" var Volume = "object.Volume" var float ="object.float" var color='object.color' var chartData="chartData.color" var chartDatas="chartDatas.color" this.setData({ [title]:JSON.parse(options.row).title, [Withtitle]:JSON.parse(options.row).subtitle, [Volume]:JSON.parse(options.row).digital, [float]:JSON.parse(options.row).Increase, [color]:JSON.parse(options.row).color, [chartData]:JSON.parse(options.row).color, [chartDatas]:JSON.parse(options.row).color, button:JSON.parse(options.row).keep, }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })