在介绍Echarts图标之前，我们先来了解一下数据可视化
一.什么是数据可视化？
数据可视化就是把数据从冰冷生硬的数字转换为有趣生动的图片的一种方式，它可以揭示藏在数据中的规律和道理
二.数据可视化的主要目的是什么？
数据可视化的主要目的是借助于图形化手段，清晰有效的传达与沟通信息
三.Echarts.js 和 数据可视化库有什么关系？
Echarts.js 是百度出品的一个开源 Javascript 数据可视化库，目前，因为它实在是非常便利，已经走出国门，走向世界了
四.Echarts图表有哪些优点？
开源免费（所以大家可以放心使用）、功能丰富、社区活跃、文档说明详细等
五.初识Echarts
a.Echarts的官网地址 echarts.apache.org/zh/index.ht…
b.点击“示例”发现新世界，它有多种多样的图形类型任君挑选
c.任意点击一个图形，进去新页面后我们可以看到：它的左侧是图形对应代码，右侧是图形
六.了解图形对应代码含义
a.title 总标题（最上方、最大的那一个）
b.tooltip 提示框组件(鼠标放置图片上时显示的内容）
c.legend 图例组件
d.series 系列图标
e.toolbox 工具栏
f. xAxis x轴坐标 yAxis y轴坐标
七.了解Echarts图表部分对应参数含义（以便以后的使用）
1.提示框组件（提示信息） tooltip
tooltip: {
trigger:'item',
<!-- trigger 触发方式（类型） -->
<!-- item 是图形触发，就是鼠标放在图片上面的时候，会触发 -->
<!-- axis 是坐标轴触发 -->
formatter:"{a} <br /> {b} : {c} ({d}%)"
<!-- farmatter 格式化提示内容 -->
<!-- a 代表 series 系列图标名称 -->
<!-- b 代表 series 数据名称 data 里面的 name -->
<!-- c 代表 series 数据值里面的 value -->
<!-- d 代表 当前数据/总数据的比例 -->
}
2.series 系列图标名称
<!-- 注意：使用百分比布局的时候一定要加引号 -->
series: [
{
name: 'Radius Mode',
<!-- 图表名称 -->
type: 'pie',
<!-- 图表类型（饼形图、折线图等） -->
radius: [20, 140],
<!-- 饼形图半径 第一个是内径，第二个是外径 -->
<!-- 可以是直接书写的像素大小（如 30px 50px) 也可以写成百分比的形式（基于DOM容器的大小） -->
<!-- 通过调整半径的大小，可以实现缩放饼形图的效果 -->
center: ['25%', '50%'],
<!-- 图表中心的位置 -->
roseType: 'radius',
<!-- 绘图方式 -->
<!-- 可以是 radius 半径模式，图形按照其半径大小来绘图 -->
<!-- 也可以是 area 面积模式，图形按照面积大小来进行绘图 -->
itemStyle: {
borderRadius: 5
},
label: {
show: false
},
<!-- label 控制文字的一些样式 -->
<!-- labelLine 控制引导线的长度 它有两根 -->
<!-- length 是第一根，与图形相接触的那根线 -->
<!-- length2 是第二根，与文字相接触的那根线 -->
emphasis: {
label: {
show: true
}
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 33, name: 'rose 2' },
{ value: 28, name: 'rose 3' },
{ value: 22, name: 'rose 4' },
{ value: 20, name: 'rose 5' },
{ value: 15, name: 'rose 6' },
{ value: 12, name: 'rose 7' },
{ value: 10, name: 'rose 8' }
]
},
<!-- 数据库 -->
八.Echarts图表的使用步骤
1.引入echarts文件
2.准备一个具备大小的DOM容器（用来装我们的Echarts图表）
3.初始化echarts实例对象
4.指定配置项和数据（option）
5.将配置项和数据(option) 设置给 实例对象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>
<style>
.box {
width: 450px;
height: 450px;
background-color: pink;
}
</style>
<!-- 1.引入echarts.js文件 -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 2.准备具有大小的盒子 -->
<div class="box"></div>
<script>
// 3.初始化 echarts 实例对象
var myChart = echarts.init(document.querySelector('.box'));
// 4.指定配置项和数据(option)
var option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 5.将配置项和数据设置给 实例对象 echarts
myChart.setOption(option);
</script>
</body>
</html>
至此，有关Echarts图表的使用的教程已然结束，没有一份教程能够代替实操演练的效果，所以，如果看完了就赶紧去动手试试，感受一下Echarts图表的美妙吧
如有错误，请在下方评论区指正，我们共同进步！！！
