ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

记录:Echarts利用多个X轴混合折线和散点图

2022-02-28 17:58:16  阅读:428  来源: 互联网

标签:10 false show data 散点图 折线 type Echarts


利用多个X轴混合折线和散点图,使二者相对独立存在。

echarts.registerTransform(ecStat.transform.regression);

option = {
    legend: {
        data:['随机点','折线']
    },
    xAxis: [
    	//  设置第一个x轴
        {
            type: 'category',
            data: [1,2,3,4,5,6,7,8,9,10,11,12],
            axisPointer: {
                type: 'shadow'
            }
        },
        //  设置第二个x轴
        {
            type: 'category',
            position: 'bottom',
            offset: 25,
            axisPointer: {
                type: 'none'
            },
            //  隐藏第二条x轴
            axisLine:{
               show:false
            },
            axisTick:{
               show:false
            },
            axisLabel:{
              show:false 
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: 'Y',
            min: 0,
        },
    ],
    series: [
        {
            name:'折线',
            type:'line',
             // 对应第一条x轴
            xAxisIndex:0,
            data:[2.0, 2.2, 8.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        },
        {
            name:'随机点',
            type:'scatter',
             // 对应第二条x轴
            xAxisIndex:1,
            // [x,y] 分别对应x和y轴上的坐标,可以自定义位置
            data:[[0.5, 1],[2.3, 10],[6, 13],[8, 14],[10, 7] ]
        },
        
    ]
};

标签:10,false,show,data,散点图,折线,type,Echarts
来源: https://blog.csdn.net/zqian1994/article/details/123188074

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有