在Vue中使用Echarts实例图的方法实例

 更新时间:2020年10月10日 09:33:09   作者:yiwai6998  
这篇文章主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件。但是新手猛的上手的话,可能会有点束手无策,所以这篇就是来写一点入门的内容,外加自己一点的小心得。

一、首先要在项目中下载echarts依赖

npm install echarts -S
	//或者使用淘宝的镜像
cnpm install echarts -S

二、然后就要再main.js文件中来进行全局引入

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

三、在Vue组件中设置一个div

<template>
	<div>
		<div class="body">
			<div id="echarts"></div> //就是这一行
		</div>
	</div>
</template>

四、去Echarts官网寻找想设置的实例图

再然后,根据找到的这个图里的数据及变量,来进行声明到data中。

data() {
			return {
				option: {
					title: {
						text: '堆叠区域图'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '邮件营销',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '联盟广告',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							data: [220, 182, 191, 234, 290, 330, 310]
						},
						{
							name: '视频广告',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							data: [150, 232, 201, 154, 190, 330, 410]
						},
						{
							name: '直接访问',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							data: [320, 332, 301, 334, 390, 330, 320]
						},
						{
							name: '搜索引擎',
							type: 'line',
							stack: '总量',
							label: {
								normal: {
									show: true,
									position: 'top'
								}
							},
							areaStyle: {},
							data: [820, 932, 901, 934, 1290, 1330, 1320]
						}
					]
				}
			}
		}

五、在生命周期中挂载

mounted() {
			let myChart = this.$echarts.init(document.getElementById("echarts"));
			//设置echarts对象的option属性
			myChart.setOption(this.option)
		}

六、再在该div外面的盒子设置相关的css

<style scoped>
.body
	{
	 width: 100%;
	 height: 100vh;
	 margin-left: 250px;
	 margin-top: -280px;
	}
#echarts
	{
	 width: 80%;
	 height: 60%;
	 border: 1px solid red;
	}
</style>

好啦,这个时候自信一点,打开浏览器,就会发现一个完完全全的Echarts实例图啦,希望这篇文章可以帮得到你,嘻嘻

总结

到此这篇关于在Vue中使用Echarts实例图的文章就介绍到这了,更多相关Vue使用Echarts实例图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue2.0实现简单分页及跳转效果

    Vue2.0实现简单分页及跳转效果

    这篇文章主要为大家详细介绍了Vue2.0实现简单数据分页,及页数的跳转效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 关于axios不能使用Vue.use()浅析

    关于axios不能使用Vue.use()浅析

    这篇文章主要给大家介绍了关于axios不能使用Vue.use()的相关资料,文中通过示例代码介绍的非常详细,对大家的理解和学习具有一定的参考学习价值,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2018-01-01
  • 详解 vue better-scroll滚动插件排坑

    详解 vue better-scroll滚动插件排坑

    本篇文章主要介绍了详解 vue better-scroll滚动插件排坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Vue3中解决组件间css层级问题的最佳实践

    Vue3中解决组件间css层级问题的最佳实践

    <Teleport> 是 Vue 3 中引入的一个内置组件,用于将组件的内容渲染到 DOM 中的指定位置,而不受组件层级结构的限制,本文给大家介绍了Vue3使用Teleport解决组件间css层级问题的最佳实践,需要的朋友可以参考下
    2025-02-02
  • Vue ECharts实现机舱座位选择展示功能代码详解

    Vue ECharts实现机舱座位选择展示功能代码详解

    这篇文章主要介绍了Vue ECharts实现机舱座位选择展示,本文给大家分享一段简短的代码通过效果图展示给大家介绍的非常明白,需要的朋友可以参考下
    2022-05-05
  • 详解Vue中的自定义渲染器和异步渲染

    详解Vue中的自定义渲染器和异步渲染

    这篇文章主要为大家详细介绍了Vue中的自定义渲染器和异步渲染的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • Vue中的同步和异步调用顺序详解

    Vue中的同步和异步调用顺序详解

    这篇文章主要介绍了Vue中的同步和异步调用顺序,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    这篇文章主要介绍了vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue中beforeRouteLeave实现页面回退不刷新的示例代码

    vue中beforeRouteLeave实现页面回退不刷新的示例代码

    这篇文章主要介绍了vue中beforeRouteLeave实现页面回退不刷新的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue双向绑定原理及实现方法

    Vue双向绑定原理及实现方法

    Vue双向绑定是指数据模型和视图之间的数据同步,通过Object.defineProperty()方法实现数据劫持,利用观察者模式实现数据更新和视图更新的自动同步,实现方式包括指令、计算属性、v-model等,优化方法包括使用虚拟DOM、合理使用computed和watch等
    2023-04-04

最新评论