//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">
<mpvue-echarts :echarts="echarts" :onInit="ecBarInit0" canvasId="bar0" />
</div>
</div>
<div v-show="cur===1" >
<div class="week" v-if="cur===1">
<mpvue-echarts :echarts="echarts" :onInit="ecBarInit1" canvasId="bar1" />
</div>
</div>
<div v-show="cur===2" >
<div class="week" v-if="cur===2">
<mpvue-echarts :echarts="echarts" :onInit="ecBarInit2" canvasId="bar2" />
</div>
</div>
//js
let echarts = require("../../../static/echarts.min");
import mpvueEcharts from "mpvue-echarts";
function getBarOption() {
return {
title: [
{
textAlign: "center",
text: "balal",
subtext: "2400",
left: "18%",
textStyle: {
fontSize: 14,
color: "black"
},
subtextStyle: {
fontSize: 16,
fontWeight: "bold",
color: "black"
}
},
],
//color:[“red”,"green"]饼图自定义颜色
tooltip: {
trigger: "axis"
},
legend: {
icon: "circle",
data: ["balal",等等],
bottom: 10,
left: "center"
},
grid: {
left: "3%",
right: "4%",
bottom: "20%",
top: "21%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {
type: "value"
},
series: [
{
name: "balal",
type: "line",
color: "#1296db", // 折线图自定义颜色
stack: "总量",
data: [120, 132, 101, 134, 90, 230, 210]
}
]
};
} 注释x3
export default {
data() {
return {
echarts,
cur: 0, //默认选中第一个tab
value:'',
ecBarInit: function(canvas, width, height) {
barChart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barChart);
barChart.setOption(getBarOption());
return barChart;
}, 注释 x3
}
},
methods: {
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: 2px solid #ddd;
}
.tab li {
flex: 1;
font-size: 14px;
text-align: center;
padding: 10px 0;
}
.tab li.active {
color: red;
border-bottom: 3px solid red;
}