Vue3 中使用 ECharts 图表库

于 2023-10-07 22:50:17 发布
阅读量827 收藏 1
点赞数 1
分类专栏： vue 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lxl1527431101/article/details/133659455
版权
本文详细介绍了如何在Vue3项目中使用ECharts库，包括npm安装、组合式和选项式引入方式、添加ECharts容器、配置图表参数、创建初始化函数以及实现图表自适应。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值