直角坐标系中的常用配置

SunACong

已于 2022-05-17 22:46:57 修改

阅读量196

点赞数

分类专栏： ECharts 文章标签： echarts javascript ecmascript

于 2022-05-17 22:46:47 首次发布

本文链接：https://blog.csdn.net/qq_44808710/article/details/124826136

版权

ECharts 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

文章目录

网格
XY轴的位置
dataZoom区域缩放

主要有柱状图折线图散点图

网格

控制直角坐标系的布局和大小
x轴和y轴就是在grid的基础上进行绘制的
网格 x轴和y轴的依附大小边框 dataZoom区域缩放器坐标轴的位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>grid</title>
  <script src="js/lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:600px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
		// 区域缩放 数组可以配置多个区域缩放去
		dataZoom:[
			{
				// slider x轴滑块 外部 inside依靠鼠标滚轮和双击
				type:'inside',
				//x轴
				xAxisIndex:0
			},
			{
				type:'slider',
				//y轴
				yAxisIndex:0,
				//滑块的初始缩放情况
				start:0,
				end:50
			}
		],
		toolbox:{
			feature:{
				dataZoom:{}
			}
		},
      grid: { // 坐标轴容器
        show: true, // 是否可见
        borderWidth: 5, // 边框的宽度
        borderColor: 'red', // 边框的颜色
        left: 120, // 边框的位置
        top: 120,
		//会限制图形的大小不管 div的style
        // width: 400, // 边框的大小
        // height: 400
      },
      xAxis: {
        type: 'category',
        data: xDataArr,
		//设置坐标轴显示的位置 上下
		position:'top'
      },
      yAxis: {
        type: 'value',
		// 左右
		position:'right'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60,
            position: 'top'
          },
          barWidth: '30%',
          data: yDataArr
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

在这里插入图片描述

XY轴的位置

xAxis: {
        type: 'category',
        data: xDataArr,
		//设置坐标轴显示的位置 上下
		position:'top'
      },
      yAxis: {
        type: 'value',
		// 左右
		position:'right'
      },

dataZoom区域缩放

// 区域缩放 数组可以配置多个区域缩放去
		dataZoom:[
			{
				// slider x轴滑块 外部 inside依靠鼠标滚轮和双击
				type:'inside',
				//x轴
				xAxisIndex:0
			},
			{
				type:'slider',
				//y轴
				yAxisIndex:0,
				//滑块的初始缩放情况
				start:0,
				end:50
			}
		],
		toolbox:{
			feature:{
				dataZoom:{}
			}
		},