【Vue开发技巧】如何在Vue3中使用Echarts？

前言

最近在捣鼓Vue3，setup中想试试Echarts，这不，用完之后真香！😁

在前端做可视化项目中，不得不提到Echarts，一个专业的可视化插件，推荐还未使用过的同学。

话不多说，开干！

使用Echarts

• 引入包

npm install echarts --save

我们这里使用的是npm导入，喜欢用yarn的同学可以自行导入。

• 使用 首先，我们定义一下template

<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: '900px', height: '300px' }"></div>
  </div>
</template>

其次，在文件中导入Echarts

import * as echarts from "echarts";

然后，我们在script中进行使用

export default {
  name: "echartsBox",
  setup() {
    /// 声明定义一下echart
    let echart = echarts;

    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      echart.dispose();
    });
	
    // 基础配置一下Echarts
    function initChart() {
      let chart = echart.init(document.getElementById("myEcharts"), "dark");
      // 把配置和数据放这里
      chart.setOption({
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ]
        },
        tooltip: {
          trigger: "axis"
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [
              820,
              932,
              901,
              934,
              1290,
              1330,
              1320,
              801,
              102,
              230,
              4321,
              4129
            ],
            type: "line",
            smooth: true
          }
        ]
      });
      window.onresize = function() {
        //自适应大小
        chart.resize();
      };
    }

    return { initChart };
  }
};
</script>

效果图就是这样啦！！

总结一下

在正式开发中，我们可能多处使用到Echarts，所以大家可以写一个EchartsCommon，把height、width和setOption定义为动态接收props，这样就方便调用啦！

Asscre是一名专注于前端、Flutter、Go研究的小码农，觉得我的文章对你有所帮助，请点赞👍+关注😄，我们一起加油！

文章所示为个人见解，如果有更好的实现方式，欢迎大家在评论区分享。