Echarts极地坐标图直径半径设置
var dom = document.getElementById("theChart");
var myChart = echarts.init(dom);
option = null;
var param_a = [13652,16154,18615,20733,16578,13036,14167,15047,15573,15854];
var param_c = [12652,15154,17615,19733,15678,12036,15167,16047,15573,16854];
var res_data = [];
for(var t = 0;t < param_a.length;t++){
if(param_c == ''){
res_data.push([0,param_a[t],param_a[t]]);
}else{
res_data.push([0,param_c[t],param_a[t]]);
}
}
var data = res_data;
/*var data = [
[2000, 10000, 10385.71],
[2000, 10000, 10251],
[2000, 9500, 9663.33],
[2000, 8600, 8793.83],
[1500, 7000, 7160],
[1500, 6000, 6222.33],
[1000, 4500, 4533.33],
[1000, 4000, 4100],
[1000, 3500, 2750],
[1000, 6500, 7750],
];*/
var cities = ['1年', '2年', '3年', '4年', '5年', '6年', '7年', '8年', '9年', '10年'];
//var barHeight = 100;
option = {
legend: {
show: true,
data: ['个人', '平均'],
textStyle:{
color: '#000'
},
bottom: 0,
right: 10
},
grid: {
},
angleAxis: {
type: 'category',
data: cities,
axisLabel: {
margin: 2,
},
startAngle: 90,//刻度轴角度
axisLine:{
lineStyle:{
color:'#333'
}
},
//z: 9
},
tooltip: {
show: true,
formatter: function(params) {
var id = params.dataIndex;
return cities[id] + '<br>低:' + data[id][0] + '<br>高:' + data[id][1] + '<br>测:' + data[id][2];
}
},
radiusAxis: {
splitLine: { //分割线
show: true,
lineStyle: {
color: '#999',
},
},
axisLine:{
lineStyle:{
color:'#333'
}
},
z: 11,
},
polar: { //极坐标
center: ['50%','50%'],
radius: [[190]]//半径大小
},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data.map(function(d) {
return d[0];
}),
coordinateSystem: 'polar',
stack: '最大最小值',
silent: true
}, {
type: 'bar',
data: data.map(function(d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar',
name: '平均',
stack: '最大最小值',
itemStyle:{
normal:{
opacity: .7,
color: '#ff8896'
}
}
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data.map(function(d) {
var a_b = division(d[2],25);
return multiply(a_b,24);
}),
coordinateSystem: 'polar',
stack: '个人',
silent: true,
z: 10
}, {
type: 'bar',
data: data.map(function(d) {
var a_a = division(d[2],25);
return multiply(a_a,1);
}),
coordinateSystem: 'polar',
name: '个人',
stack: '个人',
barGap: '-100%',
z: 10,
itemStyle: {
normal: {
color: '#ffe400'
}
},
}],
};
if(option && typeof option === "object") {
myChart.setOption(option, true);
}
function num(a){
if(a != null && a.toString() != "") {
var r = /^-?(0|[1-9]+\d*|[1-9]+\d*\.\d+|0\.\d+)$/;
if(r.test(a.toString())) {
return true;
}
}
return false;
}
function division(a, b){
if(!num(a) || !num(b)) {
return null;
}
var c, d, f, g;
try {
c = a.toString().split(".")[1].length;
} catch(e) {
c = 0;
}
try {
d = b.toString().split(".")[1].length;
} catch(e) {
d = 0;
}
with(Math) {
f = Number(a.toString().replace(".", ""));
g = Number(b.toString().replace(".", ""));
return parseInt((f / g) * pow(10, d - c));
}
}
function multiply(a,b) {
var m = 0,
c = a.toString(),
d = b.toString();
try {
m += c.split(".")[1].length
} catch(e) {}
try {
m += d.split(".")[1].length
} catch(e) {}
return parseInt(Number(c.replace(".", "")) * Number(d.replace(".", "")) / Math.pow(10, m))
}
关注公众号
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
-
上一篇
iframe父子页面通讯解决方案
有两点要注意 onload加载完成再进行操作 子页面延时获取 场景是这样的,父级页面嵌套了多个iframe,report_six.html子级页面按需加载数量,且每个子页面渲染不同的数据。 父页面for循环加载子页面数量,动态生成id,根据对应的id,传值给对应的子级页面元素,一定要写在onload里面 下面是父页面 <body> <iframe src="report_one.html" frameborder="0" width="630" height="891"></iframe> <iframe src="report_two.html" frameborder="0" width="630" height="891"></iframe> <iframe src="report_three.html" frameborder="0" width="630" height="891"></iframe> <iframe src="report_four.html" frameborder=...
-
下一篇
[雪峰磁针石博客]kotlin书籍汇总
下载地址 Learning Kotlin by Building Android Applications - 2018 初级 Develop amazing applications that will help you understand and explore the fundamentals of Kotlin while covering 3 various types of projects Key Features Explore the fundamentals of Kotlin by building effective Android applications. Develop and test Android applications using only the Kotlin language. One of the major (and best) Android features, Kotlin provides deep interoperability with Java. Book Description Google has extended s...
相关文章
文章评论
共有0条评论来说两句吧...

微信收款码
支付宝收款码