echarts

作者: 汀上 | 来源:发表于2019-05-30 20:37 被阅读0次

画个雷达图

  option = {
        animation: false,
        radar: [{
            indicator: [{
                    text: '财富',
                    max: 100,
                    color: '#000'
                },
                {
                    text: '事业',
                    max: 100,
                    color: '#000'
                },
                {
                    text: '健康',
                    max: 100,
                    color: '#000'
                },
                {
                    text: '父母',
                    max: 100,
                    color: '#000'
                },
                {
                    text: '子女',
                    max: 100,
                    color: '#000'
                },
                {
                    text: '婚姻',
                    max: 100,
                    color: '#000'
                }
            ],
            center: ['50%', '50%'],
            radius: 90,
            splitLine: {//分隔线
                    show: true,
                    lineStyle: {
                        color: 'rgba(251,139,140,.5)'
                    }
                },
                splitArea: {//分割区域
                    show: true,
                    areaStyle :{
                        color:['rgba(249,136,136,.1)']
                    }
                    
                },
                axisLine: {//雷达线
                    show: true,
                    lineStyle: {
                        color: 'rgba(251,139,140,.3)',
                        width: 2,
                    }
                }
        
        }],
        series: [{
            name: '成绩单',
            type: 'radar',
            radarIndex: 0,
            symbol:'none',
            itemStyle: {
                normal: {
                    lineStyle: {
                        color:"rgba(0,0,0,0)" // 图表中各个图区域的边框线颜色
                    }
                }
            },
            areaStyle:{
                 normal: { 
                    color : new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                             offset: 1,
                             color: '#ff6a6b'
                         },
                         {
                             offset: .5,
                             color: '#ff8d8e'
                         },
                         {
                             offset: .1,
                             color: '#ffafb0'
                         }]), // 图表中各个图区域的填充色
                }
            },
            data: [{
                value: [10,20,30,40,50,60],
                label: {
                    normal: {
                        color: 'rgba(0, 0, 0, 0.5)',//图上数字的颜色
                        show: false,
                        formatter: function(params) {
                            return params.value;
                        }
                    }
                }
            }]
        }]
    };
d6cf34921ac0fbc93648445fa2d2a2e.png

相关文章

网友评论

      本文标题:echarts

      本文链接:https://www.haomeiwen.com/subject/mesbtctx.html