Vue3 中使用 ECharts 图表库

最新推荐文章于 2024-04-10 09:59:09 发布
最新推荐文章于 2024-04-10 09:59:09 发布
阅读量307 收藏
点赞数 1
分类专栏： vue 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxl1527431101/article/details/133659455
版权

Vue3 中使用 ECharts 图表库

npm 安装 ECharts

npm install echarts --save

vue3 组合式

1. 按需引入 ECharts 图表和组件

<script lang="ts" setup>
    // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
    import * as echarts from "echarts/core";
    // 引入柱状图图表，图表后缀都为 Chart
    import { BarChart } from "echarts/charts";
    // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
    import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent } from "echarts/components";
    // 标签自动布局、全局过渡动画等特性
    import { LabelLayout, UniversalTransition } from "echarts/features";
    // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    import { CanvasRenderer } from "echarts/renderers";

    // 注册必须的组件
    echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        BarChart,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
    ]);
</script>

2. 添加 ECharts 容器

  • 必需要给盒子设置宽高
<template>
    <!-- 添加一个div盒子，用于创建 echarts 图表，必须要设置宽高-->
    <div class="main" ref="chartDom"></div>
</template>

<script lang="ts" setup>
    // 创建 echarts 容器
    const chartDom = ref(null);
</script>

<style lang="scss" scoped>
    .main {
        width: 100%;
        height: 100%;
        background: #000;
    }
</style>

3. 配置 ECharts 图表参数

  • series 数组长度要与 legend 数组长度一致
  • series 中 data 中数组长度要与 xAxis 中的 data 中的数组长度一致
  • 详见 ECharts 官网文档中的配置项手册
  • 网址：https://echarts.apache.org/v4/zh/option.html#title
<script lang="ts" setup>
    import { reactive } from "vue";
    const option = reactive({
        // 标题
        title: {
            text: "ECharts 入门示例",
        },
        // 提示框组件
        tooltip: {},
        // 图例组件
        legend: {
            data: ["销量"],
        },
        // x 轴
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        // y 轴
        yAxis: {},
        // 系列列表
        series: [
            {
                // 该系列表示的信息
                name: "销量",
                // 图标类型
                type: "bar",
                // 该 data 中数组长度要与 xAxis 中的 data 中的数组长度一致
                data: [5, 20, 36, 10, 10, 20],
            },
        ],
    });
</script>

4. 创建 ECharts 初始化函数

  • 通过监听浏览器 resize 事件，再调用 myChart.resize() 方法，可实现 ECharts 图表的自适应大小
<script lang="ts" setup>
    // echarts初始化函数
    const init = () => {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(chartDom.value);

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        //监听页面的 resize 事件获取浏览器大小改变的事件，调用 echartsInstance.resize 改变图表的大小
        window.addEventListener("resize", () => {
            // 调用 echartsInstance.resize 改变图表的大小
            myChart.resize();
        });
    };
</script>

5. 初始化 ECharts 图表

  • 需要在 onMounted 生命周期钩子中使用
<script lang="ts" setup>
    // 页面加载完成时，初始化echarts实例
    onMounted(() => {
        init();
    });
</script>

6. 完整代码示例

<template>
    <div class="main" ref="chartDom"></div>
</template>
<script lang="ts" setup>
    import { ref, reactive, onMounted } from "vue";
    // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
    import * as echarts from "echarts/core";
    // 引入柱状图图表，图表后缀都为 Chart
    import { BarChart } from "echarts/charts";
    // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
    import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, LegendComponent } from "echarts/components";
    // 标签自动布局、全局过渡动画等特性
    import { LabelLayout, UniversalTransition } from "echarts/features";
    // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    import { CanvasRenderer } from "echarts/renderers";

    // 注册必须的组件
    echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LegendComponent,
        BarChart,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
    ]);

    // 创建echarts容器
    const chartDom = ref(null);

    // 指定图表的配置项和数据
    const option = reactive({
        // 标题
        title: {
            text: "ECharts 入门示例",
        },
        // 提示框组件
        tooltip: {},
        // 图例组件
        legend: {
            data: ["销量"],
        },
        // x 轴
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        // y 轴
        yAxis: {},
        // 系列列表
        series: [
            {
                // 该系列表示的信息
                name: "销量",
                // 图标类型
                type: "bar",
                // 该 data 中数组长度要与 xAxis 中的 data 中的数组长度一致
                data: [5, 20, 36, 10, 10, 20],
            },
        ],
    });

    // echarts初始化函数
    const init = () => {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(chartDom.value);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        //监听页面的 resize 事件获取浏览器大小改变的事件，调用 echartsInstance.resize 改变图表的大小
        window.addEventListener("resize", () => {
            // 调用 echartsInstance.resize 改变图表的大小
            myChart.resize();
        });
    };

    // 页面加载完成时，初始化echarts实例
    onMounted(() => {
        init();
    });
</script>

<style lang="scss" scoped>
    .main {
        width: 100%;
        height: 100%;
        background: #000;
    }
</style>

vue3 选项式

1. 按需引入 ECharts 图表和组件

<script lang="ts">
    // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
    import * as echarts from "echarts/core";
    // 引入柱状图图表，图表后缀都为 Chart
    import { BarChart } from "echarts/charts";
    // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
    import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, LegendComponent } from "echarts/components";
    // 标签自动布局、全局过渡动画等特性
    import { LabelLayout, UniversalTransition } from "echarts/features";
    // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    import { CanvasRenderer } from "echarts/renderers";

    // 注册必须的组件
    echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LegendComponent,
        BarChart,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
    ]);
</script>

2. 添加 ECharts 容器

  • 必需要给盒子设置宽高
<template>
    <div class="main" ref="chartDom"></div>
</template>
<script lang="ts">
    export default {};
</script>
<style lang="scss" scoped>
    .main {
        width: 100%;
        height: 100%;
        background: #000;
    }
</style>

3. 配置 ECharts 图表参数

  • series 数组长度要与 legend 数组长度一致
  • series 中 data 中数组长度要与 xAxis 中的 data 中的数组长度一致
  • 详见 ECharts 官网文档中的配置项手册
  • 网址：https://echarts.apache.org/v4/zh/option.html#title
<script lang="ts">
    export default {
        data() {
            return {
                option: {
                    // 标题
                    title: {
                        text: "ECharts 入门示例",
                    },
                    // 提示框组件
                    tooltip: {},
                    // 图例组件
                    legend: {
                        data: ["销量"],
                    },
                    // x 轴
                    xAxis: {
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                    },
                    // y 轴
                    yAxis: {},
                    // 系列列表
                    series: [
                        {
                            // 该系列表示的信息
                            name: "销量",
                            // 图标类型
                            type: "bar",
                            // 该 data 中数组长度要与 xAxis 中的 data 中的数组长度一致
                            data: [5, 20, 36, 10, 10, 20],
                        },
                    ],
                },
            };
        },
    };
</script>

4. 创建 ECharts 初始化函数

  • 通过监听浏览器 resize 事件，再调用 myChart.resize() 方法，可实现 ECharts 图表的自适应大小
<script lang="ts">
    export default {
        methods: {
            // echarts初始化函数
            init() {
                // 基于准备好的dom，初始化echarts实例
                const myChart = echarts.init(this.$refs.chartDom);
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(this.option);
                //监听页面的 resize 事件获取浏览器大小改变的事件，调用 echartsInstance.resize 改变图表的大小
                window.addEventListener("resize", () => {
                    // 调用 echartsInstance.resize 改变图表的大小
                    myChart.resize();
                });
            },
        },
    };
</script>

5. 初始化 ECharts 图表

  • 需要在 mounted 生命周期钩子中使用
<script lang="ts">
    export default {
        mounted() {
            this.init();
        },
    };
</script>

6.完整代码示例

<template>
    <div class="main" ref="chartDom"></div>
