大数据分析技术应用-vue中echarts图表的实现

9vue中echarts图表的实现学习目标掌握语法糖的概念掌握vue插槽实现代码复用的原理132知识思政技能能向插槽中插入echarts图表能在vue3中使用echarts图表培养创新精神培养严谨的工作态度一、向插槽中插入简单测试内容

itemPage为插槽页面，其中已经留好了槽口slot。如何向槽口中插入图表呢？我们先从插入简单文字内容学起。简单内容如果能够显示成功，后面只需要把简单内容换成图表，就实现了图表的显示。实现步骤：1、在components中新建itemOne.vue

~

itemSix.vue6个子组件，用来表示6个图表。2、在itemOne.vue中输入简单测试内容“图表1”。在另外5个图表组件中，复制itemOne.vue的代码，分别显示文字：图表2、图表3…图表6

<template>

<div>

图表1

</div></template>一、向插槽中插入简单测试内容

实现步骤：3、把itemOne.vue

~

itemSix.vue6，插入到homePage.vue中。和前面对itemPage子组件的调用方法一样，在homePage.vue中先引用，后调用。具体实现代码为：<script>import

itemPage

from

"@/components/itemPage.vue"import

itemOne

from

"@/components/itemOne.vue"import

itemTwo

from

"@/components/itemTwo.vue"import

itemThree

from

"@/components/itemThree.vue"import

itemFour

from

"@/components/itemFour.vue"import

itemFive

from

"@/components/itemFive.vue"import

itemSix

from

"@/components/itemSix.vue"export

default{components:{itemPage,itemOne,itemTwo,itemThree,itemFour,itemFive,itemSix}}</script>先引用再调用一、向插槽中插入简单测试内容

实现步骤：4、把6个图表组件插入到插槽页面itemPage中,因为itemPage中留有slot标签，当有新的dom元素进入到itemPage中，会自动进入到插槽中。从而实现了代码复用。

<section

class="container">

<!--左-->

<section

class="itemLeft">

<itemPage><itemOne/></itemPage>

<itemPage><itemTwo/></itemPage>

<itemPage><itemThree/></itemPage>

</section>

<!--中-->

<section

class="itemCenter"><h2>地图</h2></section>

<!--右-->

<section

class="itemRight">

<itemPage><itemFour/></itemPage>

<itemPage><itemFive/></itemPage>

<itemPage><itemSix/></itemPage>

</section>

</section>

左侧3个图表右侧3个图表一、向插槽中插入简单测试内容

经过以上4个步骤，6个图表组件就插入到了插槽中。保存运行程序，查看效果，完成目标。二、vue3中使用echarts图表

6个测试内容都已经成功显示。下面只需要编写itemOne.vue

~

itemSix.vue6的内容，在vue3中使用echarts图表，对每个图表详细设置，替换掉测试文字就可以了。vue3中使用echarts图表步骤如下：首先安装echarts。在项目终端输入：npminstallecharts--save安装echarts组件二、vue3中使用echarts图表

然后，利用Vue3.2版本之后提供的<scriptsetup>语法，编写图表<scriptsetup>是一种编译时语法糖，用于在单文件组件（SFC）中使用组合API。与正常语法相比，它有如下优点：更简洁的代码，更少的样板能够使用纯TypeScript声明props和发出的事件更好的运行时性能（模板编译为同一作用域中的渲染函数，无需中间代理）更好的IDE类型推断性能（语言服务器从代码中提取类型的工作量更少）二、vue3中使用echarts图表

vue3使用echarts5图表9个步骤<template>

<div

class=“chart”

ref=“ret”></div>

//1、在图表容器中添加ref属性来获取DOM元素ret

</template><scriptsetup>

//2、使用vue3语法糖import{ref,onMounted}from“vue”;//3、导入vue3的ref函数和onMounted函数。ref函数用于创建响应式的数据。它接受一个参数作为初始值，并返回一个包含value属性的对象；onMounted函数是生命周期钩子函数，用于在组件挂载到DOM后执行代码。它接受一个函数作为参数，并在组件挂载后立即执行该函数。import*asechartsfrom“echarts”;//4、引入echarts组件，别名为echartsvarret=ref();//5、使用vue3.2的ref函数，创建一个响应式引用ret。onMounted(()=>{//6、调用生命周期钩子函数,它会在组件挂载后执行。varmyChart=echarts.init(ret.value);//7、基于准备好的dom，初始化echarts实例叫myChartvaroption={…..图表的具体配置项};//8、指定图表的配置项和数据。不同图表只是option不同，其余步骤是相同的myChart.setOption(option);//9、将配置选项应用到图表中,从而展现出想要的图表样式和数据展示效果});</script><style></style>;三、向插槽中插入echarts图表

基于以上vue3使用echarts图表的代码逻辑，分别编写itemOne.vue到itemSix.vue等6个图表子组件。把修改后的6个子组件放入itemPage中，则图表内容自动插入到itemPage的slot插槽中。<!--大容器-->

<section

class="container">

<!--左-->

<section

class="itemLeft">

<itemPage><itemOne/></itemPage>

<itemPage><itemTwo/></itemPage>

<itemPage><itemThree/></itemPage>

</section>

<!--中-->

<section

class="itemCenter"><h2>地图</h2></section>

<!--右-->

<section

class="itemRight">

<itemPage>