双纵轴图表制作

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

为渭南等地区用户提供了全套网页设计制作服务，及渭南网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、渭南网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

1、准备工作

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

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

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

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

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中设置）
    }],
});

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

本文名称：双纵轴图表制作
网站URL：http://www.csdahua.cn/qtweb/news30/306330.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：快上网

成都快上网为您推荐相关内容