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

创建好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 () 内部调用生命周期钩子：
选项式 APIHook 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}
{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>