Echarts雷达图

最新推荐文章于 2024-04-29 21:10:25 发布

还是那个同伟伟

最新推荐文章于 2024-04-29 21:10:25 发布

阅读量321

点赞数

分类专栏： Echarts画图文章标签：数据可视化 js echarts html5

原文链接：https://blog.csdn.net/weixin_43392489/article/details/110789057

版权

Echarts画图专栏收录该内容

8 篇文章 0 订阅

订阅专栏

员工技能雷达图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
var option = {
    title: {
        text: '雷达图'
    },
    tooltip: {},
    legend: {
        data: ['1号员工', '2号员工']
    },
    radar: {
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: '技能A', max: 6500},
            { name: '技能B', max: 16000},
            { name: '技能C', max: 30000},
            { name: '技能D', max: 38000},
            { name: '技能E', max: 52000},
            { name: '技能F', max: 25000}
        ]
    },
    series: [{
        type: 'radar',
        data: [
            {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '1号员工'
            },
            {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: '2号员工'
            }
        ]
    }]
};

       // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

还是那个同伟伟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts雷达图

员工技能雷达图<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title>  <script src="../echarts.js"></script></head><body> <!.
复制链接

扫一扫