Echart的简单使用及动态配置

话不多说,直接上代码


<html>
	<head>
		<meta charset="utf-8">
		<title>Echartstitle>
		<script src="../js/plugins/echarts.min.js">script>
		<style>
			#main{
      
				width: 500px;
				height: 500px;
			}
		style>
	head>
	<body>
		<div id='main'>div>
		<script type="text/javascript">
			// 基于准备好的dom,初始化echarts实例
			let myChart = echarts.init(document.getElementById('main'))

			// 指定图表的配置项和数据
			let option = {
      
				xAxis: {
      
					type: 'category',
					data: ['8.5', '8.12', '8.19', '8.26', '9.2'],
					boundaryGap: false
				},
				yAxis: {
      
					type: 'value',
					name: '纵轴',
					splitLine: {
      
						show: true
					}, // 网格线
					min: 70,
					max: 100, //设置y轴坐标最大值
					interval: 10, // 设置网格线间距
				},
				series: [{
      
					data: [85.6, 75.2, 73.8, 93.4, 83.0],
					type: 'line'
				}]
			}
			myChart.setOption(option);
			// 修改配置
			(function setter(min, max, interval) {
      
				let op=myChart.getOption()
				op.yAxis[0].min=min
				op.yAxis[0].max=max
				op.yAxis[0].interval=interval
				console.log(op)
				myChart.setOption(op)
			})(0, 100, 20)
		script>
	body>
html>

最后的这个IIFE就是简单地通过setOption()传入了新的option配置参数从而实现了动态配置。
更多详细用法请见官方文档

你可能感兴趣的:(前端,js,javascript)