VUE整合Echarts实现简单的数据可视化方式

更新时间：2026年04月23日 08:52:24 作者：心态还需努力呀

文章介绍了ECharts的数据可视化功能和使用过程,首先,文章阐述了ECharts的功能和优势,接着,文章通过安装ECharts、创建容器、获取DOM对象、引入图表等代码片段等步骤详细介绍了柱状图和饼图的可视化过程,最后,文章介绍了主题的下载和应用,以提高可视化效果

前言

ECharts是一款功能强大的前端数据可视化库，支持多种图表类型和统计图表、地理数据可视化、关系型数据展示、多维数据处理和商业智能功能。

通过广泛的图表类型、统计分析能力、地理数据可视化、关系数据展示、多维数据处理和商业智能功能，ECharts为用户提供了强大而灵活的数据可视化解决方案，助力用户从数据中获取洞见，并将其直观地展示出来。

提示：以下是本篇的一个对echarts的基本案例

一、Echarts的安装

首先在项目的终端运行安装echarts依赖安装的命令：

npm install echarts -S

这里使用全局引入的方式在main.js中引入：

//引入echarts
import * as echarts from 'echarts'
//vue全局注入echarts
Vue.prototype.$echarts = echarts;

二、可视化渲染

1.柱状图

首先我们创建一个一下属性的盒子，来放置我们以后的可视化图表

    <div>
        <div class="echart-box" ref="box"></div>
    </div>
    <style scoped>
        .echart-box{
            width: 500px;
            height: 350px;
            border: 3px solid pink;
            margin: 20px auto;
        }

</style>

第二步获取我们需要的dom对象，这里我用的$refs去获取的，当然也可以使用document方法去获取

            // 基于准备好的dom，初始化echarts实例
            const userdom = this.$refs.box
            const mycart = this.$echarts.init(userdom)

绘制需要的图表需要到官方去寻找我们需要的图表，这里给出官网的链接

Examples - Apache ECharts

我们可以看到有许多我们常见的可视化视图的一些基础表格和样式

我们点进去第一个柱状图，将代码复制到自己的项目上：

            const option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            }

        },

最后通过setOption方法去渲染整个图表

mycart.setOption(option)

最终运行结果：

2.饼图

我们通过相同的方法再去渲染一个饼状图：这里直接给出饼图的关键代码：

            const mypie = this.$echarts.init(this.$refs.boxpie)
            mypie.setOption({
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        },

3.主题的下载

这个时候我们的可视化，基本完成了,但是，我们可以看到我的的样式有一些普通，这个时候我们官方网站中去下载主题js文件，下面给出网址以及如何操作

主题下载 - Apache ECharts

进入主题下载区，以第一个为例进行主题下载，

主题的应用，在echarts文件中导入相关的主题文件，并在init方法的位置使用

最后可以看到页面的效果：

总结

这里对echarts的可视化进行的简单的入门案例，一篇文章就可以让你简单的对echarts上手，下面附上整片文章的源码方便大家阅读和学习：

<template>
    <div style="display: flex; justify-content: space-around;">
        <div class="echart-box" ref="box"></div>
        <div class="echart-box" ref="boxpie"></div>
    </div>
</template>
<script>
import '@/assets/vintage.js'
export default {
    mounted() {
        // 挂在完成dom后进行初始化
        this.showEcarts();
    },
    methods: {
        showEcarts() {
            // 基于准备好的dom，初始化echarts实例
            const userdom = this.$refs.box
            const mycart = this.$echarts.init(userdom,'vintage')
            //绘制图表
            const option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };

            // 渲染图表
            mycart.setOption(option)
            //饼图 
            const mypie = this.$echarts.init(this.$refs.boxpie,'vintage')
            mypie.setOption({
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        },
    },
}
</script>
<style scoped>
.echart-box {
    width: 500px;
    height: 350px;
    border: 3px solid pink;
    margin: 20px ;
}
</style>

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

您可能感兴趣的文章:

Vue中this.$refs的使用及说明
Vue中this.$refs用于访问通过ref注册的元素或组件,需在mounted后使用,可在JS操作DOM或调用子组件方法,注意避免模板中直接使用
2025-08-08
Vue中两种生成二维码(带logo)并下载方式总结
与后端生成二维码相比,前端生成二维码更具有灵活性,下面这篇文章主要给大家介绍了关于Vue中两种生成二维码(带logo)并下载的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-03-03
详解vue-cli 2.0配置文件(小结)
这篇文章主要介绍了详解vue-cli 2.0配置文件(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
vue使用echarts词云图的实战记录
这篇文章主要给大家介绍了关于vue使用echarts词云图的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
vue使用axios实现excel文件下载的功能
这篇文章主要介绍了vue中使用axios实现excel文件下载的功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07
在vue项目中封装echarts的步骤
这篇文章主要介绍了在vue项目中封装echarts的步骤，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-12-12
vue父组件调用子组件方法报错问题及解决
这篇文章主要介绍了vue父组件调用子组件方法报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue 动态生成数据字段的实例
这篇文章主要介绍了Vue 动态生成数据字段的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue项目登录模块滑块拼图验证功能实现代码(纯前端)
滑块验证作为一种反机器人的工具,也会不断发展和演进,以适应不断变化的威胁,这篇文章主要给大家介绍了vue项目登录模块滑块拼图验证功能实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-07-07
VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情
这篇文章主要介绍了VUE搭建分布式医疗挂号系统的前台预约挂号步骤详情，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04