欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中使用Apache?ECharts的詳細(xì)方法

 更新時(shí)間:2022年11月04日 14:16:04   作者:愛唱歌的前端  
最近在做一些數(shù)據(jù)透析的項(xiàng)目需要用到報(bào)表圖,那么報(bào)表圖好用的有老牌的ECharts,比較新意的AntV,思前馬后的想了一下還是用了Echarts,這篇文章主要介紹了vue3中使用Apache?ECharts,需要的朋友可以參考下

首先祝賀Echarts順利的從Apache畢業(yè),多了個(gè)響亮的名字:Apache ECharts,現(xiàn)在的官網(wǎng)地址在這里:傳送門,首頁相當(dāng)?shù)膰H范,看著比以前舒服多了,但是文檔還是那個(gè)文檔(T▽T)

ps:從Apache畢業(yè)的字面意思從一個(gè)國內(nèi)項(xiàng)目變成了一個(gè)國際化開源項(xiàng)目,簡單說就是從一個(gè)很厲害的項(xiàng)目變成了超厲害的項(xiàng)目

項(xiàng)目效果

前言

最近在做一些數(shù)據(jù)透析的項(xiàng)目需要用到報(bào)表圖,那么報(bào)表圖好用的有老牌的ECharts,比較新意的AntV,思前馬后的想了一下還是用了Echarts,因?yàn)锳ntV的產(chǎn)品線真的是五花八門,比如G2、G6、F2、L7,看得我頭暈眼花,所以決定用Echarts省事多了。

一、安裝

目前安裝自動指向的版本是5.4.0

npm install echarts --save

二、測試運(yùn)行

官方快速入門文檔地址:傳送門,文檔真就是快速,只有使用代碼,連個(gè)框架案例都懶得寫了。。

測試的話直接用全量引入了,看著簡潔點(diǎn)。使用的話還是和以前差不多,獲取dom的話可以用idref,但我不太喜歡在vue項(xiàng)目中看到原生的東西,所以就用ref了,ref的話取值記得帶上.value;如果進(jìn)入頁面就要顯示圖表,一定要把初始代碼放到onMounted生命周期函數(shù)中,不然會報(bào)Error: Initialize failed: invalid dom.的錯(cuò)誤;另外高度一定要設(shè)置實(shí)高,不然頁面會空白。

setup測試代碼: 隨便拷貝到一個(gè)vue文件,能顯示圖表的話說明echarts能正常運(yùn)行了

<template>
  <div class="test">
    <h1>setup測試代碼</h1>
    <div ref="echartRef" class="echart"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
