双纵轴图表制作

jQuery双纵轴图表是一种常见的数据可视化方式，它可以在一个图表中展示两个不同的数据集，每个数据集都有自己的坐标轴，这种图表可以让我们更直观地比较和分析两个数据集之间的关系，在本文中，我们将详细介绍如何使用jQuery制作双纵轴图表。

1、准备工作

在开始制作双纵轴图表之前，我们需要先准备一些必要的资源和工具：

jQuery库：我们需要在项目中引入jQuery库，你可以从官方网站下载jQuery库，或者使用CDN链接引入。

<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>

ECharts库：ECharts是一个基于JavaScript的开源可视化库，它提供了丰富的图表类型和强大的功能，我们需要引入ECharts库来制作双纵轴图表。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

HTML结构：我们需要创建一个HTML容器来放置图表。

<div id="main" style="width: 600px;height:400px;"></div>

2、初始化ECharts实例

接下来，我们需要初始化一个ECharts实例，并将其绑定到刚才创建的HTML容器上，我们还需要设置图表的宽度、高度和背景颜色。

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    title: {
        text: '双纵轴图表示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

3、添加第二个纵轴

要添加第二个纵轴，我们需要对ECharts的配置进行一些修改，我们需要设置yAxis的type为value，并为其分配一个新的索引，我们需要为每个系列设置yAxisIndex属性，以指定它们对应的纵轴，我们需要为第二个纵轴设置name属性，以便在图例中显示。

myChart.setOption({
    yAxis: [{
        type: 'value',
        name: '销售额',
        index: 1,
        splitNumber: 5,
        min: 0,
        max: 250,
        position: 'right',
        axisLine: {
            lineStyle: {
                color: '#5793f3'
            }
        },
        axisLabel: {
            formatter: '{value} ' + '个'
        }
    }, {
        type: 'category',
        name: '商品类别',
        data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'],
        axisLine: {
            lineStyle: {
                color: '#d9d9d9'
            }
        },
        axisLabel: {
            fontSize: 12,
            color: '#666'
        }
    }],
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        yAxisIndex: 0, // 第一个纵轴（销售额）对应的索引为0，第二个纵轴（销量）对应的索引为1
    }, {
        name: '销售额',
        type: 'bar',
        data: [820, 932, 901, 934, 1290, 1330], // 销售额数据，与销量数据一一对应
        yAxisIndex: 1, // 第二个纵轴（销售额）对应的索引为1，第一个纵轴（销量）对应的索引为0（已在上面的series中设置）
    }],
});

现在，你应该可以看到一个包含两个纵轴的双纵轴图表了，这个图表展示了不同商品类别的销量和销售额数据，通过对比这两个数据，我们可以更好地了解商品的销售情况。