当前位置: 移动技术网 > IT编程>开发语言>JavaScript > echarts 双Y轴图表

echarts 双Y轴图表

2019年11月15日  | 移动技术网IT编程  | 我要评论

直接代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1571424732409"></script>
</head>
<body>
<!--支出表-->
<div style="width: 1000px;height: 500px;background-color: #222222" id="test1">
</div>
</body>

<script>
    var chart1 = echarts.init(document.getelementbyid('test1'));
    var option = {
            title: [
                {
                    top: '40%',
                    left: 10,
                    subtextstyle: {
                        align: 'left',
                        color: '#ffffff',
                        fontsize: 12,
                    },
                    subtext: '每\n月\n执\n行\n金\n额'//   \n换行
                },
                {
                    top: '40%',
                    right: 10,
                    subtextstyle: {
                        align: 'right',
                        color: '#ffffff',
                        fontsize: 12,
                    },
                    subtext: '累\n计\n执\n行\n金\n额'
                },
            ],
            grid: {
                top: 100
            },
            backgroundcolor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorstops: [{
                    offset: 0, color: 'rgba(70, 131, 254, 0)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(70, 131, 254, 0.5)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            tooltip: {
                trigger: 'axis',
                axispointer: {
                    type: 'cross',
                    crossstyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: [
                    {name: '每月预计支出', icon: 'circle'},
                    {name: '每月实际支出', icon: 'circle'},
                    {name: '累计预计支出'},
                    {name: '累计实际支出'}
                ],
                textstyle: {
                    color: '#ffffff',
                    fontsize: 11
                },
                y: 'bottom',
                x: 'center',
            },
            xaxis: [
                {
                    type: 'category',
                    axisline: {
                        linestyle: {
                            color: '#1f7eff',
                            width: 1
                        }
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axispointer: {
                        type: 'shadow'
                    },
                    axislabel: {
                        interval: 0,//横轴信息全部显示
                        textstyle: {
                            color: '#fff'
                        },
                        fontsize: 11,
                        // rotate:45,//度角倾斜显示
                        formatter: function (value) {
                            return value.length > 5 ? value.substring(0, 5) + '...' : value;
                        }
                    }
                }
            ],
            yaxis: [//这里配置两条y轴
                {
                    type: 'value',
                    splitline: {
                        show: true,
                        linestyle: {
                            color: '#021439',
                            width: 1
                        }
                    },
                    axisline: {
                        linestyle: {
                            color: '#1f7eff',
                            width: 1
                        }
                    },
                    axislabel: {
                        show: true,
                        textstyle: {
                            color: '#fff'
                        },
                        fontsize: 11,
                        interval: 'auto',
                        formatter: '{value}'
                    },
                    name: '单位(万)',
                    nametextstyle: {
                        color: '#fff'
                    }
                },
                {
                    type: 'value',
                    splitline: {
                        show: true,
                        linestyle: {
                            color: '#021439',
                            width: 1
                        }
                    },
                    axisline: {
                        linestyle: {
                            color: '#1f7eff',
                            width: 1
                        }
                    },
                    axislabel: {
                        show: true,
                        textstyle: {
                            color: '#fff'
                        },
                        fontsize: 11,
                        interval: 'auto',
                        formatter: '{value}'
                    },
                    name: '单位(万)',
                    nametextstyle: {
                        color: '#fff',
                        fontsize: 11,
                    }
                }
            ],
            series: [
                {
                    name: '每月预计支出',
                    barwidth: '30%',
                    type: 'bar',
                    itemstyle: {
                        normal: {
                            linestyle: {
                                color: '#e09c19'
                            },
                            color: '#5184f2',
                        }
                    },
                    yaxisindex: 0, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
                    data: [
                        0
                        , 0
                        , 6
                        , 17
                        , 22
                        , 26
                        , 41
                        , 48
                        , 59
                        , 69
                        , 75
                        , 90
                    ]
                },
                {
                    name: '每月实际支出',
                    barwidth: '30%',
                    type: 'bar',
                    itemstyle: {
                        normal: {
                            linestyle: {
                                color: '#e09c19'
                            },
                            color: '#ff991e',
                        }
                    },
                    yaxisindex: 0,
                    data: [
                        0
                        , 0
                        , 10
                        , 15
                        , 25
                        , 30
                        , 35
                        , 50
                        , 55
                        , 70
                        , 80
                        , 85
                    ]
                },
                {
                    name: '累计预计支出',
                    barwidth: '30%',
                    type: 'line',
                    itemstyle: {
                        normal: {
                            linestyle: {
                                color: '#e63234'
                            },
                            fontsize: 11,
                            color: '#e63234',
                        }
                    },
                    symbol: 'circle',
                    symbolsize: 10, //折线点的大小
                    yaxisindex: 1, ////使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。
                    data: [
                        0
                        , 0
                        , 6
                        , 23
                        , 45
                        , 71
                        , 112
                        , 160
                        , 219
                        , 288
                        , 363
                        , 453]
                },
                {
                    name: '累计实际支出',
                    barwidth: '30%',
                    type: 'line',
                    itemstyle: {
                        normal: {
                            linestyle: {
                                color: '#42c96e'
                            },
                            fontsize: 11,
                            color: '#6ac3f1',
                        }
                    },
                    symbol: 'circle',
                    symbolsize: 10, //折线点的大小
                    yaxisindex: 1,
                    data: [
                        0
                        , 0
                        , 10
                        , 25
                        , 50
                        , 80
                        , 115
                        , 165
                        , 220
                        , 290
                        , 370
                        , 455
                    ]
                },
            ],
        }
    ;
    chart1.setoption(option);
</script>

</html>

 

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网