vue中使用echarts插件

最新推荐文章于 2024-05-08 20:18:06 发布

在线小白www

最新推荐文章于 2024-05-08 20:18:06 发布

阅读量120

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_43654065/article/details/115348691

版权

jQuery 专栏收录该内容

109 篇文章 3 订阅

订阅专栏

该博客介绍了如何在HTML页面中结合jQuery和Echarts库来创建数据图表。首先，确保引入jQuery，然后在HTML中定义图表容器。接着，通过JavaScript的`drawChart`方法初始化echarts实例，并设置图表配置，包括网格、x轴、y轴等属性。最后，在Vue的`mounted`生命周期钩子中调用`drawChart`，确保在DOM加载完成后绘制图表。

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

一、引入echarts的js，在引入jquery之后。
二、在HTML中定义标签位置

<div id="testChart" :style="{width: '100%', height: '600px'}"></div>

三、在js中定义图像信息

methods：{
	drawChart：function(){
		// 基于准备好的dom，初始化echarts实例
		let myChart = echarts.init(document.getElementById('testChart'))
		// 绘制图表
		myChart.setOption({
			grid:{
	          left:'50',
	          right:'50',
	          top:"20"
	        },
	        xAxis: {
	          type: 'category',
	          boundaryGap: false,
	          data: this.name //数据也可以直接引用data中的数据
	        },
	        yAxis: {
	          type: 'value',
	          max: 100,
	          axisLabel: {
	            formatter: function (value, index) {
	              return parseInt(value) + '分';
	            },
	          }
	        },
		})
	}
}

mounted(){
	this.drawChart()//在mounted中调用方法，意为初始化页面完成后，再对dom节点进行一些需要的操作。
}