Echarts示例代码

最新推荐文章于 2024-06-28 08:51:23 发布

小白学data

最新推荐文章于 2024-06-28 08:51:23 发布

阅读量1.3k

点赞数 23

文章标签：信息可视化大数据前端 javascript echarts

本文链接：https://blog.csdn.net/weixin_68473774/article/details/137226671

版权

本文介绍了如何通过引入ECharts库并使用JavaScript实现一个包含两个雷达图的数据可视化图表，展示了如何定义数据、配置选项以及在页面上显示雷达图的效果。

摘要由CSDN通过智能技术生成

1、引入 ECharts 库：

<script src="/js/echarts.min.js"></script>

这行代码通过 <script> 标签将 ECharts 库引入到页面中。ECharts 是一个用于创建交互式数据可视化图表的JavaScript库。

1、创建一个 div 用于显示雷达图：

<div id="main" style="height: 800px;width: 600px; background-image: url('/image/1.jpg'); background-size:100% 100%;"></div>

这个 <div> 元素用于显示雷达图。它的样式设置了高度、宽度和背景图片

3、JavaScript 代码：

// 定义数据
var data1 = ['王斌', 87.5, 87.5, 90, 91.5, 85, '刘倩', 90, 88.75, 85, 87, 88.75, '袁波', 92.5, 91.25, 88.75, 92.50, 91.25];

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById("main"));

// 配置项
option = {
    // 设置标题
    title: {
        text: '销售代表'
    },
    // 设置图例
    legend: {
        data: ['王斌', '刘倩', '袁波']
    },
    // 设置提示框
    tooltip: {
        trigger: 'item',
    },
    // 设置两个雷达图
    radar: [
        // 第一个雷达图配置
        {
            shape: 'circle',
            indicator: [
                { name: '销售', max: 100 },
                { name: '沟通', max: 100 },
                { name: '服务', max: 100 },
                { name: '协作', max: 100 },
                { name: '培训', max: 100 }
            ],
            center: ['80%', '51%'],
            radius: 100
        },
        // 第二个雷达图配置
        {
            indicator: [
                { name: '销售', max: 100 },
                { name: '沟通', max: 100 },
                { name: '服务', max: 100 },
                { name: '协作', max: 100 },
                { name: '培训', max: 100 }
            ],
            center: ['20%', '51%'],
            radius: 100
        }
    ],
    // 设置系列数据
    series: (function () {
        var series = [];
        // 循环处理数据
        for (var i = 0; i < data1.length; i += 6) {
            series.push({
                radarIndex: 0,
                name: data1[i],
                type: 'radar',
                symbol: 'none',
                lineStyle: {
                    width: 1
                },
                emphasis: {
                    areaStyle: {
                        color: 'rgba(0,250,0,0.3)'
                    }
                },
                data: [{
                    value: [
                        data1[i + 1],
                        data1[i + 2],
                        data1[i + 3],
                        data1[i + 4],
                        data1[i + 5]
                    ],
                    name: data1[i]
                }],
            });
        }
        // 添加第二个雷达图的数据
        series.push({
            radarIndex: 1,
            name: '销售方向',
            type: 'radar',
            data: [{
                    name: '王斌',
                    value: [87.5, 87.5, 90, 91.5, 85]
                },
                {
                    name: '刘倩',
                    value: [90, 88.75, 85, 87, 88.75]
                },
                {
                    name: '袁波',
                    value: [92.5, 91.25, 88.75, 92.5, 91.25]
                }
            ],
        });
        return series;
    })()
};

// 使用设置的配置项绘制图表
myChart.setOption(option);