动态 版块 发帖 消息 我的
xwylt
书山有路勤为径,学海无涯苦作舟
lytcreateLv5   
echarts 雷达图实例     
<div id="cyld" style="width: 50%;height:300px;float:left;word-wrap:break-word;word-break:break-all;border:2px #11111111 solid; " >
{#    这里冲压车间的雷达图#}
        <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('cyld'));
        var option = {
    title: {
        text: '冲压车间安全责任落实情况'
    },
    tooltip: {},
    legend: {
        data: ['']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: '文件制度管理', max: 100},
            { name: '工作策划及资源保障', max: 100},
            { name: '培训、沟通', max: 100},
            { name: '消防及应急管理', max: 100},
            { name: '6SP', max: 100},
            { name: '安全检查绩效评分', max: 100},
            { name: '安全改进', max: 100},
            { name: '其他专项工作', max: 100,
                {#下面是显示每一圈的数字#}
            axisLabel: {
                show: true,
                fontSize: 12,
                color: '#DC143C',
                showMaxLabel: true, //不显示最大值,即外圈不显示数字30
                showMinLabel: false, //显示最小数字,即中心点显示0
            },},
        ]
    },

    series: [{
        name: '冲压车间安全责任落实情况)',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
            {
                value: [98, 95, 93, 94, 98, 70,20,99],
                name: '冲压车间安全责任落实情况',
                {#下面是显示雷达图拐点数值#}
                label: {
                    normal: {
                        show: true,
                        color:'#1E90FF',
                        formatter:function(params) {
                            return params.value;
                        }
                    }
                }
            },

        ]
    }]
};
    // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        </script>
</div>
效果图:


 2  已被阅读了242次  楼主 2020-09-16 09:12:00
回复列表

回复:echarts 雷达图实例

Powered by Xwylt.com
© 2020-2020 lytcreate
您的IP:54.236.35.159,2020-10-31 04:20:04,Processed in 0.01036 second(s).
Powered by HadSky
书山有路勤为径,学海无涯苦作舟
已有0次打赏