<!--
此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRARAMYCGYVA5sAE7m0A0J6AE2aMiAbQBMABgCM0nlOnj5MgMzLpAFnUBWdQDZ1AdgC6JAL5905HPiKpSZSjVgByAG6MANgFcqLy6SMuHgAMhDQzvYOsHgAFsAA7kQAZl54VPywFplB-AAqEPQA1naZ6HGJKWkZDtkOALbhRJIB6PVBRAAckj2tMSCeEGAAct71AEZUHESGfbmhjJOepdGwyZztYCzTa97Q9JAwsAAUbgCUxKvoHhywQ1T1CK4uANxlpBDJJ24I8IiSFyiVzuLEeiBckle73QZlgVE86TuX1Ov1g3R6gOhH1BTxc6Mhb2BsPhiM-31Rhh6AMuwJBD1xem0PShRLhCKoSPJf1geipmNpdLBriZzMJV2J7M5KO5IupQKu9yFLhUIpZ4rZpORP25Gj5NOBitxUlFWIlmq5iBUevlq0N4OkVLVqzNHLJ0sQxrlWPQduFJtZJNdWtRDox-oVOPBVoJpqxHCoYG8HDgirFtUyZnMAXSHAgVEIsFEmRtsCEYBEhaxohasEpPWMfQcojksG00k6nQbVaUsGkKk6Gi7wNEal7kj0JkbpFEWlgAE4VNIh1dRLpWx3l6tRAZYCpDNpTKtN6QKNQiC5BhEXBmSKYzC8gA
⚠ 请注意，该图表不是 Apache ECharts 官方示例，而是由用户代码生成的。请注意鉴别其内容。
-->
<!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="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
Uncomment this line if you want to dataTool extension -->
<script type="text/javascript" src="echarts.min.js"></script>
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/extension/bmap.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,
基于ECharts3实现的不均等比例Y轴示范源码
5星 · 超过95%的资源 需积分: 16 182 浏览量
2022-11-16
16:35:21
上传
评论 1
收藏 319KB ZIP 举报 
Y轴变换echarts示范源码.zip （3个子文件） 
Source.html 8KB
echarts.min.js 994KB Target.html 11KB
li55703833
- 粉丝: 7
- 资源: 4
- 1
- 2
前往页