小程序 使用echarts 数据动态变换

直接上效果 有动画 gif有点卡 看不到出来  

​

要求效果： x轴底部只呈现四个时间段  但所有折线数据都要呈现  未来时间不参与绘制  年（12）月（28-31） 日（24）

以月示例 主要参考echarts文档  小程序属于轻容量 所以下载echarts.js 选择定制版

html  注意地方是在json里面 先引入

<view class="content">
  <scroll-view scroll-x class="scroll">
    <view class="scroll-view">
     <view class="scroll-view-item {{timeIndex == index ? 'active' : ''}}" wx:for="{{list}}" wx:for-index="index" bindtap="timeChange" data-index='{{index}}'>{{item}}</view>
    </view>
  </scroll-view>
  <view class="mychart">
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
  </view>
</view>

 

json   eCharts文件官方下载的

{
  "usingComponents": {
    "ec-canvas": "eCharts/ec-canvas"
  },
  "navigationBarTitleText": "历史记录"
}

css

/* pages/eCharts/index.wxss */
.content{
  height: 100%;
   100%;
  padding: 30rpx;
  font-size: 24rpx;
  box-sizing: border-box;
}
.scroll{
  box-sizing: border-box;
   100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.scroll-view{
  display: flex;
  box-sizing: border-box;
}
.scroll-view-item{
  padding: 0rpx 20rpx;
  border-radius: 20rpx;
  color: #A7A9A9;
  white-space: nowrap;
  margin-right: 10rpx;
}
.active{
  background: #44BBEE;
  color: #fff;
}
.mychart{
   100%;
  height: 400rpx;
  box-sizing: border-box;
}
#mychart-dom-bar{
  font-size: 14px;
}

 

核心js

import * as echarts from 'eCharts/echarts.js'
const that = this
let datas = []
let num = 0
function name(nums,params) {
  datas = []
  for(let i=1;i<32;i++){
    datas.push(
      [nums+'-'+i, i>params?'':Math.floor(i*Math.random()*2)]
    )
  }
  num = 8
}
name(1, 31)
function time(params) { 
  datas= []
  for(let i=1;i<24;i++){
    datas.push(
      [i+':00', i>10?'':Math.floor(i+i*Math.random()*45)]
    )
  }
  num = 6
}
let chart = null;
function initChart (canvas, width, height) {
  chart = echarts.init(canvas, null, {
     width,
    height: height
  });
  var option = {
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          return params[0].value?params[0].name + ': ' + params[0].value: '';
        },
    },
    xAxis: {
      boundaryGap: false,
      data: datas.map(function (item) {
        let data = {
          value: item[0],
          textStyle: {
          }
        }
        return data;
      }),
      axisLabel: {
        interval: num
      },
      axisTick:{
        show: true,
        length: 0
      }
    },
    grid: {  
      left: '3%',  
      right: '4%',  
      bottom: '0',  
      top: '10%',
      containLabel: true 
    },  
    yAxis: {
      show: true,
      type: 'value',
      axisLine:{
        show: false,
      },
      axisTick:{
        show: false,
        length: 0
      },
      splitLine:{
        show: true
      }
    },
    series: {
      type: 'line',
      itemStyle : {  
        normal : {  
          color:'#44BBEE', 
            lineStyle:{  
                color:'#44BBEE'  
            },
        },
      }, 
      symbol: 'circle',
      symbolSize: 5,
      data: datas.map(function (item) {
          return item[1];
      })
    }
  }
  chart.setOption(option);
  return chart;
}
Page({
  
  /**
   * 页面的初始数据
   */
  data: {
    list: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    ec: {
      onInit: initChart
    },
    timeIndex: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      timeIndex: this.data.list[0]
    })
  },
  timeChange (e) {
    console.log(e.currentTarget.dataset.index)
    let index = e.currentTarget.dataset.index + 1
    if(index>=8){
      name(index, 0)
    } else if(index==7){
      name(index, 6)
    } else {
      name(index, 31)
    }
    
    chart.setOption({
      xAxis: [{
        data: datas.map(function (item) {
          return item[0];
        }),
        axisLabel: {
          interval: num
        },
      }],
      series: [{
        data: datas.map(function (item) {
            return item[1];
        })
      }]
    })
    this.setData({
      timeIndex: e.currentTarget.dataset.index
    })
  },
})

说明：

1.由于interval 无法利用公式计算  只能预估 根据X轴所要显示的时间段数量 预估对应的值   需求显示四个 故月份 28-31 估值interval为8

2.未来时间不参与绘制 则设置时间点对应值为空 不给与0