直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图 针对于直角坐标系的图表, 有一些通用的配置

配置1: 网格 grid

grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../js/echarts.js"></script>
  10. </head>
  12. <body>
  13.     <div style="width: 600px;height:400px"></div>
  14.     <script> var mCharts = echarts.init(document.querySelector("div"))
  15.         var option = {
  16.             grid: {
  17.                 show: true,
  18.                 // 显示grid
  19.                 borderWidth: 10,
  20.                 // grid的边框宽度
  21.                 borderColor: 'red',
  22.                 // grid的边框颜色
  23.                 left: 100,
  24.                 // grid的位置
  25.                 top: 100,
  26.                 width: 300,
  27.                 // grid的大小
  28.                 height: 150
  29.             }
  30.         }
  32.         mCharts.setOption(option)
  33.     </script>
  34. </body>
  36. </html>

配置2: 坐标轴 axis

坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴 坐标轴类型 type value : 数值轴, 自动会从目标数据中读取数据 category : 类目轴, 该类型必须通过 data 设置类目数据 坐标轴位置 xAxis : 可取值为 top 或者 bottom yAxis : 可取值为 left 或者 right 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="../js/echarts.js"></script>
  10. </head>
  12. <body>
  13.     <div style="width: 600px;height:400px"></div>
  14.     <script> var mCharts = echarts.init(document.querySelector("div"))
  15.         var option = {
  16.             xAxis: { type: 'category', data: xDataArr, position: 'top' }, yAxis: { type: 'value', position: 'right' }
  17.         }
  19.         mCharts.setOption(option)
  20.     </script>
  21. </body>
  23. </html>

配置3: 区域缩放 dataZoom

  • 区域缩放类型 type

slider :滑块
inside : 内置, 依靠鼠标滚轮或者双指缩放

  • 产生作用的轴

xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可

  • 指明初始状态的缩放情况

start : 数据窗口范围的起始百分比
end : 数据窗口范围的结束百分比

  1. var option = { xAxis: { type: 'category', data: xDataArr },yAxis: { type: 'value' },dataZoom: [ { type: 'slider', xAxisIndex: 0 },{ type: 'slider', yAxisIndex: 0, start: 0, end: 80 } ]