const echartRef = ref()
onMounted(() => {
  // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
  const myChart = echarts.init(echartRef.value);
  // 繪制圖表
  myChart.setOption({
    title: {
      text: 'ECharts 入門示例'
    },
    tooltip: {},
    xAxis: {
      data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
    },
    yAxis: {},
    series: [
      {
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
})
</script>
<style lang="scss" scoped>
.test {
  margin: auto;
  max-width: 60vw;

  .echart {
    width: 100%;
    height: 500px;
  }
}
</style>

三、全局配置

為了不讓使用到的頁面重復(fù)導(dǎo)入echarts,我們得把它設(shè)置成全局模塊,而vue3現(xiàn)在提供全局化的形式有兩種:globalPropertiesprovide/inject,接下來我們看一下怎么用著兩種形式去實(shí)現(xiàn)全局化。

小提示
按需引入的話需要在'echarts/core'包里引入自己要使用的圖表,名字為Xxx+Chart,比如折線圖就是LineChart,不知道圖表叫什么名字可以到官方示例的標(biāo)題里看一下,首字母要大寫,之后還需要在echarts.use中注冊一下。

1. globalProperties形式:

先在main.js中引入echarts,并且把它掛載在app.config.globalProperties,名字風(fēng)格最好用$開頭,如用了路由,也會自動在這上面掛載$router$route。

①全量引入:

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import * as echarts from 'echarts';
const app = createApp(App)
app.use(router)
app.mount('#app')
app.config.globalProperties.$echarts = echarts

②按需引入:

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 引入 echarts 核心模塊,核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from 'echarts/core';
// 引入柱狀圖圖表,圖表后綴都為 Chart
import { LineChart } from 'echarts/charts';
// 引入提示框,標(biāo)題,直角坐標(biāo)系,數(shù)據(jù)集,內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件,組件后綴都為 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
} from 'echarts/components';
// 標(biāo)簽自動布局,全局過渡動畫等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注冊必須的組件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    LineChart
]);
const app = createApp(App)
app.use(router)
app.mount('#app')
app.config.globalProperties.$echarts = echarts

測試代碼:

使用的話先在vue中引入getCurrentInstance模塊,之后就可以在appContext.config.globalProperties中找到我們掛載的$echarts了。

xxx.vue

<template>
  <div class="global-properties">
    <h1>globalProperties</h1>
    <div ref="LineChartRef" class="echart"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
const LineChartRef = ref()
onMounted(() => {
  // 獲取全局echarts實(shí)例
  const echarts = getCurrentInstance().appContext.config.globalProperties.$echarts
  // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
  const lineChar = echarts.init(LineChartRef.value);
  // 繪制圖表
  lineChar.setOption({
    title: {
      text: '折線圖'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  });
})
</script>
<style lang="scss" scoped>
.global-properties {
  margin: auto;
  max-width: 60vw;

  .echart {
    width: 100%;
    height: 500px;
  }
}
</style>

2. provide / inject 形式:

由于provideinject必須在setup中使用,所以我們得在app里提供echarts

①全量引入:

app.vue:

<script setup>
import * as echarts from 'echarts';
import { provide } from 'vue'
provide('echarts', echarts)
</script>

②按需引入:

app.vue:

<script setup>
import { provide } from 'vue'
// 引入 echarts 核心模塊,核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from 'echarts/core';
// 引入柱狀圖圖表,圖表后綴都為 Chart
import { BarChart, LineChart } from 'echarts/charts';
// 引入提示框,標(biāo)題,直角坐標(biāo)系,數(shù)據(jù)集,內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件,組件后綴都為 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 標(biāo)簽自動布局,全局過渡動畫等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注冊必須的組件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  BarChart,
  LineChart
]);
provide('echarts', echarts)
</script>

測試代碼:

接著就可以在子頁面注入echarts去使用了
xxx.vue:

<template>
    <div class="provide-inject">
        <h1>provide / inject</h1>
        <div ref="BarChartRef" class="echart"></div>
    </div>
</template>
<script setup>
import { ref, onMounted, inject } from 'vue'
const BarChartRef = ref()
onMounted(() => {
    // 注入echarts實(shí)例
    const echarts = inject("echarts");
    // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
    const BarChart = echarts.init(BarChartRef.value);
    // 繪制圖表
    BarChart.setOption({
        title: {
            text: '柱狀圖'
        },
        tooltip: {},
        xAxis: {
            data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
            {
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    });
})
</script>
<style lang="scss" scoped>
.provide-inject {
    margin: auto;
    max-width: 60vw;

    .echart {
        width: 100%;
        height: 500px;
    }
}
</style>

?簡單封裝

上面的按需引入需要導(dǎo)入的東西太多了,導(dǎo)致main.js/app.vue文件看起來極其骯臟,所以我們可以把它封裝起來,需要使用時(shí)引入一下就好。

本地工作目錄:

Vue3腳手架項(xiàng)目
	|-src
		|-utils
			|-echarts.js

echarts.js: 文件我放到自己建的utils文件夾了,如果換了位置記得自己改一下引入路徑。

// 引入 echarts 核心模塊,核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from 'echarts/core';
// 引入柱狀圖圖表,圖表后綴都為 Chart
import { BarChart, LineChart } from 'echarts/charts';
// 引入提示框,標(biāo)題,直角坐標(biāo)系,數(shù)據(jù)集,內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件,組件后綴都為 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
} from 'echarts/components';
// 標(biāo)簽自動布局,全局過渡動畫等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注冊必須的組件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    BarChart,
    LineChart
]);

export {
    echarts
}

如果你選擇globalProperties形式,在main.js這樣引入一下就好了:(使用方式不變)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { echarts } from '@/utils/echarts' // 按需引入echarts
const app = createApp(App)
app.use(router)
app.mount('#app')
app.config.globalProperties.$echarts = echarts // 掛載全局使用

