vue3中使用echart的两种引入方式，以及需要注意的事项。

最新推荐文章于 2025-04-14 08:00:00 发布

NoBug.

最新推荐文章于 2025-04-14 08:00:00 发布

阅读量8.9k

点赞数 8

分类专栏：前端小知识学习笔记文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_61672548/article/details/125746240

版权

学习笔记同时被 3 个专栏收录

41 篇文章

订阅专栏

小知识

27 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

创建好vue3项目后安装echarts

终端输入：

npm i echarts --save

安装好后：

1.直接在组件中引用echarts

<script setup>

import * as echarts from 'echarts'

</script>

2.全局引入，一般在app.vue

app.vue (provide 和 inject的使用)

<script setup>

import * as echarts from 'echarts'

provide('echarts',echarts)

</script>

在需要用echarts的组件中用inject获取

<script setup>

const echarts = inject('echarts')

</script>

注意！！！vue挂载、echarts渲染、数据获取三者的时间顺序

1.先讲vue挂载和echarts渲染

拿挂网的入门例子来说。（vue3 版本）

<script setup>

import * as echarts from 'echarts';

const myCharts = ref(null)

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(mycharts.value);
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});

<script>

开始我是这么写的，开起来好像没有问题。但是你一打开页面就会发现数据没有渲染上去。因为此时vue还没有挂载到dom元素上去，所以获取不到dom元素，数据当然不能渲染。

需要这么写，把获取dom元素和初始化myecharts的动作放到onMounted(()=>{})中

<script setup>

import * as echarts from 'echarts';

onMounted(()=>{

const myCharts = ref(null)

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(mycharts.value);
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});

})

<script>

vue3：你可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。

我在<script setup>上加了setup，就等于在setup内部.

下表包含如何在 setup () 内部调用生命周期钩子：

选项式 API	Hook inside `setup`
`beforeCreate`	Not needed*
`created`	Not needed*
`beforeMount`	`onBeforeMount`
`mounted`	`onMounted`
`beforeUpdate`	`onBeforeUpdate`
`updated`	`onUpdated`
`beforeUnmount`	`onBeforeUnmount`
`unmounted`	`onUnmounted`
`errorCaptured`	`onErrorCaptured`
`renderTracked`	`onRenderTracked`
`renderTriggered`	`onRenderTriggered`
`activated`	`onActivated`
`deactivated`	`onDeactivated`

TIP

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

这些函数接受一个回调函数，当钩子被组件调用时将会被执行:

// MyBook.vue

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

2.echarts渲染和数据获取

通过axios获取数据然后通过echarts渲染到页面

如果是用的异步请求就要非常注意了！

简单介绍一下异步请求：异步请求在执行过程中是不会影响后面程序执行的，好比如在主线程开辟了一个子线程。

如过异步获取数据，还在获取中，echart已经把dom元素渲染了，但是i请求的数据还没返回回来，此时渲染的就是空数据。

所以用异步请求，可以把echart渲染和初始化放到axios.then()里面，这样就不会出现渲染空数据了。

如下面：

<script setup>

import api from '@/api/index'

var keydata = []

var valuedata = []

const resdata = []

const wordsChartsBox = ref(null)

const echarts = inject('echarts')

function getf() {

api.get('/backstage').then(res => {

for (const key in res.data) {

var element = res.data[key]

if (key == 1) {

keydata = element

} else {

valuedata = element

}

}

for (let index = 0; index < keydata.length; index++) {

resdata.push(

{

value: parseInt(valuedata[index]),

name: keydata[index]

}

)

}

const wordsChartsOption = {

title: {

text: '常用词统计',

subtext: '通过常用词统计分析盲人需求',

left: 'center'

},

tooltip: {

trigger: 'item',

formatter: '{a} <br/>{b} : {c} ({d}%)'

},

legend: {

type: 'scroll',

orient: 'vertical',

right: 10,

top: 20,

bottom: 20,

data: keydata

},

series: [

{

name: '姓名',

type: 'pie',

radius: '55%',

center: ['40%', '50%'],

data: resdata,

emphasis: {

itemStyle: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

}

const wordsCharts = echarts.init(wordsChartsBox.value)

wordsCharts.setOption(wordsChartsOption)

})

console.log(resdata)

}

onMounted(() => {

getf()

})

</script>