zoukankan      html  css  js  c++  java
  • echarts 实现同轴双向柱图

    一、效果:

     二、实现option:

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        legend: {
            data: ['入职', '离职']
        },
        axisPointer: {
            link: {xAxisIndex: 'all'}
        },
        grid: [{
            left: 50,
            right: 50,
            height: '35%'
        }, {
            left: 50,
            right: 50,
            top: '50%',
            height: '35%'
        }],
        xAxis: [
            {
                type: 'category',
                axisTick:{show:false},
                data: ['4月','5月','6月','7月','8月']
            },
            {
                gridIndex: 1,
                type: 'category',
                data: ['4月','5月','6月','7月','8月'],
                position: 'top',
                axisLabel:{show:false},
                axisTick:{show:false}
            }
        ],
        yAxis: [
            {
                name: '入职',
                type: 'value',
                axisTick:{show:false}
            },
            {
                gridIndex: 1,
                name: '离职',
                type: 'value',
                axisTick:{show:false},
                inverse: true
            }
        ],
        series: [
            {
                name: '入职',
                type: 'bar',
                // hoverAnimation: false,
                data: [
                    0.97,0.96,0.96,0.95,0.95
                ]
            },
            {
                name: '离职',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                // hoverAnimation: false,
                data: [
                    0.077,0.091,0.126,0.69,0.182
                ]
            }
        ]
    };
  • 相关阅读:
    javaTemplates-学习笔记三
    索引
    WTForms
    session权限限制
    vue-cli脚手架项目中组件的使用
    vue补充
    表单输入绑定
    vue指令系统介绍
    vue-cli脚手架安装和webpack-simple模板项目生成
    rest-framework之视图
  • 原文地址:https://www.cnblogs.com/art-poet/p/14413936.html
Copyright © 2011-2022 走看看