echarts（五）高级篇（多坐标轴、复杂多坐标轴）

高级篇

多坐标轴

• 多坐标轴的常见应用就是一个图表有两个y 轴。

    /*基于准备好的dom，初始化echarts实例*/
const myChart = echarts.init(document.getElementById('main'));
    /*指定图表的配置项和数据*/
const option = {
    /*图例*/
    legend:{data:['学习人数','就业人数']},
    /*提示*/
    tooltip:{},
    /*x 轴*/
    xAxis:{
        data:['html','css','js']
    },
    /*y 轴
    *   name 坐标轴名称
    *   min 刻度最小值
    *   max 刻度最大值
    * */
    yAxis:[
    	 {name: '人数',min:0,max:50}, 
        //{interval:8},
        {}
    ],
    /*系列列表 series
    *   yAxisIndex 当前系列对应的y 轴的索引位置
    * */
    series:[
        {
            name:'学习人数',
            type:'bar',
            data:[30,20,40],
            yAxisIndex:0
        },
        {
            name:'就业人数',
            type:'bar',
            data:[330,450,850],
            yAxisIndex:1
        }
    ]
};
// 基于配置项显示图表。
myChart.setOption(option);

复杂多坐标轴

    const myChart = echarts.init(document.getElementById('main'));
    /*
    * data1 销售量的系列数据
    * data2 盈利额的系列数据
    */
    const data1=[60, 12, 16, 11, 16, 20];
    const data2=[-150, 120, 160, -110, 160, 1000];

    //理想行数（实际行数会有浮动）
    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;
    /*设置极小值
    *   如果系列1的最小比最大大于系列2的最小比最大，让系列1的极小值等于自身的极大值乘以系列2的极值比例
    *   否则，让系列2的极小值等于自身的极大值乘以系列1的极值比例
    *  */
    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);
    console.log(inter1,inter2);

    /*对极值微调*/
    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 maxRowNum=Math.max(max1/inter1,max2/inter2);
    const minRowNum=Math.min(min1/inter1,min2/inter2);

    /*极值微调*/
    min1=inter1*minRowNum;
    max1=inter1*maxRowNum;
    min2=inter2*minRowNum;
    max2=inter2*maxRowNum;

    /*配置项*/
    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>