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开源数据库
本实验环境已内置PostgreSQL数据库以及PolarDB开源数据库:PolarDB PostgreSQL版和PolarDB分布式版,支持一键拉起使用,方便各位开发者学习使用。
目录
相关文章
|
7月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
250 0
echarts设置单位的偏移
echarts设置单位的偏移
|
2月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
191 2
|
7月前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
141 0
echarts迁徙图
前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
6月前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
277 0
 ECharts 雷达图案例001-自定义节点动画
|
6月前
|
数据可视化 黑灰产治理
📊 ECharts 雷达图案例002 - 诈骗性质分析
**ECharts 案例展示了诈骗性质的雷达图分析,以创新可视化揭示诈骗模式。定制化雷达图配色鲜明,多维度剖析不同诈骗手段,如网络刷单、冒充公检法。交互式设计允许用户深入探究细节。[点击这里](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454384)查看完整案例。#ECharts #数据可视化 #雷达图 #诈骗分析**
64 0
📊 ECharts 雷达图案例002 - 诈骗性质分析
|
5月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
465 0
|
7月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
154 0

热门文章

最新文章

下一篇
DataWorks