Echarts极地坐标图直径半径设置

本文涉及的产品
云原生数据库 PolarDB 分布式版,标准版 2核8GB
简介:

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))

}

相关实践学习
跟我学:如何一键安装部署 PolarDB-X
《PolarDB-X 动手实践》系列第一期,体验如何一键安装部署 PolarDB-X。
目录
相关文章
|
1月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
14 0
echarts设置单位的偏移
echarts设置单位的偏移
|
15天前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
20 0
|
22天前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
24 0
|
29天前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
|
6月前
|
JSON 数据格式
Echarts设置背景的网格线为虚线
Echarts设置背景的网格线为虚线
160 0
|
4月前
|
JavaScript 数据可视化 前端开发
ECharts 的配置语法:配置选项、数据格式、样式设置
ECharts 的配置语法:配置选项、数据格式、样式设置
135 1
echarts设置多条折线不是你想的那样简单
echarts设置多条折线不是你想的那样简单
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色