[JavaScript知识库]vue eCharts实现多图表之间切换以及宽度不稳定问题

vue eCharts实现多图表之间切换以及宽度不稳定问题

<div v-show="flag==0" id="myDoubtBankListEcharts1" class="myecharts" style="width: 100%;height: 70%;display:inline-block;"></div>
<div v-show="flag==1" id="myDoubtBankListEcharts3" class="myecharts" style="width: 100%;height: 70%;display:inline-block;"></div>

import * as echarts from "echarts";

flag：0，

findDoubtLibraryInfo() {
  let params = {
    pageNum: this.pageNum,
    pageSize: this.pageSize,
  };
  findDoubtLibraryInfo(params)
    .then((res) => {
      this.flag = res.data.flag;
      if (this.flag == 0) {
      //this.$nextTick，如果不加这个，可能显示出来的宽度有问题，在切换处加就可以了
        this.$nextTick(() => {
          this.myDoubtBankListEcharts1();
        });
        
      } else {
        this.$nextTick(() => {
          this.myDoubtBankListEcharts3();
        });
      }
    })
    .catch((err) => {});
},

 myDoubtBankListEcharts1() {
      document.getElementById("myDoubtBankListEcharts1").style.display ="block";
      document.getElementById("myDoubtBankListEcharts1").style.width = "100%";
      let myDoubtBankListEcharts1 = echarts.init(document.getElementById("myDoubtBankListEcharts1"));
      let ratioNumber = [80];
      myDoubtBankListEcharts1.setOption({
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        backgroundColor: "transparent",
        // xAxis: {
        //     show: false,
        //     type: 'value',
        //     max: 100,
        // },
        xAxis: [
          {
            type: "value",
            axisLabel: {
              margin: 5,
              color: "#fff",
              formatter: function (val) {
                return val + "";
              },
              textStyle: {
                fontSize: "0",
              },
            },
            min: 0,
            max: 100, // 计算最大值
            // interval: max / 5, //  平均分为5份
            splitNumber: 15,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                width: 1,
                opacity: 0.3,
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            axisLabel: {
              show: false,
            },
            min: 0,
            max: 100, // 计算最大值
            interval: 100 / 10, //  平均分为5份
            splitNumber: 10,
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#D8D8D8",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: false,
              textStyle: {
                fontSize: "12",
                color: "#03fcfe",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: ["比率"],
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: false,
            data: ratioNumber, //80
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 0,
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: true,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "rgb(25, 142, 248)",
                fontSize: "16",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgb(25, 142, 248)",
              },
            },
            barWidth: 20,
            data: ratioNumber, //80
            z: 12212,
          },
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 1,
            barGap: "-100%",
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: false,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgba(215, 236, 255,.4)",
              },
            },
            barWidth: 20,
            data: [100],
            z: 12210,
          },
        ],
      });

      window.addEventListener("resize", function () {//自适应屏幕大小
        myDoubtBankListEcharts1.resize();
      });
    },

 myDoubtBankListEcharts3() {
 //通过v-show展示的，此处需要display =block，否则宽度和高度出不来
      document.getElementById("myDoubtBankListEcharts3").style.display ="block";
      document.getElementById("myDoubtBankListEcharts3").style.width = "100%";
      let myDoubtBankListEcharts3 = echarts.init(document.getElementById("myDoubtBankListEcharts3"));
      let ratioNumber = [80];
      myDoubtBankListEcharts3.setOption({
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        backgroundColor: "transparent",
        // xAxis: {
        //     show: false,
        //     type: 'value',
        //     max: 100,
        // },
        xAxis: [
          {
            type: "value",
            axisLabel: {
              margin: 5,
              color: "#fff",
              formatter: function (val) {
                return val + "";
              },
              textStyle: {
                fontSize: "0",
              },
            },
            min: 0,
            max: 100, // 计算最大值
            // interval: max / 5, //  平均分为5份
            splitNumber: 15,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                width: 1,
                opacity: 0.3,
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            axisLabel: {
              show: false,
            },
            min: 0,
            max: 100, // 计算最大值
            interval: 100 / 10, //  平均分为5份
            splitNumber: 10,
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#D8D8D8",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: false,
              textStyle: {
                fontSize: "12",
                color: "#03fcfe",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: ["比率"],
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: false,
            data: ratioNumber, //80
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 0,
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: true,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "rgb(25, 142, 248)",
                fontSize: "16",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgb(25, 142, 248)",
              },
            },
            barWidth: 20,
            data: ratioNumber, //80
            z: 12212,
          },
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 1,
            barGap: "-100%",
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: false,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgba(215, 236, 255,.4)",
              },
            },
            barWidth: 20,
            data: [100],
            z: 12210,
          },
        ],
      });
      window.addEventListener("resize", function () {//自适应屏幕大小
        myDoubtBankListEcharts3.resize();
      });
    },