基于ECharts3实现的不均等比例Y轴示范源码资源-CSDN文库

共3个文件

html：2个

js：1个

5星 · 超过95%的资源需积分: 16 178 浏览量 2022-11-16 16:35:21 上传评论 1 收藏 319KB ZIP 举报

在本文中，我们将深入探讨如何使用ECharts3库来实现不均等比例的Y轴。ECharts是一款由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型和强大的交互功能，广泛应用于Web数据可视化场景。让我们了解不均等比例Y轴的概念。在常规的图表中，Y轴的刻度通常是等距的，意味着每个单位间隔代表相同的数值。但在某些情况下，为了更好地展示数据分布，我们可能需要使Y轴的刻度不均匀，即在不同的区间内有不同的间隔，这样可以突出显示某些区域的数据变化。要实现这个功能，ECharts3提供了一个名为`yAxis`的配置项，通过调整其`splitLine`、`splitArea`和`interval`属性，我们可以定制Y轴的显示方式。具体来说，`interval`属性用于设置Y轴刻度间隔，如果设置为自动，则ECharts会根据数据范围自动选择合适的间隔；如果我们希望手动设置不均等的间隔，可以将`interval`设为一个函数，该函数接收当前的数值作为参数，返回下一个刻度的位置。例如，假设我们有两组数据，一组在0-100范围内，另一组在0-1000范围内。为了更清晰地展示这两组数据，我们可以设置前半部分Y轴的间隔为10，后半部分为100。这可以通过以下代码实现： ```javascript option = { yAxis: { type: 'value', splitLine: { show: true }, splitArea: { show: true }, scale: true, boundaryGap: false, min: 0, max: 1000, interval: function(value) { if (value <= 100) { return value + 10; } else { return value + 100; } } }, // 其他配置... }; ``` 在这个示例中，`min`和`max`分别定义了Y轴的最小值和最大值，`scale`设置为`true`表示比例尺开启，`boundaryGap`设为`false`以消除刻度间的空白。`interval`函数根据传入的`value`判断是属于哪个区间，并返回相应的间隔值。在提供的压缩包文件中，`Source.html`和`Target.html`很可能是包含ECharts3实例的HTML文件，其中`echarts.min.js`是ECharts库的压缩版。你可以打开这些文件查看具体的代码实现，理解如何将上述理论应用到实际项目中。通过这样的配置，我们可以创建出更符合需求的图表，使数据的分布和变化更加直观。在ECharts3中，这种灵活性使得开发者能够针对各种复杂的数据场景进行定制化设计，从而提升数据可视化的用户体验。总结起来，本文介绍了如何使用ECharts3的Y轴配置项实现不均等比例的Y轴，这在处理数据分布差异较大的情况时非常有用。通过对`interval`属性的巧妙利用，我们可以自由控制Y轴的刻度间隔，以达到最佳的视觉效果。同时，我们也提到了压缩包中的文件，它们可能是实现这一功能的具体示例代码，可供学习和参考。

资源推荐

资源详情

资源评论

收起资源包目录

Y轴变换echarts示范源码.zip （3个子文件）

Source.html 8KB

echarts.min.js 994KB

Target.html 11KB

<!DOCTYPE html> <html lang="zh-CN" style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div>  <script type="text/javascript" src="echarts.min.js"></script>     <script type="text/javascript"> var dom = document.getElementById('container'); var myChart = echarts.init(dom, null, { renderer: 'canvas', useDirtyRect: false }); var app = {}; var option; //变轴算法。把真实数据按比例投影到对应的区间。 function formatData2(arr,a2b){ var newHashArray = [] for(var i=0;i<arr.length;i++){ var obj=[i,0]; var bValue = arr[i]; for(var j=0;j<a2b.length;j++){ if(j==a2b.length-1){break;} var A1 = a2b[j][0]; var B1 = a2b[j][1]; var A2 = a2b[j+1][0]; var B2 = a2b[j+1][1]; if(bValue>A2 && bValue<= A1){ bValue = B2 + (bValue-A2)/(A1-A2)*(B1-B2); break; } } obj[1] = bValue; newHashArray.push(obj); } return newHashArray; } //利润数。真实数据，范围从0-8000，按常规比例分割就是每1000分一段。 var wxdata=[731,650,261,518,688,815,688,647,726,2683,5110,6036,4296,2507,1574,1195,1020,1411,1111,1495,1826,2639,2938,2852,3152,2638,3449,3705,4343,4645,4170,3316,5072,4804,5448,5695,4635,4724,4724,4460,4877,4508,4438,4934,4282,4016,4383,4387,4771,4133,4529,4798,4670,4995,4434,4027,4491,3746,3758,3215,2631,2433,1973,1384,1067,931,588,538,375,333,316,225,178]; //变轴比例。期望显示的刻度线。本代码是显示柱状。 var a2bSW = [[8000,8000],[6000,7000],[4000,6000],[2000,5000],[1000,4000],[750,3000],[500,2000],[250,1000],[0,0]]; var wxArray = formatData2(wxdata,a2bSW); //利润率。真实数据，范围从0.044-22.54，按常规比例分割就是每3分一段。 var wxdata2=[22.54,14.68,4.42,7.63,9.60,9.39,6.83,5.47,5.47,9.78,13.77,15.09,15.50,11.36,7.23,5.34,4.27,5.57,5.50,7.22,7.31,8.15,7.99,7.47,8.30,7.17,8.01,8.84,9.08,8.67,7.57,6.30,8.00,7.06,7.49,7.05,7.45,7.61,7.20,6.68,6.55,6.01,5.09,4.52,4.72,5.10,4.93,4.52,4.94,4.92,5.25,5.71,5.07,5,3.72,3.08,2.81,2.04,1.485,1.182,0.892,0.749,0.564,0.374,0.288,0.255,0.162,0.156,0.106,0.091,0.083,0.059,0.044]; //变轴比例。期望显示的刻度线。本代码是显示折线。 var a2b100W = [[22.8,22.8],[15,19.95],[10,17.1],[5,14.25],[3,11.4],[2,8.55],[1,5.7],[0.04,2.85],[0,0]]; var wxArray2 = formatData2(wxdata2,a2b100W); var xdata=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73]; option = { legend:{ right:'11%', top:'6.5%', orient: 'vertical', data: [{ name: '利润数/单位', textStyle: { color: '#000000', fontStyle: "normal", fontSize: 22, fontWeight: "bold", fontFamily: "Microsoft YaHei" } },{ name: '单位利润率', textStyle: { color: '#000000', fontStyle: "normal", fontSize: 22, fontWeight: "bold", fontFamily: "Microsoft YaHei" } }] }, xAxis: { type: "category", data: xdata, axisLine: { show: true, lineStyle:{ width:3 } }, axisLabel: { fontWeight: "bold", fontFamily: "Times New Roman", fontSize: 22 } }, yAxis: [{ type: 'value', name:'利润数/单位', nameLocation: "middle", nameGap: 70, nameTextStyle: { fontStyle: "normal", fontSize: 22, fontWeight: "bold", fontFamily: "Microsoft YaHei" }, axisLine: { show: true, lineStyle:{ width:3 } }, splitLine:{ //横分割线 show: true, lineStyle:{ width:3 } }, axisTick: { show: true, lineStyle:{ width:3 } }, min: 0, max: 8000, splitNumber: 8, //强行显示指定Y轴刻度值 axisLabel: { formatter: function (v) { var item = ''; if (v === 0) { item = '0'; } else if (v == 8000) { item = '8000'; } else if (v == 7000) { item = '6000'; } else if (v == 6000) { item = '4000'; } else if (v == 5000) { item = '2000'; } else if (v == 4000) { item = '1000'; } else if (v == 3000) { item = '750'; } else if (v == 2000) { item = '500'; } else if (v == 1000) { item = '250'; } return item; }, fontWeight: "bold", fontFamily: "Times New Roman", fontSize: 28 } },{ type: 'value', name:'单位利润率', nameLocation: "middle", nameGap: 70, nameTextStyle: { fontStyle: "normal", fontSize: 22, fontWeight: "bold", fontFamily: "Microsoft YaHei" }, axisLine: { show: true, lineStyle:{ width:3 } }, axisTick: { show: true, lineStyle:{ width:3 } }, min: 0, max: 22.80, splitNumber: 8, interval:2.85, //强行显示指定Y轴刻度值 axisLabel: { formatter: function (v) { var item = ''; if (v === 0) { item = '0'; } else if (v == 22.8) { item = '22.80'; } else if (v == 19.95) { item = '10.00'; } else if (v == 17.1) { item = '5.00'; } else if (v == 14.25) { item = '1.00'; } else if (v == 11.4) { item = '0.75'; } else if (v == 8.55) { item = '0.50'; } else if (v == 5.7) { item = '0.10'; } else if (v == 2.85) { item = '0.04'; } return item; }, fontWeight: "bold", fontFamily: "Times New Roman", fontSize: 28 } } ], series: [ { name:"利润数/单位", data: wxArray, yAxisIndex: 0, type: 'bar', //zlevel:0, zlevel:0, markPoint:{ symbol: "diamond", //标注类型 symbolSize: 20 , //标记大小 data:[ { coord: [11, 10], name: '6036', y:'17%', label:{ show:true, align: 'center', verticalAlign: 'top', offset: [-37, -10], formatter: ['{b|6036}' ].join('\n'), rich: {b: { color: '#000000', fontWeight: "bold", fontFamily: "Times New Roman", fontSize: 22 } } }},{ coord: [72,

评论收藏

内容反馈