echarts多y轴详解

一、echarts多y轴折线图

echarts的多y轴可以使我们在一张图表中显示多组数据，方便查看比较。假如我们需要展示商品的销售额和销售量，可以使用多y轴折线图。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '商品销售数据'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['销售额','销售量']
    },
    xAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: [
        {
            type: 'value',
            name: '销售额',
            axisLabel: {
                formatter: '{value} 元'
            }
        },
        {
            type: 'value',
            name: '销售量',
            axisLabel: {
                formatter: '{value} 件'
            }
        }
    ],
    series: [
        {
            name:'销售额',
            type:'line',
            data:[300,400,500,600,700,800,900]
        },
        {
            name:'销售量',
            type:'line',
            yAxisIndex: 1,
            data:[50,70,90,110,130,150,170]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

通过yAxis数组可以定义多个y轴的属性，其中name用于指定轴名称，axisLabel中的formatter则是轴标签的格式化函数。

二、echarts多y轴格数一致

在多个y轴折线图中，很容易出现y轴格数不一致的情况，影响数据的可读性。可以使用axisSame属性设置y轴格数一致。

var option = {
    ...
    yAxis: [
        {
            type: 'value',
            name: '销售额',
            axisLabel: {
                formatter: '{value} 元'
            }
        },
        {
            type: 'value',
            name: '销售量',
            axisLabel: {
                formatter: '{value} 件'
            },
            axisLine: {
                lineStyle: {
                    color: '#5793f3'
                }
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: '{value} 米'
            }
        }
    ],
    axisSame: true, // 让y轴格数一致
    ...
};

这里还设置了第二个y轴的样式，包括轴线颜色、分割线、刻度线和标签格式化。

三、echarts设置y轴刻度

有时候需要设置y轴的刻度，例如网站访问量从0到10000，可以每1000个为一格，因此刻度应该为0、1000、2000……10000。可以使用interval属性设置y轴刻度。

var option = {
    ...
    yAxis: [
        {
            ...
            interval: 1000 // 设置y轴间隔为1000
        }
    ],
    ...
};

四、echartsx轴

x轴是一条线性轴，通常表示数据的类别或者时间。可以设置xAxis属性定义x轴的属性。

var option = {
    ...
    xAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    ...
};

这里使用category作为轴类型，data数组指定了x轴标签的内容。

五、echarts设置y轴数值

y轴的数值可能是小数，可以使用axisLabel的formatter属性设置小数位数。

var option = {
    ...
    yAxis: [
        {
            ...
            axisLabel: {
                formatter: '{value} 元'
            }
        },
        {
            ...
            axisLabel: {
                formatter: '{value}%'
            }
        }
    ],
    ...
};

这里分别设置了'元'和'%'。

六、echarts3d轴

3D柱状图中有三个轴：x轴、y轴和z轴。可以使用visualMap属性设置z轴的值域。

var option = {
    ...
    visualMap: {
        max: 100,
        inRange: {
            color: ['#B22222', '#DB7093', '#C71585', '#FF69B4', '#FFC0CB', '#FFDAB9', '#FFFFE0', '#F0E68C', '#ADFF2F', '#7FFF00', '#32CD32', '#00FF7F', '#00FA9A', '#00CED1', '#2F4F4F']
        }
    },
    series: [{
        type: 'bar3D',
        ...
    }]
};

这里设置了z轴的最大值为100，然后在inRange中设置了颜色渐变。注意，在visualMap是全局的，因此如果有多个3D柱状图，也会应用相同的设置。

七、echarts双y轴

如果我们需要绘制折线图和柱状图，可以使用双y轴。

var option = {
    ...
    yAxis: [
        {
            type: 'value',
            name: '销售额',
            axisLabel: {
                formatter: '{value} 元'
            }
        },
        {
            type: 'value',
            name: '销售量',
            axisLabel: {
                formatter: '{value} 件'
            }
        }
    ],
    series: [
        {
            name:'销售额',
            type:'bar',
            data:[300,400,500,600,700,800,900]
        },
        {
            name:'销售量',
            type:'line',
            yAxisIndex: 1,
            data:[50,70,90,110,130,150,170]
        }
    ]
};

这里定义了两个y轴，一个用于销售额，一个用于销售量；并且使用了一个柱状图和一个折线图展示数据。

八、echarts的x轴倾斜

有时候，x轴的标签文字过长，会导致文字被挤压或者重叠。可以使用axisLabel的rotate属性设置x轴倾斜角度。

var option = {
    ...
    xAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日'],
        axisLabel: {
            rotate: 45 // 旋转45度
        }
    },
    ...
};

这里将x轴标签文字旋转了45度。

九、echarts的y轴范围

如果我们需要限定y轴的范围，可以使用yAxis的min和max属性。

var option = {
    ...
    yAxis: [
        {
            type: 'value',
            name: '销售额',
            axisLabel: {
                formatter: '{value} 元'
            },
            min: 0, // 最小值为0
            max: 1000 // 最大值为1000
        },
        {
            ...
        }
    ],
    ...
};

十、echarts y轴滚动条选取

如果y轴的数据很多，需要滚动查看，可以使用dataZoom组件。

var option = {
    ...
    yAxis: [
        {
            ...
        },
        {
            ...
        }
    ],
    dataZoom: [
        {
            type: 'inside',
            yAxisIndex: 0,
            start: 0, // 默认起始位置
            end: 50 // 默认结束位置
        },
        {
            type: 'slider',
            yAxisIndex: 0,
            start: 0, // 默认起始位置
            end: 50 // 默认结束位置
        }
    ],
    ...
};

这里使用了两个dataZoom组件，第一个是内置式的，只能在图表中选取；第二个是滑动条式的，可以自由拖动选择范围。