一，什么是echars?
Echars官网
是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器.
二，特点
1，ECharts 属于开源软件，并且我们提供了非常炫酷的图形界面，特色是地图，
2，ECharts 种类多，提供了柱状图、折线图、饼图、气泡图及四象限图等；
3，ECharts 使用简单，在官网中为我们封装了 JS，只要会引用就会得到完美的展示效果；
三，使用
1，Echars下载链接: https://echarts.apache.org/zh/download.html
1.1随便点击一个版本
1.2，此时我们下载一个Echarsmin.js文件
2，代码编写
2.1准备一个带有大小的div容器，生成的图表会放在这里面
<div id="container">存放图表</div>
2.2初始化echars实例化对象
var echart = echarts.init(document.getElementById("container"))
2.3指定配置项和数据（option）
var option = {
title: {
text: "我的第一个图表"
},
tooltip: {
},
legend: {
data: ["睡眠时长"]
},
xAxis: {
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {
},
series: [{
name: "睡眠时长",
type: "bar",
data: [8, 10, 4, 5, 9, 4, 8]
}]
}
2.4将配置项设置给echars实例对象
echart.setOption(option);
完整版的echars代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js"></script>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script>
var echart = echarts.init(document.getElementById("container"))
var option = {
title: {
text: "我的第一个图表"
},
tooltip: {
},
legend: {
data: ["睡眠时长"]
},
xAxis: {
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {
},
series: [{
name: "睡眠时长",
type: "bar",
data: [8, 10, 4, 5, 9, 4, 8]
}]
}
echart.setOption(option);
</script>
</html>
效果如图：
四，了解echars一些常用的配置
1.series：图标数据，指定什么类型的图标，可以多个图表重叠。
2.xAxis：直角坐标系中的 x 轴
3.yAxis：直角坐标系中的 y 轴
总结：x 轴常用来标示数据的，指数据的类别，例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值，数值是用来具体考察某一类数据的数量值，也是我们需要分析的指标，例如“销售数量”和“销售金额”等。
4.grid：直角坐标系内绘图网格。
5.title：标题组件
在option选项中添加一个title，此时这个title会展现在我们图标的顶部
6.tooltip：提示框组件
当我们鼠标移入这些柱子上时，会有数据展现出来，如果tooltip{}为空时，为默认展示
7.legend：图例组件
这个属性展示的是这一部分，将每组不同的数据用不同的方块在顶部展示出来，便于区分
尤为要注意的是在series中name的值要等于legend中的值
8.color：调色盘颜色列表
9.stack：数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的
10.emphasis:高亮的样式,
在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 emphasis 属性来定制。emphsis 中的结构，和普通样式的结构相同
// 高亮样式。
emphasis: {
itemStyle: {
// 高亮时点的颜色。
color: 'blue'
},
label: {
show: true,
// 高亮时标签的文字。
formatter: 'This is a emphasis label.'
}
五，echars常用的图表类型
1，柱状图：bar
option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
},
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25]
},
{
type: 'bar',
data: [26, 24, 18, 22, 23, 20, 27]
}
]
};
效果：
2，折线图：line
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
},
series: [
{
data: [10, 22, 28, 43, 49],
type: 'line',
stack: 'x',
areaStyle: {
}
},
{
data: [5, 4, 3, 5, 10],
type: 'line',
stack: 'x',
areaStyle: {
}
}
]
};
3，饼图：pie
option = {
legend: {
orient: 'vertical',
x: 'left',
data: ['A', 'B', 'C', 'D', 'E']
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
emphasis: {
show: true
}
},
labelLine: {
show: false
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
data: [
{
value: 335, name: 'A' },
{
value: 310, name: 'B' },
{
value: 234, name: 'C' },
{
value: 135, name: 'D' },
{
value: 1548, name: 'E' }
]
}
]
};
六，富文本
特点：定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。
对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。
在文本中使用图片做小图标或者背景。
特定组合以上的规则，可以做出简单表格、分割线等效果。
echarts 提供了丰富的文本标签配置项，包括：
字体基本样式设置：fontStyle、fontWeight、fontSize、fontFamily。
文字颜色：color。
文字描边：textBorderColor、textBorderWidth。
文字阴影：textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY。
文本块或文本片段大小：lineHeight、width、height、padding。
文本块或文本片段的对齐：align、verticalAlign。
文本块或文本片段的边框、背景（颜色或图片）：backgroundColor、borderColor、borderWidth、borderRadius。
文本块或文本片段的阴影：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。
文本块的位置和旋转：position、distance、rotate。
labelOption = {
// 在文本中，可以对部分文本采用 rich 中定义样式。
// 这里需要在文本中使用标记符号：
// `{styleName|text content text content}` 标记样式名。
// 注意，换行仍是使用 '\n'。
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('\n'),
// 这里是文本块的样式设置：
color: '#333',
fontSize: 5,
fontFamily: 'Arial',
borderWidth: 3,
backgroundColor: '#984455',
padding: [3, 10, 10, 5],
lineHeight: 20,
// rich 里是文本片段的样式设置：
rich: {
a: {
color: 'red',
lineHeight: 10
},
b: {
backgroundColor: {
image: 'xxx/xxx.jpg'
},
height: 40
},
x: {
fontSize: 18,
fontFamily: 'Microsoft YaHei',
borderColor: '#449933',
borderRadius: 4
}
}
};