在Vue3项目中使用如何echarts问题

更新时间：2023年05月10日 10:37:22 作者：dangfulin

这篇文章主要介绍了在Vue3项目中使用如何echarts问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

一，创建 Vue3 项目并安装 echarts

npm 创建项目：

npm create useecharts

安装 echarts：

npm install echarts --save

二，创建数据可视化组件

通常可来说，我会把数据可视化功能放到单独的组件中来实现：单独获取数据，单独展示数据，只从父组件获取必要的控制字段。

（一）组件内容

创建一个组件 BarGraph：

src/components/BarGraph.vue：
<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {onMounted, onUnmounted} from "vue";
export default {
  name: "App",
  props: ["width", "height"],
  setup() {
    let myEcharts = echarts;
    onMounted(() => {
      initChart();
    });
    onUnmounted(() => {
      myEcharts.dispose;
    });
    function initChart() {
      let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
      chart.setOption({
        title: {
          text: "2021年各月份销售量（单位：件）",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: [
            "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
          ]
        },
        tooltip: {
          trigger: "axis"
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [
              606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
            ],
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}"
                }
              }
            }
          }
        ]
      });
      window.onresize = function () {
        chart.resize();
      };
    }
    return {
      initChart
    };
  }
};
</script>

（二）使用组件

在父组件中使用上面那个子组件时，只需动态绑定控制数据窗口大小的控制值：

src/App.vue：
<template>
  <bar-graph :width="'900px'" :height="'600px'"></bar-graph>
</template>
<script>
import BarGraph from "@/components/BarGraph";
export default {
  name: "App",
  components: {
    BarGraph
  },
}
</script>
<style>
#app {
}
</style>

效果如下：

（三）程序解释

1，导入 echarts

import * as echarts from "echarts";

通常来说，在哪里实现就在哪里导入，而不是在 main.js 里面全局引入。

2，接收 props

通过 props 接收父组件传入的控制值，这种不写死的方式增加了数据展示大小的灵活性，

3，初始化 echarts

首先以调用 echarts.init() 的方式创建一个 echarts 实例。

这里我们指定了实例容器以及所用的主题。

然后调用 echartsInstance.setOption() 来设置图表实例的配置项以及数据，详见配置项手册。

1，通过 title 设置了图表的标题。

2，通过 xAxis 设置了直角坐标系中的 x 轴。

3，通过 yAxis 设置了直角坐标系中的 y 轴。

4，通过 tooltip 设置了提示框组件。

5，通过在 series 内部的 type 设置图例为柱状图，data 填充数据内容。

初始化工作是在组件的 setup 中完成的。

<template>
  <div class="echarts-box">
    <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
  </div>
</template>
<script>
// 导入 ECharts
import * as echarts from "echarts";
import {onMounted, onUnmounted} from "vue";
export default {
  name: "App",
  props: ["width", "height"],
  setup() {
    let myEcharts = echarts;
    // 挂载时初始化图表
    onMounted(() => {
      initChart();
    });
    // 卸载时销毁图表
    onUnmounted(() => {
      // 销毁图表
      myEcharts.dispose;
    });
    function initChart() {
      // 基于准备好的dom，初始化echarts实例
      let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
      chart.setOption({
        // 设置图表的标题
        title: {
          // 设置标题文本
          text: "2021年各月份销售量（单位：件）",
          // title 组件离容器左侧的距离
          left: "center",
        },
        // 设置图表的 X 轴
        xAxis: {
          // 数据类型为离散的类目数据
          type: "category",
          // 设置 X 轴数据
          data: [
            "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
          ]
        },
        // 设置提示框组件
        tooltip: {
          // 设置提示框的触发条件
          trigger: "axis"
        },
        // 设置图表的 Y 轴
        yAxis: {
          // 数据类型为连续的数值数据
          type: "value"
        },
        // 设置图表的图例
        series: [
          {
            // 图例中要展示的数据
            data: [
              606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
            ],
            // 设置图表的类型为折线图
            type: "line",
            // 平滑曲线
            smooth: true,
            // 在顶部显示数据
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}"
                }
              }
            }
          }
        ]
      });
      // 大小自适应窗口大小变化
      window.onresize = function () {
        // 重置容器高宽
        chart.resize();
      };
    }
    return {
      initChart
    };
  }
};
</script>

