ECharts可视化基础——直角坐标系_echarts中直角坐标系宽度比画布大会怎样-CSDN博客

本文链接：https://blog.csdn.net/wmoxie/article/details/115460629

本文介绍了如何使用ECharts库在直角坐标系中配置网格，包括显示、颜色、边框宽度等属性，并将坐标轴位置调整到图形右上方。同时，展示了如何应用数据Zoom功能，通过slider和inside类型对X轴和Y轴进行数据过滤，以实现更精细化的数据可视化控制。

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

ECharts可视化基础——直角坐标系

ECharts可视化基础1
ECharts可视化基础2
ECharts可视化基础3

直角坐标系的设置。

直角坐标系的设置指的是网格，坐标轴和区域缩放的配置。
网格(grid)控制直角坐标系的布局和大小，其常用配置有是否显示（show），网格的宽度和颜色（borderWidth、borderColor
），网格的位置调整（left、top、right、bottom、width、height）。请根据配置项手册，尝试在之前散点图的基础上，让网格显示出来，宽度为10，颜色为红色，对left和top做一定程度的调整，了解其作用。
直角坐标系的坐标轴可更改其位置，在相对的xAxis和yAxis中，调整参数position即可更改，xAxis:可取值top或botton，yAxis:可取值left或right，请尝试将成果物3的坐标轴位置更改到图形右上方。
dataZoom可对x轴和y轴进行数据范围过滤，类型有slider滑块、inside鼠标滚轮两种，请根据配置项手册中的dataZoom分别对X轴和Y轴进行调整。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="echarts.min.js"></script>
	</head>
	<body>
		<div id='main' style="width: 600px;height:400px;"></div>
		<script>
			// 基于准备好的dom，初始化echarts实例
		    var myChart = echarts.init(document.getElementById('main'));
			data=[
			 {
    'height': 207, 'weight': 110},
			 {
    'height': 178, 'weight': 110},
			 {
    'height': 191, 'weight': 107},
			 {
    'height': 191, 'weight': 102},
			 {
    'height': 191, 'weight': 102},
			 {
    'height': 191, 'weight': 102},
			 {
    'height': 197, 'weight': 101},
			 {
    'height': 198, 'weight': 100},
			 {
    'height': 191, 'weight': 100},
			 {
    'height': 199, 'weight': 100},
			 {
    'height': 195, 'weight': 100},
			 {
    'height': 198, 'weight': 99},
			 {
    'height': 194, 'weight': 98},
			 {
    'height': 199, 'weight': 98},
			 {
    'height': 194, 'weight': 98},
			 {
    'height': 190, 'weight': 98},
			 {
    'height': 202, 'weight': 98},
			 {
    'height': 191, 'weight': 98},
			 {
    'height': 196, 'weight': 97},
			 {
    'height': 196, 'weight': 97},
			 {
    'height': 197, 'weight': 97},
			 {
    'height': 197, 'weight': 97},
			 {
    'height': 199, 'weight': 97},
			 {
    'height': 190, 'weight': 96},
			 {
    'height': 196, 'weight': 96},
			 {
    'height': 203, 'weight': 96},
			 {
    'height': 193, 'weight': 96},
			 {
    'height': 187, 'weight': 96},
			 {
    'height': 193, 'weight': 96},
			 {
    'height': 191, 'weight': 96},
			 {
    'height': 190, 'weight': 96},
			 {
    'height': 194, 'weight': 96},
			 {
    'height': 188, 'weight': 96},
			 {
    'height': 190, 'weight': 96},
			 {
    'height': 193, 'weight': 96},
			 {
    'height': 204, 'weight': 96},
			 {
    'height': 189, 'weight': 96},
			 {
    'height': 200, 'weight': 96},
			 {
    'height': 180, 'weight': 96},
			 {
    'height': 188, 'weight': 96},
			 {
    'height': 191, 'weight': 96},
			 {
    'height': 185, 'weight': 96},
			 {
    'height': 191, 'weight': 96},
			 {
    'height': 197, 'weight': 96},
			 {
    'height': 195, 'weight': 95},
			 {
    'height': 196, 'weight': 95},
			 {
    'height': 196, 'weight': 95},
			 {
    'height': 195, 'weight': 95},
			 {
    'height': 198, 'weight': 95},
			 {
    'height': 191, 'weight': 95},
			 {
    'height': 171, 'weight': 58},
			 {
    'height': 164, 'weight': 57},
			 {
    'height': 161, 'weight': 57},
			 {
    'height': 174, 'weight': 57},
			 {
    'height': 166, 'weight': 57},
			 {
    'height': 173, 'weight': 57},
			 {
    'height': 170, 'weight': 57},
			 {
    'height': 168, 'weight': 57},
			 {
    'height': 160, 'weight': 57},
			 {
    'height': 168, 'weight': 57},
			 {
    'height': 173, 'weight': 57},
			 {
    'height': 155, 'weight': 57},
			 {
    'height': 170, 'weight': 57},
			 {
    'height': 170, 'weight': 57},
			 {
    'height': 167, 'weight': 57},
			 {
    'height': 173, 'weight': 57},
			 {
    'height': 168, 'weight': 57},
			 {
    'height': 172, 'weight': 57},
			 {
    'height': 168, 'weight': 57},
			 {
    'height': 170, 'weight': 57},
			 {
    'height': 161, 'weight': 57},
			 {
    'height': 158, 'weight': 56},
			 {
    'height': 162, 'weight': 56},
			 {
    'height': 166, 'weight': 56},
			 {
    'height': 172, 'weight': 56},
			 {
    'height': 170, 'weight': 56},
			 {
    'height': 167, 'weight': 56},
			 {
    'height': 166, 'weight': 56},
			 {
    'height': 161, 'weight': 56},
			 {
    'height': 164, 'weight': 56},
			 {
    'height': 160, 'weight': 56},
			 {
    'height': 163, 'weight': 55},
			 {
    'height': 160, 'weight': 55},
			 {
    'height': 175, 'weight': 55},
			 {
    'height': 168, 'weight': 55},
			 {
    'height': 171, 'weight': 55},
			 {
    'height': 168, 'weight': 55},
			 {
    'height': 170, 'weight': 55},
			 {
    'height': 165, 'weight': 55},
			 {
    'height': 168, 'weight': 54},
			 {
    'height': 164, 'weight': 54},
			 {
    'height': 168, 'weight': 54},
			 {
    'height': 164, 'weight': 53},
			 {
    'height': 164, 'weight': 52},
			 {
    'height': 169, 'weight': 52},
			 {
    'height': 167, 'weight': 52},
			 {
    'height': 163, 'weight': 50},
			 {
    'height': 168, 'weight': 50},
			 {