//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, 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; }