举报投诉联系我们 手机版 热门标签 名动网
您的位置:名动网 > echarts 极坐标 ECharts设置极坐标系属性

echarts 极坐标 ECharts设置极坐标系属性

2023-05-26 16:20 ECharts教程

echarts 极坐标 ECharts设置极坐标系属性

echarts 极坐标

echarts 极坐标是一种特殊的坐标系,它将数据的每个点映射到一个圆形的坐标系上,从而可以更好地表达数据之间的关系。

echarts 极坐标可以用来表达多个数据之间的关系,它可以帮助我们快速了解数据之间的关系。例如,我们可以使用 echarts 极坐标来表达不同省份的人口分布情况,这样我们就可以很容易地看出不同省份人口分布情况之间的差异。

echarts 极坐标也可用于表达多个数据之间的相对大小关系。例如,我们可以使用 echarts 极坐标来表达不同国家GDP大小关系,这样我们就能很容易地看出不同国家GDP大小关系之间的差异。

var myChart = echarts.init(document.getElementById('main')); 
var option = { 
    title : { 
        text: 'ECharts 极坐标' 
    }, 
    tooltip : {}, 
    legend: { 
        data:['销量'] 
    }, 

    polar : [{ 

        indicator : [{text : 'A', max : 100}, 

            {text : 'B', max : 100}, 

            {text : 'C', max : 100}, 

            {text : 'D', max : 100},  

            {text : 'E', max : 100}],  

        radius: 80,  

        startAngle: 90,  

        splitNumber: 4,  

        name:{show:true}  

    }],  

    series : [{name: '销量', type: 'radar', data:[{value:[60,73,85,40,50], name:'销量'}]}]};     myChart.setOption(option); 

ECharts设置极坐标系属性

polar.zlevel   |   number

[ default: 0 ]

得到 ECharts 中极坐标系所有图形的 zlevel 值。

zlevel 用于 Canvas 分层,不同 zlevel 值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

polar.z   |   number

[ default: 2 ]

得到 ECharts 中极坐标系所有图形的 z 值。控制图形的前后顺序,z 值小的图形会被 z 值大的图形覆盖。

z 相比 zlevel 优先级更低,而且不会创建新的 Canvas。

polar.center   |   Array

[ default: ['50%', '50%'] ]

得到极坐标系的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。

可以设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。

使用示例:

// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']

polar.radius   |   Array

得到极坐标系的半径,数组的第一项是内半径,第二项是外半径。

支持设置成百分比,相对于容器高宽中较小的一项的一半。

阅读全文
以上是名动网为你收集整理的echarts 极坐标 ECharts设置极坐标系属性全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 名动网 mdwl.vip 版权所有 联系我们