echarts双Y双X对比图实例

好的，让我来为您展示一个echarts双Y双X对比图实例：

<div id="chart" style="width: 800px;height:600px;"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('chart'));

var option = {
    title: {
        text: '双Y双X对比图实例'
    },

    tooltip: {
        trigger: 'axis'
    },

    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        {
            type: 'category',
            show: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
    ],

    yAxis: [
        {
            type: 'value',
            name: '收入',
            position: 'left',
            axisLabel: {
                formatter: '{value} 元'
            }
        },
        {
            type: 'value',
            name: '支出',
            position: 'right',
            axisLabel: {
                formatter: '{value} 元'
            }
        }
    ],

    series: [
        {
            name: '收入',
            type: 'bar',
            data: [2000, 2500, 3000, 3500, 4000, 4500, 5000],
            itemStyle: {
                normal: {
                    color: '#8bc34a'
                }
            }
        },
        {
            name: '支出',
            type: 'bar',
            data: [1200, 1600, 1800, 2000, 2200, 2500, 3000],
            itemStyle: {
                normal: {
                    color: '#f44336'
                }
            }
        }
    ]
};

myChart.setOption(option);
</script>

这个实例展示了如何用echarts创建一个双Y双X对比图。该图显示了一周中每天的收入和支出情况，其中收入用绿色柱状图表示，支出用红色柱状图表示，左侧Y轴表示收入，右侧Y轴表示支出，X轴表示每天。通过这个实例，你可以了解到如何使用echarts创建双Y双X对比图，以及如何设置X轴、Y轴、柱状图样式等相关属性。