当前位置: 首页>前端>正文

Devexpress winform实现雷达图和驾驶舱 html画雷达图

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


文章目录

前言

一、Echarts是什么?

二、使用步骤

1.下载

2.引入库

3.准备图表容器

4.初始化Echarts

5. 修改配置项

总结


前言

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


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

一、Echarts是什么?

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

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

二、使用步骤

1.下载

进入官网(https://html" class="superseo">echarts.apache.org/)可以看到导航的 下载,点进去可以看到官网提供的几种下载路径,本文我们选择进入Github下载(见图1)。

Devexpress winform实现雷达图和驾驶舱 html画雷达图,Devexpress winform实现雷达图和驾驶舱 html画雷达图_echarts,第1张

 图1  Echarts下载界面及选择

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

Devexpress winform实现雷达图和驾驶舱 html画雷达图,Devexpress winform实现雷达图和驾驶舱 html画雷达图_前端_02,第2张

 图2  Github 界面1

Devexpress winform实现雷达图和驾驶舱 html画雷达图,Devexpress winform实现雷达图和驾驶舱 html画雷达图_HTML_03,第3张

 图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)。

Devexpress winform实现雷达图和驾驶舱 html画雷达图,Devexpress winform实现雷达图和驾驶舱 html画雷达图_echarts_04,第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>

Devexpress winform实现雷达图和驾驶舱 html画雷达图,Devexpress winform实现雷达图和驾驶舱 html画雷达图_图例_05,第5张

图5 最终雷达图效果


总结

我刚开始接触Echarts、JavaScript,基础很薄弱,但是按照步骤,在HTML上面展示一个想要的图表也并不难。如果有错漏或其他想法,欢迎指正和交流!


https://www.xamrdz.com/web/2tg1951477.html

相关文章: