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

文章目录

前言

一、Echarts的安装

二、可视化渲染

1.柱状图

2.饼图 

3.主题的下载 

总结

---

前言

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>