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,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 入门示例'
  },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.5)'
                        }
                    }
                }
            ]
        }
        const wordsCharts = echarts.init(wordsChartsBox.value)
        wordsCharts.setoption(wordsChartsOption)
    })
    console.log(resdata)
}
onMounted(() => {
    getf()
})
</script>