</template>
<script lang="ts">
    // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
    import * as echarts from "echarts/core";
    // 引入柱状图图表，图表后缀都为 Chart
    import { BarChart } from "echarts/charts";
    // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
    import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, LegendComponent } from "echarts/components";
    // 标签自动布局、全局过渡动画等特性
    import { LabelLayout, UniversalTransition } from "echarts/features";
    // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    import { CanvasRenderer } from "echarts/renderers";

    // 注册必须的组件
    echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LegendComponent,
        BarChart,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
    ]);
    export default {
        data() {
            return {
                option: {
                    // 标题
                    title: {
                        text: "ECharts 入门示例",
                    },
                    // 提示框组件
                    tooltip: {},
                    // 图例组件
                    legend: {
                        data: ["销量"],
                    },
                    // x 轴
                    xAxis: {
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                    },
                    // y 轴
                    yAxis: {},
                    // 系列列表
                    series: [
                        {
                            // 该系列表示的信息
                            name: "销量",
                            // 图标类型
                            type: "bar",
                            // 该 data 中数组长度要与 xAxis 中的 data 中的数组长度一致
                            data: [5, 20, 36, 10, 10, 20],
                        },
                    ],
                },
            };
        },
        methods: {
            // echarts初始化函数
            init() {
                // 基于准备好的dom，初始化echarts实例
                const myChart = echarts.init(this.$refs.chartDom);
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(this.option);
                //监听页面的 resize 事件获取浏览器大小改变的事件，调用 echartsInstance.resize 改变图表的大小
                window.addEventListener("resize", () => {
                    // 调用 echartsInstance.resize 改变图表的大小
                    myChart.resize();
                });
            },
        },
        mounted() {
            this.init();
        },
    };
</script>

<style lang="scss" scoped>
    .main {
        width: 100%;
        height: 100%;
        background: #000;
    }
