VUE整合Echarts實(shí)現(xiàn)簡單的數(shù)據(jù)可視化方式

更新時(shí)間：2026年04月23日 08:52:24 作者：心態(tài)還需努力呀

文章介紹了ECharts的數(shù)據(jù)可視化功能和使用過程,首先,文章闡述了ECharts的功能和優(yōu)勢(shì),接著,文章通過安裝ECharts、創(chuàng)建容器、獲取DOM對(duì)象、引入圖表等代碼片段等步驟詳細(xì)介紹了柱狀圖和餅圖的可視化過程,最后,文章介紹了主題的下載和應(yīng)用,以提高可視化效果

前言

ECharts是一款功能強(qiáng)大的前端數(shù)據(jù)可視化庫，支持多種圖表類型和統(tǒng)計(jì)圖表、地理數(shù)據(jù)可視化、關(guān)系型數(shù)據(jù)展示、多維數(shù)據(jù)處理和商業(yè)智能功能。

通過廣泛的圖表類型、統(tǒng)計(jì)分析能力、地理數(shù)據(jù)可視化、關(guān)系數(shù)據(jù)展示、多維數(shù)據(jù)處理和商業(yè)智能功能，ECharts為用戶提供了強(qiáng)大而靈活的數(shù)據(jù)可視化解決方案，助力用戶從數(shù)據(jù)中獲取洞見，并將其直觀地展示出來。

提示：以下是本篇的一個(gè)對(duì)echarts的基本案例

一、Echarts的安裝

首先在項(xiàng)目的終端運(yùn)行安裝echarts依賴安裝的命令：

npm install echarts -S

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

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

二、可視化渲染

1.柱狀圖

首先我們創(chuàng)建一個(gè)一下屬性的盒子，來放置我們以后的可視化圖表

    <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對(duì)象，這里我用的$refs去獲取的，當(dāng)然也可以使用document方法去獲取

            // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
            const userdom = this.$refs.box
            const mycart = this.$echarts.init(userdom)

繪制需要的圖表需要到官方去尋找我們需要的圖表，這里給出官網(wǎng)的鏈接

Examples - Apache ECharts

我們可以看到有許多我們常見的可視化視圖的一些基礎(chǔ)表格和樣式

我們點(diǎn)進(jìn)去第一個(gè)柱狀圖，將代碼復(fù)制到自己的項(xiàng)目上：

            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方法去渲染整個(gè)圖表

mycart.setOption(option)

最終運(yùn)行結(jié)果：

2.餅圖

我們通過相同的方法再去渲染一個(gè)餅狀圖：這里直接給出餅圖的關(guān)鍵代碼：

            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.主題的下載

這個(gè)時(shí)候我們的可視化，基本完成了,但是，我們可以看到我的的樣式有一些普通，這個(gè)時(shí)候我們官方網(wǎng)站中去下載主題js文件，下面給出網(wǎng)址以及如何操作

主題下載 - Apache ECharts

進(jìn)入主題下載區(qū)，以第一個(gè)為例進(jìn)行主題下載，

主題的應(yīng)用，在echarts文件中導(dǎo)入相關(guān)的主題文件，并在init方法的位置使用

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

總結(jié)

這里對(duì)echarts的可視化進(jìn)行的簡單的入門案例，一篇文章就可以讓你簡單的對(duì)echarts上手，下面附上整片文章的源碼方便大家閱讀和學(xué)習(xí)：

<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后進(jìn)行初始化
        this.showEcarts();
    },
    methods: {
        showEcarts() {
            // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
            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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: