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中设置) }], });
现在,你应该可以看到一个包含两个纵轴的双纵轴图表了,这个图表展示了不同商品类别的销量和销售额数据,通过对比这两个数据,我们可以更好地了解商品的销售情况。
原创文章,作者:酷盾叔,如若转载,请注明出处:https://www.kdun.com/ask/376718.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复