直接上效果 有动画 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%;
width: 100%;
padding: 30rpx;
font-size: 24rpx;
box-sizing: border-box;
}
.scroll{
box-sizing: border-box;
width: 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{
width: 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: 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