前端echarts大小屏自适应与自定义Tab切换hover效果

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 🏆 @蜀道难

🔎 了解博主

📢 个人简介: 哈喽！小伙伴们，我是水香木鱼，水瓶座一枚 😜 来自于黑龙江庆安
🏡 本站首页: 水香木鱼
🚀 博客主页: 陈春波 👉 开源博客【纯前端开发-Vue3+TS+Ant Design of Vue】，来 Star⭐Gitee吧 ! 拥有属于我们自己的 Blog。
🎨 系列专栏：大屏可视化ECharts
📖 人生格言: 生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。
🌏 小目标: 成为前端布道师

📑 文章内容

详细内容请看代码内 👇 注解,很详细。木鱼已经为小伙伴们标注好了!

🗺 Echarts 自适应

在这里插入图片描述

1、关键代码【方案一】

监听相应的 Dom 元素，当大小发生变化时，调用 resize()函数,本次演示使用方案一

//放置 获取DOM 节点时 去监听
const chartNode = new ResizeObserver(() => {
  myChart.resize();
});
chartNode.observe(chartDom);

2、方案二

通过监听window浏览器窗口实现

//1、单独一个图表出现时,可用此方案
window.onresize = () => {
  myChart.resize();
};
/*--------------------*/
//2、冒泡阶段执行
window.addEventListener(
  "resize",
  () => {
    myChart.resize();
  },
  false
); // false代表事件句柄在冒泡阶段执行

3、源码

<template>
  <div>
    <div id="echarts" ref="echarts"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        marketDataList: [],
      };
    },
    methods: {
      getmarketData() {
        getAllDataSet()
          .then((res) => {
            this.marketDataList = res;
            for (let i = 0; i < this.marketDataList.length; i++) {
              this.count += this.marketDataList[i].value;
            }
            var chartDom = document.getElementById("echarts");
            var myChart = echarts.init(chartDom);
            var option;
            /*【关键代码】配置echarts 自适应部分*/
            const chartNode = new ResizeObserver(() => {
              myChart.resize();
            });
            chartNode.observe(chartDom);
            /*--------------------*/
            option = {
              color: ["#3930a0", "#ff5c3d", "#ffb0e3", "#f4df58"],
              tooltip: {
                trigger: "item",
                formatter: "{b}:{c}" + "\n\r" + "({d}%)",
              },

              series: [
                {
                  type: "pie",
                  radius: ["26%", "50%"],
                  data: this.marketDataList,
                },
              ],
            };
            option && myChart.setOption(option);
          })
          .catch((error) => {});
      },
    },
  };
</script>

🛫 自定义 Tab 切换 hover 效果

详细的操作,木鱼已经注释到代码区域一🔎 -----👇👇👇👇,小伙伴们可自行查看

在这里插入图片描述

1、Dom元素部分【template】

class="shapeHand" 为鼠标移动到 Tab 时,显示为小手形状一 🔎 如何显示小手请移步👉 盘点，这些年你知道的鼠标移入显示小手图标的css的cursor 属性，你还记得吗？
:class="[index == num ? 'add' : '']" 关键部分, 切换时 hover 效果,详细请看 👇Less 部分
:key="index" 默认显示第一个

<template>
  <div>
    <!-- Tab 切换 -->
    <ul>
      <li
        class="shapeHand"
        v-for="(item, index) in arr"
        @click="changeFont(index)"
        :class="[index == num ? 'add' : '']"
        :key="index"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        arr: [
          "全部",
          "计算机视觉",
          "音频信号处理",
          "自然语言处理",
          "数据智能处理",
        ],
        num: 0,
      };
    },
    methods: {
      //tab栏切换高亮显示
      changeFont(index) {
        this.num = index; //默认显示第一个
      },
    },
  };
</script>

关于使用 less 处理适配问题请移步 👉 vue后台管理做适配的最佳方案，你知道吗

/如有不明白 @remvw 的小伙伴们请查看关于使用 less 处理适配问题请移步上方 ☝☝☝ [vue后台管理做适配的最佳方案，你知道吗]/

<style lang="less" scoped>
  /*如有不明白 @remvw 的小伙伴们 请查看 关于使用 less 处理适配问题 请移步 上方 ☝☝☝ [vue后台管理做适配的最佳方案，你知道吗]*/
  @remvw: 1366 / 100vw;
  /*默认显示第一个效果*/
  .add {
    background: #e3e3f5;
    border-radius: 2 / @remvw;
    color: #3930a0;
  }
  /*自定义Tab*/
  ul {
    border-radius: 8 / @remvw;
    height: 60 / @remvw;
    display: flex;
    align-items: center;
    /* 默认显示效果 */
    li {
      width: 100 / @remvw;
      margin: 0 0 0 10 / @remvw;
      font-size: 12 / @remvw;
      font-weight: 400;
      height: 30 / @remvw;
      line-height: 30 / @remvw;
      text-align: center;
      border: none;
      cursor: pointer;/*鼠标移入时显示小手形状*/
    }
    /*鼠标移动显示效果*/
    li:hover {
      width: 100 / @remvw;
      height: 30 / @remvw;
      line-height: 30 / @remvw;
      background-color: #e3e3f5;
      border-radius: 2 / @remvw;
      color: #3930a0;
      font-size: 12 / @remvw;
    }
  }
</style>