而如果你選擇provide / inject形式,則在app.vue這樣引入一下就好了:(使用方式不變)

<script setup>
import { provide } from 'vue'
import { echarts } from '@/utils/echarts' // 按需引入echarts
provide('echarts', echarts) // 提供全局使用
</script>

四、循環(huán)輸出

有時(shí)候我們要輸出的圖表數(shù)目可能是不確定的,這時(shí)我們要?jiǎng)討B(tài)的綁定ref來獲取dom,不知道的可以看官方文檔的示例:傳送門,接著假設(shè)拿到后端數(shù)據(jù)后并且頁面也更新完了,我們就可以循環(huán)的去生成圖表了,具體看下的案例。

代碼演示:

<template>
    <div class="loop-output">
        <h1>循環(huán)輸出</h1>
        <div class="box">
            <div v-for="item in echartsData.value" :key="item.id" ref="refList" class="echart"></div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';
onMounted(() => {
    loadData()
})
const refList = ref([])
const echartsData = reactive({ value: [] })
// 模擬加載后端數(shù)據(jù)
const loadData = () => {
    echartsData.value = [
        {
            id: '1',
            value: 30,
            name: '藤原拓海'
        },
        {
            id: '2',
            value: 60,
            name: '高橋涼介'
        },
        {
            id: '3',
            value: 90,
            name: '奔馳上樹'
        }
    ]
    // 需要等頁面再次更新完,不然拿不到dom
    nextTick(() => {
        echartsData.value.forEach((e, i) => {
            initEcharts(e, refList.value[i])
        })
    })
}
const initEcharts = (data, echartRef) => {
    // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
    const chart = echarts.init(echartRef);
    let option = {
        tooltip: {
            formatter: '{a} <br/> : {c}%'
        },
        series: [
            {
                name: 'Pressure',
                type: 'gauge',
                detail: {
                    formatter: '{value}'
                },
                data: [data]
            }
        ]
    };
    // 繪制圖表
    chart.setOption(option);
}
</script>
<style lang="scss" scoped>
.loop-output {
    margin: auto;
    max-width: 60vw;
    overflow: hidden;

    .box {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .echart {
        width: 50%;
        height: 280px;
    }
}
</style>

五、動態(tài)更新

在我做的項(xiàng)目中不僅頁面初次加載時(shí)要顯示圖表,還要根據(jù)篩選條件結(jié)果去動態(tài)更新圖表,echarts的圖表是用canvas畫出來的,所以想要二次更新需要先在onMounted中初始化圖表,接著用getOption()拿到圖表的option實(shí)例,并且替換更新option里對應(yīng)的圖表數(shù)據(jù),再用setOption(option)去二次觸發(fā)更新,否則是不會生效的;當(dāng)然,強(qiáng)制用v-if去銷毀重建圖表的dom,然后每次都去init初始化圖表也是可以實(shí)現(xiàn)二次更新的,不過那樣圖表會有閃爍的現(xiàn)象。

代碼演示:

<template>
    <div class="update">
        <h1>動態(tài)更新</h1>
        <div ref="echartRef" class="echart"></div>
        <h3>集齊七天不洗頭你的愿望是什么?</h3>
        <button @click="updateEchart(0)" class="blue">脫單</button>
        <button @click="updateEchart(1)" class="green">雙休</button>
        <button @click="updateEchart(2)" class="orange">暴富</button>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
onMounted(() => {
    // 初始化報(bào)表
    pieChart = echarts.init(echartRef.value)
    option_pie.series[0].data = requestData
    pieChart.setOption(option_pie)
})
const echartRef = ref()
let pieChart
const option_pie = {
    title: {
        text: '餅圖',
        subtext: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}
// 模擬服務(wù)器獲取的數(shù)據(jù)
let requestData = [
    { value: 1, name: '脫單' },
    { value: 1, name: '雙休' },
    { value: 1, name: '暴富' },
]
// 點(diǎn)擊更新報(bào)表
const updateEchart = (id) => {
    // 模擬數(shù)據(jù)更新
    if (id != undefined) requestData[id].value += 1
    // 獲取報(bào)表option實(shí)例
    let option = pieChart.getOption()
    // 給實(shí)例賦上新的值
    option.series[0].data = requestData
    // 二次更新圖表
    pieChart.setOption(option)
}
</script>
<style lang="scss" scoped>
.update {
    margin: auto;
    max-width: 60vw;

    .echart {
        width: 100%;
        height: 450px;
    }

    button {
        margin: 0 10px;
        color: white;
        cursor: cell;
    }

    .blue {
        background: #5470C6;
    }

    .green {
        background: #95D178;
    }

    .orange {
        background: #FAC858;
    }
}
</style>

獲取項(xiàng)目Demo

有積分的交一下公糧,沒有的話到Gitee下載就好

?CSDN:

vue3-echarts(js原味):傳送門

vue3-echarts-ts(ts風(fēng)味):傳送門

?Gitee:

vue3-echarts(js原味):傳送門
vue3-echarts-ts(ts風(fēng)味):傳送門

到此這篇關(guān)于vue3中使用Apache ECharts的文章就介紹到這了,更多相關(guān)vue使用Apache ECharts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

您可能感興趣的文章:

相關(guān)文章

  • vue3中toRef、toRefs和toRaw的使用

    vue3中toRef、toRefs和toRaw的使用

    本文主要介紹了vue3中toRef、toRefs和toRaw的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-05-05
  • 如何在vue中更優(yōu)雅的封裝第三方組件詳解

    如何在vue中更優(yōu)雅的封裝第三方組件詳解

    在封裝第三方組件中,經(jīng)常會遇到一個(gè)問題,下面這篇文章主要給大家介紹了關(guān)于如何在vue中更優(yōu)雅的封裝第三方組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-05-05
  • vue-awesome-swiper 基于vue實(shí)現(xiàn)h5滑動翻頁效果【推薦】

    vue-awesome-swiper 基于vue實(shí)現(xiàn)h5滑動翻頁效果【推薦】

    說到h5的翻頁,很定第一時(shí)間想到的是swiper。但是我當(dāng)時(shí)想到的卻是,vue里邊怎么用swiper。這篇文章主要介紹了vue-awesome-swiper - 基于vue實(shí)現(xiàn)h5滑動翻頁效果 ,需要的朋友可以參考下
    2018-11-11
  • Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法

    Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法

    Vue 3 引入了一個(gè)全新的響應(yīng)式系統(tǒng),其中最核心的就是 reactive 和 ref,它們是實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的基礎(chǔ),用于創(chuàng)建可以自動跟蹤變化并更新視圖的對象和變量,本文介紹了Vue3獲取響應(yīng)式數(shù)據(jù)的四種方法,需要的朋友可以參考下
    2024-08-08
  • 詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案

    詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案

    這篇文章主要介紹了詳解vue-cil和webpack中本地靜態(tài)圖片的路徑問題解決方案,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2017-09-09
  • vue中使用echarts并根據(jù)選擇條件動態(tài)展示echarts圖表

    vue中使用echarts并根據(jù)選擇條件動態(tài)展示echarts圖表

    雖然老早就看過很多echarts的例子, 但自己接觸的項(xiàng)目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts并根據(jù)選擇條件動態(tài)展示echarts圖表的相關(guān)資料,需要的朋友可以參考下
    2023-12-12
  • Vue腳手架的創(chuàng)建超詳解步驟

    Vue腳手架的創(chuàng)建超詳解步驟

    這篇文章主要給大家介紹了關(guān)于Vue腳手架創(chuàng)建的相關(guān)資料,Vue腳手架是vue官方提供的標(biāo)準(zhǔn)化開發(fā)工具(平臺),文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2024-01-01
  • 淺析Vue中渲染函數(shù)的使用

    淺析Vue中渲染函數(shù)的使用

    在Vue中,渲染函數(shù)是一種用于動態(tài)生成組件的函數(shù),可以將組件的模板代碼編寫為JavaScript代碼,并在運(yùn)行時(shí)進(jìn)行渲染,下面我們就來看看它的具體用法吧
    2023-08-08
  • Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄功能

    Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄功能

    這篇文章主要介紹了Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)火鍋工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-06-06
  • vue router的基本使用和配置教程

    vue router的基本使用和配置教程

    這篇文章主要介紹了vue-router的基本使用和配置教程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧,需要的朋友可以參考下
    2018-11-11

最新評論