在vue中使用echarts

最新推荐文章于 2024-06-12 00:41:34 发布

无知的小菜鸡

最新推荐文章于 2024-06-12 00:41:34 发布

阅读量269

点赞数

分类专栏：可视化

本文链接：https://blog.csdn.net/weixin_41897680/article/details/107570536

版权

可视化专栏收录该内容

25 篇文章 8 订阅

订阅专栏

vue是不操作dom元素，但是如何使用基于jQuery或者JavaScript的插件呢
最近看了一个视频简单了解了一下

先介绍两个声明周期函数：

created
实例创建完成后，data、methods 被初始化。常用于发起Ajax请求来获取数据，尤其是返回的数据与绑定事件有关时

mounted
完成挂载。用于获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求

所以对于基于dom的jQuery和JavaScript插件可以在mounted函数中进行调用

下面以在vue中使用ECharts（ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求）渲染一个柱状图为了
具体怎么用不熟
官网：传送门

<body>
<!-- 引入vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

<div id="app">
	<echarts></echarts>
</div>

<script type="text/javascript">
	Vue.component('echarts', {
		template: `
	  <div id="main" style="width: 600px;height:400px;"></div>
	  `,
		data() {
			return {}
		},
		mounted() {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			// 指定图表的配置项和数据
			var option = {
				title: {
					text: '第一个 ECharts 实例'
				},
				tooltip: {},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}
	})

	new Vue({
		el: '#app',
		data: {},
		methods: {}
	})
</script>
</body>

一般用在单独的vue文件中，写在HTML中也可以

效果图
在这里插入图片描述

无知的小菜鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
在vue中使用echarts

vue是不操作dom元素，但是如何使用基于jQuery或者JavaScript的插件呢最近看了一个视频简单了解了一下先介绍两个声明周期函数：created实例创建完成后，data、methods 被初始化。常用于发起Ajax请求来获取数据，尤其是返回的数据与绑定事件有关时mounted完成挂载。用于获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求所以对于基于dom的jQuery和JavaScript插件可以在mounted函数中进
复制链接

扫一扫