//template
<ul class="tab" @click="current" :key="id">
<li @click="cur=0" :class="{active:cur==0}">1</li>
<li @click="cur=1" :class="{active:cur==1}">2</li>
<li @click="cur=2" :class="{active:cur==2}">3</li>
</ul>
<div v-show="cur===0">
<div class="week" v-if="cur===0&&echartsData==true">
<mpvue-echarts :echarts="echarts" :onInit="ecBarInit0" canvasId="bar0" />
</div>
</div>
<div v-show="cur===1">
<div class="week" v-if="cur===1&&echartsData==true">
<mpvue-echarts :echarts="echarts" :onInit="ecBarInit1" canvasId="bar1" />
</div>
</div>
<div v-show="cur===2">
<div class="week" v-if="cur===2&&echartsData==true">
<mpvue-echarts :echarts="echarts" :onInit="ecBarInit2" canvasId="bar2" />
</div>
</div>
//js
let echarts = require("../../../static/echarts.min");
import mpvueEcharts from"mpvue-echarts";
let poplechart
export default {
data() {
return {
echarts,
cur: 0, //默认选中第一个tab
value: '',
echartsData: false
}
},
methods: {
//人工收费
ecPopleInittwo: function (canvas, width, height) {
var that = this;
poplecharttwo = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(poplecharttwo);
poplecharttwo.setOption({
title: [],
tooltip: {
trigger: "axis"
},
legend: {
data: ["bala", "balala"],
orient: "vertical",
left: 10
},
grid: {
top: "22%",
left: "3%",
right: "6%",
bottom: "14%",
height: "70%",
containLabel: true
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: that.one
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "次数",
type: "line",
data: that.two,
color: "#1296db"
},
{
name: "金额",
type: "line",
data: that.three,
color: "red"
}
]
});
return poplecharttwo;
},
//获取数据
login() {
wx.showLoading({
title: "加载中"
});
},
echartsdatas() {
let that = this;
let promise1 = new Promise(function (resolve, reject) {
wx.request({
url: that.url,
method: "POST",
header: {
"content-type": "application/json"
},
data: {
},
success: function (res) {
resolve(res);
}
}
});
});
let promise2 = new Promise(function (resolve, reject) {
wx.request({
url: that.url,
method: "POST",
header: {
"content-type": "application/json"
},
data: {
},
success: function (res) {
resolve(res);
}
}
});
});
let promise3 = new Promise(function (resolve, reject) {
wx.request({
url: that.url,
method: "POST",
header: {
"content-type": "application/json"
},
data: {
},
success: function (res) {
resolve(res);
}
}
});
});
Promise.all([promise1, promise2, promise3])
.then(result => {
that.echartsData = true;
wx.hideLoading();
})
.catch(error => {
console.log(error);
});
},
current(e) {
this.value = e.target.dataset.eventid; //获取ul li下标
},
}
}
//css
ul li {
margin: 0;
padding: 0;
list - style: none;
}
.tab {
display: flex;
border - bottom: 2 px solid# ddd;
}
.tab li {
flex: 1;
font - size: 14 px;
text - align: center;
padding: 10 px 0;
}
.tab li.active {
color: red;
border - bottom: 3 px solid red;
}