三，响应式刷新

data property 中的数据本身就是响应式的，但有时其中数据发生变化时，图表并不跟随变化。

通常来说，data property 中要展示的数据都是从后台服务器中获取的，而这些数据通常是不断变化的，因此需要为图表添加一个响应式刷新的功能，

最简单的方式，就是使用 watch property 监听数据源变化，Echarts是数据驱动的，这意味着只要我们重新设置数据，图表就会重新渲染，

<script>
// 导入 ECharts
import * as echarts from "echarts";
export default {
  name: "App",
  props: ["width", "height"],
  data() {
    return {
      // 数据源一，从服务器获得
      postTitle: [...],
      // 数据源二，从服务器获得
      postLikes: [...],
      myEcharts: {},
      option: {
        // 设置图表的 X 轴
        xAxis: {
          // 数据类型为离散的类目数据
          type: "category",
          // 设置 X 轴数据
          data: this.postTitle,
        },
        // 设置图表的 Y 轴
        yAxis: {
          // 数据类型为连续的数值数据
          type: "value",
        },
        // 设置图表的图例
        series: [
          {
            // 图例中要展示的数据
            data: this.postLikes,
            // 设置图表的类型为柱状图
            type: "bar",
          }
        ]
      },
    }
  },
  ...
  watch: {
    // 如果 postTitle 发生变化，则重新渲染图表
    postTitle: {
      handler: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.option.xAxis.data = this.postTitle;
          // 横坐标变化，纵坐标也相应变化
          this.option.series[0].data = this.postLikes;
          // 重新渲染图表
          this.myEcharts.setOption(this.option);
        }
      },
      deep: true
    },
    postLikes: {
      handler: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.option.series[0].data = this.postLikes;
          this.myEcharts.setOption(this.option);
        }
      },
      deep: true
    }
  }
};
</script>

更进一步，对于有实时性要求的数据，比如物联网传感器数据，自然要实时动态刷新才行。

有两种方法：

前端定时向后端请求数据。
后端通过长连接定时向前端发送数据。

这里简单说说如何使用第一种方法。说来也简单，就是使用定时器周期性请求数据。

只不过有一个小坑坑（如果明白Echarts是数据驱动的，就不算）：不正确地填充数据将导致数据堆叠，比如：

只需要在刷新数据之前清空数据源和图表中的 data 就行。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3
echarts

详解mpvue实现对苹果X安全区域的适配
这篇文章主要介绍了详解mpvue实现对苹果X安全区域的适配，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
Vue 监视属性之天气案例实现
这篇文章主要介绍了Vue 监视属性之天气案例实现，文章以天气为例展开介绍Vue 监视属性的相关内容，需要的小伙伴可以参考一下
2022-05-05
vue+iview的菜单与页签的联动方式
这篇文章主要介绍了vue+iview的菜单与页签的联动方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-07-07
Vue3中watch的最佳用法
这篇文章主要给大家介绍了关于Vue3中watch用法的相关资料,文章中有详细的代码示例,需要的朋友可以参考下
2023-04-04
vue2.0数据双向绑定与表单bootstrap+vue组件
这篇文章主要介绍了vue2.0数据双向绑定与表单bootstrap+vue组件,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
在vue项目中优雅的使用SVG的方法实例详解
本文旨在介绍如何在项目中配置和方便的使用svg图标。本文以vue项目为例给大家介绍在vue项目中优雅的使用SVG的方法，需要的朋友参考下吧
2018-12-12
基于Vue + Axios实现全局Loading自动显示关闭效果
在vue项目中,我们通常会使用Axios来与后台进行数据交互,而当我们发起请求时,常常需要在页面上显示一个加载框（Loading）,然后等数据返回后自动将其隐藏,本文介绍了基于Vue + Axios实现全局Loading自动显示关闭效果,需要的朋友可以参考下
2024-03-03
使用vue-cli webpack 快速搭建项目的代码
这篇文章主要介绍了vue-cli webpack 快速搭建项目的教程详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
Vue3配置路由ERROR in [eslint]报错问题及解决
这篇文章主要介绍了Vue3配置路由ERROR in [eslint]报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue+Echarts实现绘制动态折线图
这篇文章主要为大家详细介绍了如何利用Vue和Echarts实现绘制动态折线图，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-03-03