zoukankan      html  css  js  c++  java
  • mpvue中tab切换echarts显示问题

    //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;
    }    
     
  • 相关阅读:
    Byobu(tmux)的使用与定制
    Centos 编译安装Python 2.6
    how to set up the remote accout who to connection and management mysql server
    CentOS安装python2.6以及MySQLpython
    byobu "屏风" 简介 ,以及在CentOS下安装及日常使用
    /bin/rm: cannot remove `libtoolT': No such file or directory
    MySQLpython EnvironmentError: mysql_config not found | InfoEntropy
    几个逼真的页面 watch out
    Emerge详细解释
    微软Internet TV初体验
  • 原文地址:https://www.cnblogs.com/minghan/p/12931515.html
Copyright © 2011-2022 走看看