在点击我自定义的按钮时Echarts图表会混乱，按钮板顶的事件是pickdateIn
w’xml
<view class="card">
<view class="card_title">
<text class="title_font">总充值金额(元)</text>
<text class="title_money">{{}}123122</text>
<view class="pick_date date_font">
<!-- 充值和消费区分：天分近七天，周分近两周，月分近六月数据 -->
<view bindtap="pickdateIn" data-id="0" class="{{pickdateIn==0?'pick_date_color':''}}">天</view>
<view bindtap="pickdateIn" data-id="1" class="{{pickdateIn==1?'pick_date_color':''}}">周</view>
<view bindtap="pickdateIn" data-id="2" class="{{pickdateIn==2?'pick_date_color':''}}">月</view>
</view>
</view>
<view id="" class="histogram">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ecMoney }}" force-use-old-canvas="true"></ec-canvas>
</view>
</view>
<view class="card card_location">
<view class="card_title">
<text class="title_font">总充值笔数</text>
<text class="title_money">{{}}123122</text>
<view class="pick_date date_font">
<view bindtap="pickdateNum" data-id="0" class="{{pickdateNum==0?'pick_date_color':''}}">天</view>
<view bindtap="pickdateNum" data-id="1" class="{{pickdateNum==1?'pick_date_color':''}}">周</view>
<view bindtap="pickdateNum" data-id="2" class="{{pickdateNum==2?'pick_date_color':''}}">月</view>
</view>
</view>
<view id="" class="histogram">
<ec-canvas id="mychart-dom-bar2" canvas-id="mychart-bar2" ec="{{ ecMoneyNum }}" force-use-old-canvas="true"></ec-canvas>
</view>
</view>
</view>
js
// 柱状图
let chartRecharge,
chartRechargeNum;
function initChart(canvas, width, height, dpr) {
chartRecharge = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chartRecharge);
chartRecharge.setOption(option);
return chartRecharge;
};
function initChartNum(canvas, width, height, dpr) {
chartRechargeNum = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chartRechargeNum);
chartRechargeNum.setOption(option);
return chartRechargeNum;
};
let option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
confine: true
},
legend: {
data: ['线下充值', '线上充值'],
bottom: 10,
left: 20
},
grid: {
left: 20,
right: 20,
bottom: 50,
top: 40,
containLabel: true
},
yAxis: [{
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}],
xAxis: [{
type: 'category',
axisTick: {
show: false
},
data: ['05/10', '05/11', '05/12', '05/13', '05/14', '05/15', '05/16'],
axisLine: {
lineStyle: {
color: '#999',
}
},
axisLabel: {
color: '#666'
}
}],
series: [{
name: '线下充值',
type: 'bar',
data: [300, 320, 310, 300, 320, 310, 300],
itemStyle: {
normal: {
color: '#30C666'
}
}
},
{
name: '线上充值',
type: 'bar',
data: [190, 250, 220, 190, 250, 220, 190],
itemStyle: {
normal: {
color: '#3B81D8'
}
}
}
]
};
/// 筛选天、周、月数据的方法
pickdateIn: function (e) {
let id = e.target.dataset.id;
this.setData({
pickdateIn: Number(id),
})
if (id == "0") {
this.barone();
console.log(0)
} else if (id == 1) {
this.bartwo();
console.log(1)
} else {
console.log(2)
}
},
pickdateNum: function (e) {
let id = e.target.dataset.id;
this.setData({
pickdateNum: Number(id),
})
if (id == 0) {
} else if (id == 1) {
} else {
}
},
//图表数据模拟
barone(){
let option = chartRecharge.getOption();
option = {
series:[{
data:[1,2,3,4,5,6,7]
},{
data:[7,6,5,4,3,2,1]
}]
};
chartRecharge.setOption(option);
},
bartwo(){
let option = chartRecharge.getOption();
option = {
series:[{
data:[7,6,5,4,3,2,1]
},{
data:[1,2,3,4,5,6,7]
}]
};
chartRecharge.setOption(option);
}
强力驱动