双纵轴图表制作

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的配置进行一些修改,我们需要设置yAxistypevalue,并为其分配一个新的索引,我们需要为每个系列设置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中设置)
    }],
});

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

原创文章,作者:酷盾叔,如若转载,请注明出处:https://www.kdun.com/ask/376718.html

本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。

(0)
酷盾叔订阅
上一篇 2024-03-23 08:09
下一篇 2024-03-23 08:10

相关推荐

  • html5绘制折线图

    jQuery折线图是一种常见的数据可视化方式,它可以直观地展示数据的变化趋势,在网页开发中,我们可以使用jQuery库和一些第三方插件来实现折线图的绘制,本文将详细介绍如何使用jQuery实现折线图的绘制。准备工作1、引入jQuery库在HTML文件中,我们需要引入jQuery库,可以通过以下方式引入:&lt;script s……

    2024-03-22
    0264

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

产品购买 QQ咨询 微信咨询 SEO优化
分享本页
返回顶部
云产品限时秒杀。精选云产品高防服务器,20M大带宽限量抢购 >>点击进入