Echarts-双轴图

最新推荐文章于 2025-05-07 12:04:34 发布

采精小蝴蝶

最新推荐文章于 2025-05-07 12:04:34 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/jrrfgj/article/details/87364002

版权

本文介绍了如何使用Echarts创建一个包含三条折线的图表，其中一条表示可利用率，另外两条表示数量。通过详细阐述问题描述、实现源码和最终效果，帮助读者掌握Echarts双轴图的制作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、问题描述

利用Echarts制作一个折线图，条件是：三条折线，一条代表可利用率，另外两条代表数量。

2、实现源码

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>Echarts-双轴图</title>  <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">  <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>  <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>  <style>   body,html{    width: 99%;    height: 99%;    font-family: "微软雅黑";    font-size: 12px;   }   #double{    width: 100%;    height: 100%;    font-family: "agency fb";    font-weight: bolder;   }  </style>  <script>   $(function(){    var chart = document.getElementById('double');                  var echart = echarts.init(chart);                                    var option = {        title : {            text: '可利用率',            subtext: '',            x: 'center',            align: 'right'        },        grid: {            bottom: 80        },        tooltip : {            trigger: 'axis',            axisPointer: {                animation: false            },            formatter: function (params) {                var res = params[0].name;                for (var i = 0, l = params.length; i < l; i++)                 {                 if(i==0)                 {                  res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "%";                 }                 else                 {                  res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;                 }                }                                return res;            }        },        legend: {            data:['可利用率','A','B'],            x: 'left'        },        xAxis : [            {                type : 'category',                axisLabel: {        rotate: 45       },                boundaryGap : false,                axisLine: {onZero: false},                data : ['2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月','2016年6月','2016年7月','2016年8月','2016年9月','2016年10月','2016年11月','2016年12月'].map(function (str) {                    return str.replace(' ', '\n')                })            }        ],        yAxis: [            {                name: '可利用率',                type: 'value',                max: 100,                axisLabel: {                     show: true,                     interval: 'auto',                     formatter: '{value} %'                   }            },            {                name: 'A',                nameLocation: 'start',                type: 'value',                inverse: true            },            {                name: 'B',                nameLocation: 'start',                type: 'value',                inverse: true            }        ],        series: [            {                name:'可利用率',                type:'line',                hoverAnimation: false,                itemStyle: {                 normal: {                  label : {                   show:false,                   position:'top',                   formatter:'{c} %'                  }                 }                },                areaStyle: {                    normal: {}                },                lineStyle: {                    normal: {                        width: 1                    }                },                data:[12,78,34,67,88,45,65,77,31,21,90,54]            },            {                name:'A',                type:'line',                yAxisIndex:1,                hoverAnimation: false,                areaStyle: {                    normal: {}                },                lineStyle: {                    normal: {                        width: 1                    }                },                data: [1,4,5,8,3,2,7,6,9,2,4,3]            },            {                name:'B',                type:'line',                yAxisIndex:1,                hoverAnimation: false,                areaStyle: {                    normal: {}                },                lineStyle: {                    normal: {                        width: 1                    }                },                data: [0,2,3,7,1,0,5,2,6,1,2,1]            }        ]    };                                  echart.setOption(option);     });  </script> </head> <body>  <div id="double"></div> </body></html>

3、实现结果

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow