Echarts快速上手_以HTML中画雷达图为例

最新推荐文章于 2024-08-02 10:05:12 发布

manggoyyds

最新推荐文章于 2024-08-02 10:05:12 发布

阅读量1.6k

点赞数

文章标签： echarts html 前端

本文链接：https://blog.csdn.net/weixin_42092704/article/details/126600344

版权

这是一个代码小白学习使用Echarts的过程，以雷达图为例，步骤详细，简单易懂，其他图表也可参考此例（完整代码见最后）

文章目录

前言

最近在尝试做一个租房的可视化，所以开始学习JavaScript和AXURE原型设计。了解到Echarts是一个非常丰富的JavaScript开源可视化库，涵盖了许多图表。因此，记录一下整个过程，以便复盘分享。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Echarts是什么？

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备。

二、使用步骤

1.下载

进入官网（https://echarts.apache.org/）可以看到导航的下载，点进去可以看到官网提供的几种下载路径，本文我们选择进入Github下载（见图1）。

图1 Echarts下载界面及选择

随后，我们会进入Github的界面，选择echarts.min.js点进去（图2），在接下来的界面（图3）找到Raw，鼠标右键点击后选择链接另存为，将echarts.min.js保存到你的电脑中（为方便使用，我选择保存到了HTML的同一文件夹下）。

图2 Github 界面1

图3 Github 界面2

2.引入库

接下来，就是将echarts.min.js引入HTML的头文件（head）中，代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echarts画雷达图</title>
    <!-- 在head标签中添加对Echarts的引用 -->
    <script src="echarts.min.js"></script>
</head>

3.准备图表容器

在HTML的<body> </body>内添加一个具备大小的容器，并该容器设置id为main便于后续被选择，代码如下：

    <!-- 添加一个div,用来做图表渲染的容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>

4.初始化Echarts

在Echarts的官网中给出了很多示例（Examples - Apache ECharts），我们找到雷达图点进去，选择完整代码（图4）。

图4 Echarts中雷达图示例

复制左侧第三行 var以后的所有内容到HTML的<script></script>标签中

<script>

    var chartDom = document.getElementById('main');  //通过选择id,确定图表容器为上面div
    var myChart = echarts.init(chartDom);
    var option;

    option = {
    title: {
        text: 'Basic Radar Chart' //图表的标题
    },
    legend: {
        data: ['Allocated Budget', 'Actual Spending'] //图例
    },
    radar: {
        // shape: 'circle',
        indicator: [         //雷达图的各项指标
        { name: 'Sales', max: 6500 },
        { name: 'Administration', max: 16000 },
        { name: 'Information Technology', max: 30000 },
        { name: 'Customer Support', max: 38000 },
        { name: 'Development', max: 52000 },
        { name: 'Marketing', max: 25000 }
        ]
    },
    series: [
        {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
            {
            value: [4200, 3000, 20000, 35000, 50000, 18000],  //第一个图例的数据值（依次）
            name: 'Allocated Budget'
            },
            {
            value: [5000, 14000, 28000, 26000, 42000, 21000], //第二个图例的数据值（依次）
            name: 'Actual Spending'
            }
        ]
        }
    ]
    };

    option && myChart.setOption(option);


</script>

5. 修改配置项

修改相应的配置项，例如：标题、数值、图例等等，就可以得到我们想要的雷达图了，完整代码及示意图如下（图5）。如果你想要了解更多配置项，可以查看Echarts提供的术语速查手册术语速查手册 - Apache ECharts。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echarts画雷达图</title>
    <!-- 在head标签中添加对Echarts的引用 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 添加一个div,用来做图表渲染的容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- js初始化和配置参数 -->
    <script type="text/javascript">
        // 初始化echarts实例 echarts.init()
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '第一个雷达图'
            },
            legend: {
                data: ['甲科室', '乙科室']
            },
            radar: {
                // shape: 'circle',
                indicator: [
                { name: '项目', max: 6500 },
                { name: '建设单位', max: 16000 },
                { name: '监理单位', max: 30000 },
                { name: '勘察单位', max: 38000 },
                { name: '房产经纪单位', max: 52000 },
                { name: '物业维护单位', max: 25000 }
                ]
            },
            series: [
                {
                name: '甲科室 vs 乙科室',
                type: 'radar',
                data: [
                    {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: '甲科室'
                    },
                    {
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: '乙科室'
                    }
                ]
                }
            ]
        };

        option && myChart.setOption(option);
    </script>

   

</body>
</html>