// pages/details/details.js import * as echarts from '../../ec-canvas/echarts'; var Chart=null; const app = getApp(); Page({ /** * 页面的初始数据 */ data: { ec: { onInit: function (canvas, width, height) { chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); return chart; }, lazyLoad: true // 延迟加载 }, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.echartsComponnet = this.selectComponent('#mychart'); //如果是第一次绘制 if (!Chart) { this.init_echarts(); //初始化图表 } else { this.setOption(Chart); //更新数据 } }, //初始化图表 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; }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, gotoNext:function(options){ wx.navigateTo({ url: '../next/next', }) }, backBtn:function(){ wx.navigateBack(); }, })