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条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7设置SWAP分区,小内存服务器的救世主
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- CentOS6,CentOS7官方镜像安装Oracle11G
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2全家桶,快速入门学习开发网站教程
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS8编译安装MySQL8.0.19