echarts直角坐标系

前言

直角坐标的图表有：折线图、柱状图、散点图

一、grid网格

x轴和y轴是基于grid绘制的

控制图表的位置和大小

计算直角坐标系的位置时，包含坐标轴上的文字，如下实现

grid:{
    containLabel: true

二、axis（x和y）

一个grid中最多有两种位置的x轴和y轴

1、类型

type（category）要配合data实现类目轴

type（value）会自动识别series中的data

2、位置

x轴：top、bottom

y轴：left、right

// 默认不是从0的位置开始的
// 从x轴的0值开始绘图
xAxis: {
    boundaryGap: false
}

// 实现两个y轴，其中一个是数值轴，另一个是百分数的轴（yAxis需要是个数组，配置两个对象）
yAxis: [
    {},
    {
        axisLabel: {
            formatter: '{value}%'
        }
    }
],
// 有两个以上的系列，其中有一个系列其中有一个系列要使用第二根y轴
series: [
    {},
    {
        yAxisIndex: 1,
        ...
    }
]

三、dataZoom区域缩放

x轴和y轴都可以有dataZoom

dataZoom是一个数组，意味着可以有多个区域缩放器

1、类型type

slider

inside（依靠鼠标滚轮或者双指）

2、指明产生作用的轴

xAxisIndex：0（一般写0即可）

yAxisIndex

3、指明初始状态的缩放情况

start（数据窗口范围的起始百分比）

end（数据窗口范围的结束百分比）