这是一个代码小白学习使用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）。
图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>
图5 最终雷达图效果
总结
我刚开始接触Echarts、JavaScript，基础很薄弱，但是按照步骤，在HTML上面展示一个想要的图表也并不难。如果有错漏或其他想法，欢迎指正和交流！