</style>
田七三两
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
一个基于vue和d3的图表库
08-10
一个基于vue和d3的图表库
vue3 封装ECharts组件
Huangxianlong的博客
04-26 5144
前端开发需要经常使用ECharts图表渲染数据信息，在一个项目中我们经常需要使用多个图表，选择封装ECharts组件复用的方式可以减少代码量，增加开发效率。
Vue3+Echarts:动态随机生成的柱状图
qq_45820271的博客
03-20 243
在Vue3中使用Echarts并根据需求随机生成柱状图
极致呈现系列之终章：Vue3中封装Echarts组件
九仞山的专栏
06-30 950
介绍了Vue3中封装Echarts组件的方法
vue3的vue-chart组件封装（包含数据刷新按需使用）
outsider76557的博客
03-30 3520
vue3的vue-chart组件封装，支持数据动态更新，按需引入，渐变参考，干货满满，赶紧上车！
vue3中，vue-echarts基本使用（柱状图、饼图、折线图）
mq1314520_zhl的博客
01-12 5616
注意：vue-echarts在使用前要先安装echarts，不要只安装vue-echarts这一个echarts官网地址：Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。安装vue-echarts注意：Vue 2下使用，必须还要安装main.js中全局注册组件。
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
在vue中使用echarts图表实例代码详解
10-17
本文通过实例代码给大家介绍了在vue中使用echarts图表的方法，需要注意的事项文中给大家提到,需要的朋友可以参考下
完美解决vue 中多个echarts图表自适应的问题
12-28
　<IEcharts option=bar ref=echarts></IEcharts> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this； setTimeout(() => { [removed] = function ()...
vue使用echarts图表的详细方法
10-17
主要为大家详细介绍了vue使用echarts图表的详细方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于vue3 的 Echarts图表展示 (操作全流程)（图文版）
m0_69097184的博客
09-19 1357
这篇是一个基于vue3上的echarts图表展示文章，无论你有没有基础 编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个省份，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。 1.1 由node去下拉vuecli脚手架（未安装node的请查看文章：安装npm） ​​ 1.2 创建vue项目命令：vue create test3 ​​
Vue3项目中使用ECharts图表并实现自适应效果
m0_52043522的博客
05-06 5828
关于Vue3中使用ECharts的用法和自适应效果实现
vue3中，echarts使用（一）——柱状图和折线图的结合使用
weixin_44867717的博客
12-08 3084
echarts
vue3中使用echarts使用
2302_77435585的博客
06-06 1325
第四步：在vue3中都是用的setup，在 APP.vue中一般这个文件内都是只放一个router-view的，和一些配置的全局的东西。第二步在src文件夹内新建一个utils文件夹，在文件夹内新建文件echarts.js。复制option中的代码把这些替换了就行了，只会的值通过数据修改就好啦。第三步：把建好的echarts.js文件引入main.js中。第五步：在需要的文件内。
vue3中如何使用echarts图表
weixin_72127453的博客
06-08 277
vue中使用图表
极致呈现系列之：Vue3中使用Echarts图表初体验
九仞山的专栏
06-13 1250
介绍了如何在Vue3中使用Echarts图表库。探讨了如何安装和引用Echarts库、如何使用Echarts库创建基本图表、如何自定义图表、如何将数据传递给Echarts库以及如何处理Echarts库中的事件。
推荐一款强大的可视化组件库：Vue-ECharts-v3
最新发布
gitblog_00059的博客
04-10 432
推荐一款强大的可视化组件库：Vue-ECharts-v3 项目地址:https://gitcode.com/xlsdg/vue-echarts-v3 在现代前端开发中，数据可视化是不可或缺的一部分。对于Vue.js框架的开发者来说，Vue-ECharts-v3是一个值得推荐的ECharts封装库，它让在Vue应用中集成复杂的图表变得轻而易举。 项目简介 Vue-ECharts-v3是由社区开发者x...
Vue（九）基于Vue3 + Element Plus 的后台管理系统解决方案 vue-manage-system Vue项目 ECharts图表 一个基于 JavaScript 的开源可视化图表库
Benjamin CSDN博客
08-30 725
Vue（九）基于Vue3 + Element Plus 的后台管理系统解决方案 vue-manage-system Vue项目 ECharts图表 一个基于 JavaScript 的开源可视化图表库 ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表，同时也受大多数企业级项目使用ECharts图表统计较多。
vue echarts 自定义图表组件
07-08
在 Vue 中使用 Echarts 绘制自定义图表组件可以按照以下步骤进行： 1. 首先，确保已经安装了 echarts 库。可以使用 npm 或 yarn 进行安装： ``` npm install echarts --save ``` 2. 创建一个 Vue 组件，用于包含 Echarts 图表。可以命名为 `EchartsChart.vue`。 ```html <template> <div :ref="chartRef" class="echarts-chart"></div> </template> <script> import echarts from 'echarts'; export default { props: ['chartData'], data() { return { chartRef: 'echartsChart', chartInstance: null, }; }, mounted() { this.chartInstance = echarts.init(this.$refs[this.chartRef]); this.renderChart(); }, methods: { renderChart() { // 使用 chartData 配置图表数据和样式 this.chartInstance.setOption(this.chartData); }, }, beforeDestroy() { if (this.chartInstance) { this.chartInstance.dispose(); // 销毁图表实例，释放资源 } }, }; </script> <style scoped> .echarts-chart { width: 100%; height: 400px; /* 根据需求设置图表高度 */ } </style> ``` 在上面的示例中，我们创建了一个 `EchartsChart` 组件，接受一个 `chartData` 属性，用于配置图表的数据和样式。在 `mounted` 钩子中，我们初始化了 Echarts 实例，并在 `renderChart` 方法中使用 `setOption` 方法渲染图表。在组件销毁前，我们通过调用 `dispose` 方法销毁图表实例，释放资源。 3. 在使用自定义图表组件的父组件中，引入并使用 `EchartsChart` 组件。可以通过传递 `chartData` 属性来配置图表。 ```html <template> <div> <echarts-chart :chartData="chartData"></echarts-chart> </div> </template> <script> import EchartsChart from '@/components/EchartsChart.vue'; export default { components: { EchartsChart, }, data() { return { chartData: { // 配置图表的数据和样式 }, }; }, }; </script> ``` 在上面的示例中，我们在父组件中引入了 `EchartsChart` 组件，并通过 `chartData` 属性配置图表的数据和样式。 你可以根据自己的需求在 `chartData` 中配置图表的相关数据，例如 `title`、`tooltip`、`xAxis`、`yAxis`、`series` 等。具体的配置可以参考 Echarts 的文档。 希望这个示例能够帮助你创建自定义的 Echarts 图表组件！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值