echarts用两个y轴显示两组有正负数的数据

这个标题有点长，咱们看图就好理解了：

这个图表用两个系列，表示了某个服装店里所有衣服的销售量和盈利额。
从这个图表里，我们可以一目了然的看出，衬衫和裤子买赔了，因为它们的盈利额为负数。

理解了我要表达的意思，咱们接下来就说一下绘制图表核心思路。

绘制图表核心思路

核心思想：通过极值和行高控制y 轴的刻度
核心代码：

yAxis: [
    {
        type: 'value',
        scale: true,
        name: '销售量',
        min: min1,
        max: max1,
        interval: inter1,
    },
    {
        type: 'value',
        scale: true,
        name: '盈利额',
        min: min2,
        max: max2,
        interval: inter2,
    }
],

上面的min、max属性是y轴刻度的最小值、最大值，interval 是行高。

我们接下来就根据实际数据去计算这两组y 轴的三个属性即可。

极值和行高的计算过程

1.声明一下基本数据。
系列数据：

/*
* data1 销售量的系列数据
* data2 盈利额的系列数据
*/
const data1=[15, 12, 16, 11, 16, 20];
const data2=[-150, 120, 160, -110, 160, 200];

理想行数（实际行数会有浮动）

const rowNum=6;

2.取两个系列的数据的极值(最大值和最小值)。

/*数据极值
*   max1 销售量数据的最大值
*   max2 盈利额数据的最大值
*   min1 销售量数据的最小值
*   min2 盈利额数据的最小值
* */
let max1=Math.max(...data1);
let max2=Math.max(...data2);
let min1=Math.min(...data1);
let min2=Math.min(...data2);

这时候我们还要让盈利额的极值应对2种特殊情况。
当销售量的最大值比销售额的最大值还大时，如下图：

2.极值比例

const rat1=min1/max1;
const rat2=min2/max2;

3.设置两个系列的极小值

/*比例大小对比*/
const ratState=rat1>rat2;
/*设置极小值*/
if(ratState){
    min1=rat2*max1;
}else{
    min2=rat1*max2;
}

4.基于系列数据的极值取极差，然后除以行数得到行高，对行高上舍取整。

const inter1=Math.ceil((max1-min1)/rowNum);
const inter2=Math.ceil((max2-min2)/rowNum);

5.基于两个系列的行高，对两个系列的极值微调。

min1=Math.floor(min1/inter1)*inter1;
max1=Math.ceil(max1/inter1)*inter1;
min2=Math.floor(min2/inter2)*inter2;
max2=Math.ceil(max2/inter2)*inter2;

6.将inter1、inter2、min1、max1、min2、max2放到两个y 轴即可。

yAxis: [
    {
        type: 'value',
        scale: true,
        name: '销售量',
        min: min1,
        max: max1,
        interval: inter1,
    },
    {
        type: 'value',
        scale: true,
        name: '盈利额',
        min: min2,
        max: max2,
        interval: inter2,
    }
],

完整代码：

<div id="main" style="width: 700px;height:600px;"></div>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
<script>
    const myChart = echarts.init(document.getElementById('main'));

    /*
    * data1 销售量的系列数据
    * data2 盈利额的系列数据
    */
    const data1=[15, 12, 16, 11, 16, 20];
    const data2=[-150, 120, 160, -110, 160, 200];

    //理想行数（实际行数会有浮动）
    const rowNum=6;

    /*数据极值
    *   max1 销售量数据的最大值
    *   max2 盈利额数据的最大值
    *   min1 销售量数据的最小值
    *   min2 盈利额数据的最小值
    * */
    let max1=Math.max(...data1);
    let max2=Math.max(...data2);
    let min1=Math.min(...data1);
    let min2=Math.min(...data2);

    /*极值比例*/
    const rat1=min1/max1;
    const rat2=min2/max2;

    /*比例大小对比*/
    const ratState=rat1>rat2;
    /*设置极小值*/
    if(ratState){
        min1=rat2*max1;
    }else{
        min2=rat1*max2;
    }

    /*
    * inter1 销售量的行高取整
    * inter2 盈利额的行高取整
    * */
    let inter1=Math.ceil((max1-min1)/rowNum);
    let inter2=Math.ceil((max2-min2)/rowNum);

    /*对极值微调*/
    min1=Math.floor(min1/inter1)*inter1;
    max1=Math.ceil(max1/inter1)*inter1;
    min2=Math.floor(min2/inter2)*inter2;
    max2=Math.ceil(max2/inter2)*inter2;

    /*配置项*/
    const option = {
        tooltip: {},
        legend: {
            data: ['销售量', '盈利额']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: [
            {
                type: 'value',
                scale: true,
                name: '销售量',
                min: min1,
                max: max1,
                interval: inter1,
            },
            {
                type: 'value',
                scale: true,
                name: '盈利额',
                min: min2,
                max: max2,
                interval: inter2,
            }
        ],
        series: [
            {
            name: '销售量',
            type: 'bar',
            yAxisIndex: 0,
            data: data1,
            },
            {
            name: '盈利额',
            type: 'bar',
            yAxisIndex: 1,
            data: data2
            }
        ]
    };
    myChart.setOption(option);
</script>