Echarts 多y轴的配置

最新推荐文章于 2024-01-30 11:48:22 发布

聰籽

最新推荐文章于 2024-01-30 11:48:22 发布

阅读量717

点赞数

分类专栏：图表

本文链接：https://blog.csdn.net/weixin_44446223/article/details/103089519

版权

图表专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多系柱状图</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1200px;height:800px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var data =[
    {
    "id":"passengerVolume",
    "name":"客运量",
    "data":[0,0,1412,2707,710,1276,290,0,598,191,429,343,0],
    "type":"bar",
    "yAxisIndex":"0"//启用第一个y轴
    ,"color":"rgba(108,111,192,1)"
    },{
    "name":"发班数",
    "id":"classNumber",
    "type":"bar",
    "data":[0,0,140,391,165,68,13,0,266,11,25,27,2],
    "color":"rgba(255,178,24,1)"
    },{
    "name":"实载率",
    "id":"actualLoadRate",
    "type":"bar","data":[0,0,17.23076923076923,13.692307692307693,7.615384615384615,7.6923076923076925,9.846153846153847,0,4.3076923076923075,5.461538461538462,8.076923076923077,2.3846153846153846,0],
    "yAxisIndex":"2",//启用第一个y轴
    "color":"rgba(91,217,169,1)"
    }]
    var months = ["201811", "201812", "201901", "201902", "201903", "201904", "201905", "201906", "201907", "201908", "201909", "201910", "201911"];
    // 指定图表的配置项和数据
   const option = {
        // color: ['#003366', '#006699', '#4cabce', '#e5323e'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            return '<p style="color: #c89a26;">' + params[0].name + '</p><br>' + '<p style="background-color:'+params[0].color+'">客运量:' + params[0].value+ '<p><br>' + '<p  style="background-color:'+params[1].color+'">发班数: ' +params[1].value + '</p><br>' + '<p  style="background-color:'+params[2].color+'">实载率: ' + (params[2].value).toFixed(2) + '%</p>'
          },
        },
        legend: {
          data: ['客运量', '发班数', '实载率']
        },

        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data:months 
          }
        ],
        yAxis: [
          {
            position: 'left',
            type: 'value',
            name: '客\n运\n量',
            nameLocation: "center",
            nameGap: 50,
            nameRotate: 0,
            splitLine: {
                show: false,
                lineStyle: {
                    color: ['#fafafa']
                }
            },
          },
          {
            position: 'left',
            offset: 70,
            type: 'value',
            name: '发\n班\n数\n量',
            axisLine: {
              show: false//关闭轴线
            },
            
            // nameGap: -960,
            nameRotate: 0,
            nameLocation: "center",
          },
          {
            min: 0,
            max: 100,
            type: 'value',
            name: '实\n载\n率',
            nameGap: 60,
            nameRotate: 0,
            nameLocation: "center",
          }
        ],
        series: data 
      };
 
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

series:[
        {
            name:'客运量', 
            type:'bar',
            barMaxWidth:'20%',
            label:{
                normal:{
                    show:true,
                    position:'top'
                }
            },
            yAxisIndex:'0',//使用第一个y轴，序号从0开始
            data: [23,27,28,30,34,36,39,41,45,46,56,60]
        },
        {
            name:'发班数', 
            type:'bar',
            barMaxWidth:'20%',
            label:{
                normal:{
                    show:true,
                    position:'top'
                }
            },
            yAxisIndex:'1',//使用第二个y轴
            data:[1500,1700,1750,1800,1850,1900,1910,1941,1980,2000,2100,2200]
        },
        {
            name:''实载率',
            type:'bar',
            barMaxWidth:'20%',
            label:{
                normal:{
                    show:true,
                    position:'top'
                }
            },
            yAxisIndex:'2',//使用第三个y轴
            data:[3500,3600,4200,4800,5500,6500,4900,3500,5400,5500,6500,7000]
        }
    ]
yAxisIndex ：使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。（使用第几个Y轴坐标） 例如yAxisIndex:"1" 第二个y轴

聰籽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts 多y轴的配置

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>多系柱状图</title>  <script src="js/echarts.js"></script...
复制链接

扫一扫