Echarts多系多y轴的配置

最新推荐文章于 2024-06-05 09:34:51 发布

氵易风灬

最新推荐文章于 2024-06-05 09:34:51 发布

阅读量1.4w

点赞数 3

分类专栏：数据可视化Echarts

本文链接：https://blog.csdn.net/qq_21963133/article/details/79279848

版权

数据可视化Echarts 专栏收录该内容

5 篇文章 4 订阅

订阅专栏

有时候在一个图形中需要显示的对象多样化，一个y轴并不能满足我们的需求。这时我们就需要配置多个y轴

<!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:600px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var colors = ['#FD2446','#248EFD','#C916F2','#6669B1'];//自定义一个颜色数组，多系时会按照顺序使用自己定义的颜色数组，若不定义则使用默认的颜色数组
    var months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
    // 指定图表的配置项和数据
    var option = {
        color:colors,
        title: {//标题，可以自定义标题的位置和样式
            text: '某地区的、单位数、职工人数、和平均工资'
        },
        legend: {//图例，每一个系列独有一个图例，注意：图例的名字必须跟下面series数组里面的name一致。
            data: ['单位数','职工数', '平均工资' ],
        },
        tooltip: {//鼠标悬浮时的样式，可自定义
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'cross'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {//x轴的配置
            data: months
        },

        yAxis: [
            {//第一个y轴位置在左侧
                position:'left',
                type : 'value',
                name: '单位数',
                axisLine: {
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value} 个'
                }
            },
            {//第二个y轴在右侧
                position:'right',
                type : 'value',
                name: '职工数',
                axisLine: {
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisLabel: {
                    formatter: '{value} 人'
                }
            },
            {//第三个y轴也在右侧，距第二个70个像素
                position:'right',
                offset:70,
                type : 'value',
                name: '平均工资',
                axisLine: {
                    lineStyle: {
                        color: colors[2]
                    }
                },
                axisLabel: {
                    formatter: '{value} 万元'
                }
            }
        ],
        toolbox: {//工具栏组件
            show : true,
            feature : {
                magicType : {show: true, type: ['line', 'bar']},//柱状图和折线图相互转换
                dataView:{
                    show: true,
                    title: '某地区的、单位数、职工人数、和平均工资'
                    }
                },
                saveAsImage : {show:true},//保存图片
                restore : {show: true}//还原

        },
        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]
        }
    ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

下面是效果图：

氵易风灬

关注

3
点赞
踩
16

收藏

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

有时候在一个图形中需要显示的对象多样化，一个y轴并不能满足我们的需求。这时我们就需要配置多个y轴多系柱状图 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var colors =
复制链接

扫一扫