如何在Vue中使用Echarts实例图

最新推荐文章于 2024-09-05 09:52:45 发布

兔图吐秃

最新推荐文章于 2024-09-05 09:52:45 发布

阅读量1.8k

点赞数 4

文章标签： vue 可视化数据可视化

本文链接：https://blog.csdn.net/yiwai6998/article/details/108955762

版权

本文详细介绍了在Vue项目中使用Echarts的步骤，从安装依赖、全局引入，到在组件中创建div，再到从Echarts官网获取实例图并进行数据和变量的声明，以及在生命周期中挂载和调整外部CSS，最终实现Echarts实例图的完美展示。

摘要由CSDN通过智能技术生成

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

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

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

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

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

data() {
   
			return {
   
				option: {
   
					title: {
   
						text: '堆叠区域图'

关注