直角坐标系中的常用配置

文章目录

  • 网格
  • 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>gridtitle>
  <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>

直角坐标系中的常用配置_第1张图片

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:{}
			}
		},

直角坐标系中的常用配置_第2张图片

你可能感兴趣的:(ECharts,echarts,javascript,ecmascript)